FullCalendar传递开始日期

时间:2012-03-29 15:22:33

标签: fullcalendar

有人可以帮助我了解如何将开始日期传递到日历中。我创建了一个Delivery Scheduler日历,并在通过数据库提供的日历下的表格中显示交付详细信息。这要求我在用户选择日历日加载表信息时刷新页面。我可以弄清楚如何在传递到页面的开始日期开始日历。

似乎这很容易,但我做错了。

$( '#日历')fullCalendar(选项)。; $('#calendar')。fullCalendar('gotoDate','2012-10-21');

2 个答案:

答案 0 :(得分:3)

基于文档http://arshaw.com/fullcalendar/docs/current_date/gotoDate/

的示例

请记住,月份是0,所以10表示11月。

$(document).ready(function () {

    var calendar = $('#calendar').fullCalendar({
        events:[
            { title:'All Day Event', start:new Date(2012, 10, 20)},
            { title:'Long Event', start:new Date(2012, 10, 21), end:new Date(2012, 10, 22)}
        ]
    });

    $('#calendar').fullCalendar('gotoDate', 2012, 10, 21);

});

答案 1 :(得分:1)

感谢Biesior提供的有用答案。我能够使用您建议的代码来获取我正在寻找的行为。

在使用上述方法时,我注意到Firebug的控制台显示两个同时执行的AJAX数据请求,一个用于与当前日期关联的视图,另一个用于与指定gotoDate关联的视图。

从用户的角度来看似乎没有任何额外的延迟,日历从一开始就显示请求的视图。但是,“加载”回调将被多次调用,这可能会在某些情况下导致奇怪的行为。可能还有其他不受欢迎的结果与当前日期的多余AJAX请求相关联。

我能够通过在没有事件源的情况下初始化日历来避免不必要的AJAX请求,然后移动到上面的Biesior所示的所需日期,然后添加事件源。序列如下所示。 我删除了一些不相关的FullCalendar选项和回调以保持简洁。还有一些额外的AJAX参数和一些PHP,但需要注意的重要事项是指定了事件源。

原始代码导致两个同时发生的AJAX请求:

$('#calendar').fullCalendar({
  events: {
    url:'/Services/GetEvents.php',
    type: 'POST',
    data: {
        lat: <?=$venLatitude?>,
        lon: <?=$venLongitude?>,
        userID: <?=$userID?>,
        distance: <?=$distance?>
    }
  }
})
$('#calendar').fullCalendar('gotoDate', <?=(int)substr($startDate,0,4)?>, <?=((int)substr($startDate,5,2))-1?>);

此调整仅产生所需的AJAX请求:

        $('#calendar').fullCalendar();
        $('#calendar').fullCalendar('gotoDate', <?=(int)substr($startDate,0,4)?>, <?=((int)substr($startDate,5,2))-1?>);
        $('#calendar').fullCalendar('addEventSource', {
                url:'/Services/GetEvents.php',
                type: 'POST',
                data: {
                    lat: <?=$venLatitude?>,
                    lon: <?=$venLongitude?>,
                    userID: <?=$userID?>,
                    distance: <?=$distance?>
                }
            });