首页 > 解决方案 > 每天显示的所有事件

问题描述

我正在使用 Fullcalendar 来显示事件,但是,它会显示每天的所有事件,无论日期如何,如下所示。

如何阻止这种情况发生并让日历正确显示事件?

在此处输入图像描述

我的页面“calendar.php”上的代码是:

$(function() {
    $('#calendar').fullCalendar({
        themeSystem: 'bootstrap3',
        allDaySlot: 'false',
        firstDay: '1',

        header: {
            left: 'prev, today, next',
            center: 'title',
            right: 'month, agendaWeek, agendaDay'
        },

        defaultView: 'month',

        views: {
            month: {
                columnHeaderFormat: 'dddd'
            },
            agendaWeek: {
                titleFormat: 'MMMM YYYY',
                columnHeaderFormat: 'dddd Do'
            },

            agendaDay: {
                titleFormat: 'MMMM YYYY',
                columnHeaderFormat: 'dddd Do'
            },
        },

        minTime: '09:00',
        editable: 'true',
        eventLimit: 'true',
        selectable: 'true',
        events: 'events.php'
    });
});

“events.php”的代码是:

$connect = new PDO('mysql: host=localhost; dbname=dbName', 'userName', 'pWord');

$data = array();

$query = "SELECT bookingEnquiryNumber, IFNULL(NULLIF(groupName,''),CONCAT(firstName,' ',lastName)) AS bookingName, bookingDate, bookingStartTime, bookingFinishTime FROM tblbookingdetails WHERE accepted = 1 ORDER BY bookingDate";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

foreach($result as $row)
    {
        $data[] = array(
            'title'    => $row["bookingName"],
            'date'     => $row["bookingDate"],
            'start'    => $row["bookingStartTime"],
            'end'      => $row["bookingFinishTime"]
        );
    }

echo json_encode($data);

“events.php”的输出是:

[{"title":"Jacquenette Reichhardt","date":"2018-10-07","start":"20:00","end":"22:00"},{"title":"Haag Group","date":"2018-10-09","start":"13:00","end":"15:00"},{"title":"Nelly Tuffs","date":"2018-10-18","start":"16:00","end":"18:00"},{"title":"Aufderhar, Beatty and Anderson","date":"2018-10-22","start":"12:00","end":"14:00"},{"title":"Moore Inc","date":"2018-10-31","start":"19:00","end":"22:00"},{"title":"Ledner, Farrell and DuBuque","date":"2018-11-01","start":"19:00","end":"22:00"},{"title":"Stamm, Nicolas and Lind","date":"2018-11-04","start":"17:00","end":"19:00"},{"title":"Elvina Barnet","date":"2018-11-15","start":"10:00","end":"13:00"},{"title":"Hegmann, Armstrong and Leffler","date":"2018-11-21","start":"17:00","end":"19:00"},{"title":"Chrisy Laurie","date":"2018-11-24","start":"17:00","end":"19:00"},{"title":"Sasha Andrysek","date":"2018-12-07","start":"16:00","end":"20:00"},{"title":"Littel-Daniel","date":"2018-12-11","start":"09:00","end":"17:00"}]

我使用了Jquery Fullcalendar Integration with PHP and Mysql中的一些代码。

我的日历页面使用 MySQLi 连接到数据库,但“events.php”使用 PDO(我无法让 Mysqli 工作)。

标签: phpjquerymysqlfullcalendar

解决方案


查看文档,date不仅有startand end。所以,更换

    $data[] = array(
        'title'    => $row["bookingName"],
        'date'     => $row["bookingDate"],
        'start'    => $row["bookingStartTime"],
        'end'      => $row["bookingFinishTime"]
    );

    $date = $row["bookingDate"];
    $data[] = array(
        'title'    => $row["bookingName"],
        'start'    => $date. ' ' .$row["bookingStartTime"].':00',
        'end'      => $date. ' ' .$row["bookingFinishTime"].':00'
    );

或者使用 MySql 进行等效的发送start,并end使用格式作为日期时间YYYY-MM-DD HH:mm:ss


推荐阅读