2

我正在使用 jQuery fullcalendar 插件。

如何获取下个月的数据，即通过单击“下一个”按钮传递数据

$('#calendar').fullCalendar({
    events:"automapic_admin.php?current_date='+currentdate,
    eventRender: function(event, element) {
        $('.fc-event-title', element).html(event.title);
    }
});

实际上，我正在使用点击事件来调用下一个按钮。

$(".fc-button-next span").live("click", function(){ });
4

2 回答 2

2

单击“下一个”和“上一个”按钮时，将调用事件函数。这是一个加载当前年份和月份数据的示例。

$(document).ready(function () {
    loadCal();
});

function loadCal() {

    var current_url = '';
    var new_url     = '';

    $('#calendar').fullCalendar({

        // other options here...

        events: function( start, end, callback ) {

            var year  = end.getFullYear();
            var month = end.getMonth();

            new_url  = '/api/user/events/list/' + id + '/year/' + year + '/month/' + month;

            if( new_url != current_url ){

                $.ajax({
                    url: new_url,
                    dataType: 'json',
                    type: 'POST',
                    success: function( response ) {

                        current_url = new_url;
                        user_events = response;

                        callback(response);
                    }
                })
           }else{
               callback(user_events);
           }
        }
    })
}

在查询中检索结果时，请确保至少包含上个月的最后 10 天和下个月的前 10 天。这是 PHP 中的一个示例：

if( $month === null ){
    $month = '01';
}

$startDate     = $year . '-' .  $month . '-01';
$startDateTime = new \DateTime( $startDate );
$startDateTime->modify( '-10 days' );
$startDate     = $startDateTime->format( 'Y-m-d H:i:s' );

我决定按时而不是按月拉出全年的所有事件以减少请求，因为事件的数量很少。如果每个用户有大量事件，那么按月拉取它们更有意义。

于 2013-10-02T10:39:48.493 回答
0

上面的答案让我半途而废，但我最终得到了我认为稍微简单的内容，并且还针对最新的 FullCalendar 进行了更新。

    $(document).ready(function() {
        var d = new Date();

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            fixedWeekCount: true, 
            defaultDate: d,
            editable: true,
            eventLimit: false,
            events: function(start, end, timezone, callback) {
                var eventsUrl = '/events/' + end.year() + '/' + parseInt(end.month());
                $.ajax({
                    url: eventsUrl,
                    type: 'GET'
                }).done(function(response) {
                    callback(response);
                }).fail(function(response, status, error) {
                    alert(status + ': ' + error);
                });
            },
            loading: function(isLoading) {
                if (isLoading) {
                    $('#loading').show();
                } else {
                    $('#loading').hide();
                }
            }
        });
    });

'/events/' URL 包括年份和月份（例如，'/events/2015/2'）以获取特定月份的事件。当日历第一次加载时，它默认为当前日期，并且方便地在第一次加载时传递给日历的 end 参数与 start 相同，因此它既可以在第一次加载时使用，也可以在上一个和下一个按钮时使用被点击。

无论如何，这对我来说效果很好，所以我想我会分享，因为它与我今天在工作时发现的任何其他示例都有点不同。

于 2015-02-17T22:17:22.087 回答