How to connect bootstrap year calendar with mysql base

Question

I got problem with connecting bootstrap year calendar from bootstrap-year-calendar.com with my mysql base.

I make getEvents.php file, which is connecting with base and taking data of events. When I printing result from this file then all is ok and i see my events, but when I trying to include this result to DataSource in calendar script then I dont see any events.

Someone could send some examples how to do it?

My codes:

getEvents.php

<?php 

        require "bdd.php";
        $result = $bdd->prepare("SELECT `id`, `title`, `start`, `end`, `color`, `dsc`, `zlec`, `stanowisko` FROM `events`");
        $result->execute();
        $event_array = array();
        $result->setFetchMode(PDO::FETCH_ASSOC);
        while ($record = $result->fetch()) {
            $event_array[] = array(
                'id' => $record['event_id'],
                'title' => $record['event_name'],
                'start' => $record['start_event'],
                'end' => $record['end_event'],
            );
        }
    echo json_encode($event_array);

?>

calendar script I change to

dataSource: ['getEvents.php']

ACTUALIZATION

@JeffHuijsmans Im not sure how to fix it.

Please tell me how to fetch into dataSource function result from my getEvents.php file ?

echo from getEvents file return

[{"event_id":"1","event_title":"XXX","event_start":"2017-10-04","event_end":"2017-10-06"}]

Default data in dataSource is looking like this:

dataSource: [
            {
                id: 0,
                name: 'Google I/O',
                location: 'San Francisco, CA',
                startDate: new Date(currentYear, 4, 28),
                endDate: new Date(currentYear, 4, 29)
            }]

Answer 1

A "workaround" is iterate the data array and generate a string with data in calendar format.

Here works fine, hope helps.

Sample:

private function convertYearData(array $yearData) : string
    {
        if (empty($yearData)) {
            return 'null';
        }
        $data = '';
        foreach ($yearData as $event) {
            if (empty($data)) {
                $data =  "[{id:{$event['id']}, name:'{$event['name']}', type:'{$event['type']}', startDate: new Date('{$event['startDate']}'), endDate: new Date('{$event['endDate']}')}";
            } else {
                $data .=  ", {id:{$event['id']}, name:'{$event['name']}', type:'{$event['type']}', startDate: new Date('{$event['startDate']}'), endDate: new Date('{$event['endDate']}')}";
            }   
        }
        $data .= ']';
        return $data;
    }

    $yearDataArr = [
        [
            'id' => '1',
            'name' => 'Pesquisa Teste',
            'type' => 'Pesquisa',
            'color' => '#4da539',
            'startDate' => '2017-04-28 02:00:00',
            'endDate' => '2017-04-30 12:00:00',
        ],
        [
            'id' => '2',
            'name' => 'Media Teste',
            'type' => 'Media',
            'color' => '#00afe8',
            'startDate' => '2017-04-25 02:00:00',
            'endDate' => '2017-05-12 12:00:00',
        ],
        [
            'id' => '3',
            'name' => 'Email Marketing Teste',
            'type' => 'Email Marketing',
            'color' => '#af2828',
            'startDate' => '2017-03-25 02:00:00',
            'endDate' => '2017-05-17 12:00:00',
        ],
    ];
    $yearData = $this->convertYearData($yearDataArr);

after, in your html just echo your var $yearDate:

$('#calendar').calendar({ 
    language:'pt',
    enableContextMenu: false,
    enableRangeSelection: true,
    selectRange: function(e) {
        editEvent({ startDate: e.startDate, endDate: e.endDate });
    },
    mouseOnDay: function(e) {
        if(e.events.length > 0) {
            var content = '';

            for(var i in e.events) {
                content += '<div class="event-tooltip-content">'
                            + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].type + '</div>'
                            + '<div class="event-type">' + e.events[i].name + '</div>'
                        + '</div>';
            }

            $(e.element).popover({ 
                trigger: 'manual',
                container: 'body',
                html:true,
                content: content
            });

            $(e.element).popover('show');
        }
    },
    mouseOutDay: function(e) {
        if(e.events.length > 0) {
            $(e.element).popover('hide');
        }
    },
    dayContextMenu: function(e) {
        $(e.element).popover('hide');
    },
    dataSource: <?php echo $this->yearData; ?>
});