javascript - FullCalendar 在设定的时间内每周重复 mysql 事件

标签 javascript php jquery mysql fullcalendar

编辑: 范围现在被正确地构造为数组,日期和时间现在被格式化为 ISO8601。遗憾same error message on console with hasTime .


我正在尝试使用 FullCalendar 制定学校时间表,使用 php 从数据库加载每节课以编码为 json。

我试图仅在学期日期 (2016/09/26 - 2016/12/16) 内在时间表上显示每周重复的每节课。其他类(class)的这个范围可能不同。

下面是 EventListRecurring.php 的输出

   [{
    "id": "1",
    "title": "History",
    "start": "09:00",
    "end": "10:00",
    "dow": "1",
    "ranges": [{
        "start": "2016-09-26",
        "end": "2016-12-16"
    }],
    "allDay": false
}, {
    "id": "2",
    "title": "English",
    "start": "10:00",
    "end": "12:00",
    "dow": "2",
    "ranges": [{
        "start": "2016-09-26",
        "end": "2016-12-16"
    }],
    "allDay": false
}, {
    "id": "3",
    "title": "Geography",
    "start": "14:00",
    "end": "16:00",
    "dow": "3",
    "ranges": [{
        "start": "2016-09-26",
        "end": "2016-12-16"
    }],
    "allDay": false
}]

我试过使用 slicedtoads solution使用以下 javascript 但日历上没有事件并且只获取 this error

CalendarTimetableRecurring

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel='stylesheet' href='fullcalendar/fullcalendar.min.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
</head>
<body>
<h1>Reapeating Events Example </h1>
<div id='calendar'></div>

<script type="text/javascript">
var repeatingEvents = 
    'EventListRecurring.php'

var getEvents = function( start, end ){
    return repeatingEvents;
}

$('#calendar').fullCalendar({
    defaultDate: moment(),
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'month',
    eventRender: function(event, element, view){
        console.log(event.start.format());
        return (event.ranges.filter(function(range){
            return (event.start.isBefore(range.end) &&
                    event.end.isAfter(range.start));
        }).length)>0;
    },
    events: function( start, end, timezone, callback ){
        var events = getEvents(start,end);

        callback(events);
    },
});


</script>   
</body>
</html>

EventListRecurring.php

<?php

$record[0]["title"]="History";
$record[1]["title"]="English";
$record[2]["title"]="Geography";

$record[0]["start_time"]="09:00";
$record[1]["start_time"]="10:00";
$record[2]["start_time"]="14:00";

$record[0]["end_time"]="10:00";
$record[1]["end_time"]="12:00";
$record[2]["end_time"]="16:00";

$record[0]["dow"]="1";
$record[1]["dow"]="2";
$record[2]["dow"]="3";

$record[0]["start_date"]="2016-09-26";
$record[1]["start_date"]="2016-09-26";
$record[2]["start_date"]="2016-09-26";

$record[0]["end_date"]="2016-12-16";
$record[1]["end_date"]="2016-12-16";
$record[2]["end_date"]="2016-12-16";

$record[0]["id"]="1";
$record[1]["id"]="2";
$record[2]["id"]="3";

for ($i=0; $i<3; $i++) {

    $event_array[] = array(
            'id' => $record[$i]['id'],
            'title' => $record[$i]['title'],
            'start' => $record[$i]['start_time'],
            'end' => $record[$i]['end_time'],
            'dow' => $record[$i]['dow'],
            'ranges' => array(
                0 => array(
                    'start' => $record[$i]['start_date'],
                    'end' => $record[$i]['end_date'],
                )
            ),
            'allDay' => false

    );


}

echo json_encode($event_array);


exit;

?>

最佳答案

您的“范围”属性的结构与您链接到的解决方案中的结构不同。您返回的是单个对象,而不是数组:

"ranges": {
    "start": "2016-09-26",
    "end": "2016-12-16"
}

应该是

"ranges": [{
    "start": "2016-09-26",
    "end": "2016-12-16"
}]

修复此问题后,您的代码似乎可以正常运行并按预期工作。

您可以按如下方式修改您的 PHP 以创建此结构:

'ranges' => array(
    0 => array(
        'start' => $record[$i]['start_date'],
        'end' => $record[$i]['end_date'],
    )
)

最后,将您的数据源定义修改为:

events: "EventListRecurring.php"

你现在使用自定义数据源的方式是不必要的,因为你没有操纵数据,而且也不会工作,因为你必须自己处理 ajax 调用 - 目前它只是返回包含 PHP 脚本名称的字符串。它实际上并没有调用该脚本。

关于javascript - FullCalendar 在设定的时间内每周重复 mysql 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42391448/

相关文章:

jquery - 什么时候适合使用 Accordion ?

javascript - 我需要为每列定义固定宽度还是可以自动计算?

javascript - 滚动到缓动不适用于无限 js。滚动到缓动与无限js冲突

jquery - “搜索”按钮可激活自动完成功能

php - 具有多个标题行的 CSV;使用php导入mysql

php - 在sql中存储日期的最佳格式

javascript - 如何使用 jQuery overlay 将单选按钮添加到弹出窗口?

javascript - 使用一个 HTTP 请求加载几个缩略图

javascript - 使用字符串数组创建多级对象,将数组解析为JS对象

php - 处理、发送电子邮件并将表单数据插入 SQL。 PHP/MySQL 最佳实践和安全性。