javascript - 如何将 bootstrap 年历与 mysql 库连接

Question

我在将 bootstrap-year-calendar.com 的 bootstrap 年历与我的 mysql 库连接时遇到问题。

我制作了 getEvents.php 文件，该文件与基础连接并获取事件数据。当我从此文件打印结果时，一切正常，我看到了我的事件，但是当我尝试将此结果包含到日历脚本中的数据源时，我看不到任何事件。

有人可以发送一些如何做到这一点的示例吗？

我的代码:

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);

?>

日历脚本我更改为

dataSource: ['getEvents.php']

实现

@JeffHuijsmans 我不知道如何解决它。

请告诉我如何从 getEvents.php 文件获取 dataSource 函数结果？

从 getEvents 文件返回回显

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

dataSource 中的默认数据如下所示:

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

“解决方法”是迭代数据数组并生成包含日历格式数据的字符串。

这里工作正常，希望有所帮助。

示例:

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);

之后，在你的html中只需回显你的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; ?>
});