Question

我正在尝试使用CLNDR.js在我的页面上显示事件。根据示例，应该像这样调用日历：

$(document).ready( function() {

    var eventArray = [
        { date: '2014-04-25', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' },
        { date: '2014-04-26', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' },
        { date: '2014-04-27', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' },
        { date: '2014-04-28', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' },
        { date: '2014-04-29', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' },
        { date: '2014-05-29', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' }
    ];


    $('#calendar').clndr({
        template: $('#template-calendar').html(),
        events: eventArray,
        startWithMonth: moment(),
    });

 });

这适用于我的页面，包含静态事件。

但是当我尝试通过AJAX加载事件时，它不起作用。这是代码： var cal;

$(document).ready(function() {

    if(!$('#calendar').length)
        return;

    if(!$('#calendar').data('calendar'))
        return;

    if(!$('#calendar').data('token'))
        return;

    httpParams = {
                    category: $('#calendar').data('calendar'), 
                    csrf_token: $('#calendar').data('token')
                };

    calendarEvents = [];

    $.ajax({
        method: "POST",
        dataType: "json",
        url: '/api/calendar',
        data: httpParams,
        success: function(data) {
            $.each(data, function(key, event) {

                var item = {"date" : moment(event.event_date).format('YYYY-MM-DD'), "title" : event.title, "description" : event.event_text};

                calendarEvents.push(item);  
            });
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });


    $('#calendar').empty();

    cal = $('#calendar').clndr({

        template: $('#template-calendar').html(),
        events: calendarEvents, //The events doesn't get populated in the cal.eventsThisMonth, cal.eventsNextMonth and  cal.eventsLastMonth ???
        startWithMonth: moment(),
    });
});

以下是AJAX响应的屏幕截图： https://www.dropbox.com/s/h5r57b5p4vt6vzr/ajax_response.JPG

这是calerdarEvents数组： https://www.dropbox.com/s/t4hlt3wq39oehgr/calendarEventsArray.JPG

我不知道是什么问题？

Answer 1

您的日历会在异步ajax调用完成之前呈现。

您应该在$ .each语句之后在成功块中调用$（＆＃39;＃calendar＆＃39;）。clndr（）。

或者更好的是，在ajax调用之前添加日历并使用.addEvents() api方法。

CLNDR.js和通过AJAX加载事件无法正常工作

1 个答案: