javascript - 在年历的json数据源中填充mysql数据

Question

  $('#calendar').data('calendar').setDataSource(<?php echo ($json); ?>);
   dataSource: [
        {
            id: 0,
            name: 'Google I/O',
            location: 'San Francisco, CA',
            startDate: new Date(currentYear, 4, 28),
            endDate: new Date(currentYear, 4, 29)
        },
        {
            id: 1,
            name: 'Microsoft Convergence',
            location: 'New Orleans, LA',
            startDate: new Date(currentYear, 2, 16),
            endDate: new Date(currentYear, 2, 19)
        },
        {
            id: 2,
            name: 'Microsoft Build Developer Conference',
            location: 'San Francisco, CA',
            startDate: new Date(currentYear, 3, 29),
            endDate: new Date(currentYear, 4, 1)
        },
        {
            id: 3,
            name: 'Apple Special Event',
            location: 'San Francisco, CA',
            startDate: new Date(currentYear, 8, 1),
            endDate: new Date(currentYear, 8, 1)
        },
        {
            id: 4,
            name: 'Apple Keynote',
            location: 'San Francisco, CA',
            startDate: new Date(currentYear, 8, 9),
            endDate: new Date(currentYear, 8, 9)
        },
        {
            id: 5,
            name: 'Chrome Developer Summit',
            location: 'Mountain View, CA',
            startDate: new Date(currentYear, 10, 17),
            endDate: new Date(currentYear, 10, 18)
        },
        {
            id: 6,
            name: 'F8 2015',
            location: 'San Francisco, CA',
            startDate: new Date(currentYear, 2, 25),
            endDate: new Date(currentYear, 2, 26)
        },
        {
            id: 7,
            name: 'Yahoo Mobile Developer Conference',
            location: 'New York',
            startDate: new Date(currentYear, 7, 25),
            endDate: new Date(currentYear, 7, 26)
        },
        {
            id: 8,
            name: 'Android Developer Conference',
            location: 'Santa Clara, CA',
            startDate: new Date(currentYear, 11, 1),
            endDate: new Date(currentYear, 11, 4)
        },
        {
            id: 9,
            name: 'LA Tech Summit',
            location: 'Los Angeles, CA',
            startDate: new Date(currentYear, 10, 17),
            endDate: new Date(currentYear, 10, 17)
        }
    ]

mysql 表有以下列

ID， 姓名， 地点， 开始日期， 结束日期， 创建时间(时间戳)

我尝试通过 json_encode 和 foreach 循环从数据源中的 mysql 中填充数据，但它无法正常工作(未在日历上显示事件数据)有人能准确地找出我做错的地方吗？我正在使用的日历是这个http://www.bootstrap-year-calendar.com/#Examples/Full example.u可以从这里检查代码

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

});