jQuery FullCalendar 单击“下一步”事件通知答案

【问题标题】：jQuery FullCalendar click 'next' event notificatinjQuery FullCalendar 单击“下一步”事件通知
【发布时间】：2010-02-08 03:24:50
【问题描述】：

当用户点击“下一步”（箭头）时，我如何获得通知？我在月视图中使用日历，我想按需加载下个月的数据。另外，smbdy 有使用 ASP.NET（AJAX 调用）数据的示例吗？

【问题讨论】：

在jQuery get the next month data using fullcalendar plugin中查看我的示例

标签： asp.net jquery ajax fullcalendar

【解决方案1】：

您可以使用 viewDisplay 触发器 (http://arshaw.com/fullcalendar/docs/display/viewDisplay/)，但它也会在日历加载或用户切换视图时被调用。

听起来你想要一个 events 函数： http://arshaw.com/fullcalendar/docs/event_data/events_function/

对于 asp.net 的事情，你看过这里吗？ http://weblogs.asp.net/gunnarpeipman/archive/2010/02/03/using-fullcalendar-jquery-component-with-asp-net-mvc.aspx

【讨论】：

【解决方案2】：

你接近的方式是错误的。您可能需要编写一个以 JSON 格式返回日历对象列表的 API，并使用以下选项。

$('#calendar').fullCalendar({
    events: '/myfeed.php'
});

然后，fullcalendar 将在需要时自动调用 /myfeed.php。例如如果用户单击“上一个”或“下一个”按钮。

这是完整日历将生成的示例 URL：

/myfeed.php?start=1262332800&end=1265011200&_=1263178646

如需更多信息，请访问以下网址。 http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

【讨论】：

【解决方案3】：

这里viewDisplay函数在用户点击next/prev时被调用。此外，您可以看到正在通过 AJAX 获取下一批数据。我希望这会有所帮助:)

$(document).ready(function () {

var calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'resourceMonth'
    },
    defaultView: 'resourceWeek',


    eventSources: [ getCalData() ],
    header: {
        left: 'prev,next today',
        center: 'title',
        right: ''
    },
    viewDisplay: function (view) {
        $('#calendar').fullCalendar('removeEvents');
        $('#calendar').fullCalendar('addEventSource', getCalData());
        $('#calendar').fullCalendar('rerenderEvents');
    }
  });
});


function getCalData() {

var source = [{}];
$.ajax({
    async: false,
    url: '/mysite/GetWeekData',
    data: { myParam: $('#calendar').fullCalendar('getView').visStart },
    success: function (data) {
        $(data).each(function () {
            source.push({
                title: $(this).attr('title'),
                start: $(this).attr('start'),
            });
        });
    },
    error: function () {
        alert('could not get the data');
    },
});
return source;
}

【讨论】：