Question

我正在尝试通过调用gotoDate来更改视图，然后在按下按钮后使用jQuery将其他类应用于所选事件。

问题是事件是使用ajax加载的，因此在事件准备好之前向事件添加类是“完成”。有没有办法确保在修改事件之前加载所有事件？

我想我想使用加载回调，但是我不确定在点击按钮后调用gotoDate后如何访问它。

http://arshaw.com/fullcalendar/docs/event_data/loading/

jsfiddle例子：

http://jsfiddle.net/waspinator/akbyW/110/

$(document).ready(function() {

    $('#calendar').fullCalendar({

        // Multiple Sources
        eventSources: [
        'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
        'http://www.google.com/calendar/feeds/en.german%23holiday%40group.v.calendar.google.com/public/basic'
        ],
        loading: function(bool) {
            if (bool) {
                $('#loading').show();
            } else {
                $('#loading').hide();
            }
        }
    });

    $( "#highlight" ).on( "click", function() {
        $('#calendar').fullCalendar('gotoDate', 2014, 4);
        $('.fc-event:nth-child(4)').addClass('highlight');
    });

});

Answer 1

http://jsfiddle.net/waspinator/akbyW/113/

将要突出显示的事件添加到全局数组，然后使用加载回调调用一个突出显示该数组中任何事件的函数。如果未触发加载回调，您还希望在按钮单击事件中调用该函数。（当你已经在需要的视图时发生）。我还添加了一个unhighlight按钮，以防你需要删除高光。

var highlight_these_events = [];

function highlightSelectedEvents() {

    for (var index = 0; index < highlight_these_events.length; index++) {
        $(highlight_these_events[index]).addClass('highlight');
    } 

}

$(document).ready(function() {

    $('#calendar').fullCalendar({

        // Multiple Sources
        eventSources: [
        'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
        'http://www.google.com/calendar/feeds/en.german%23holiday%40group.v.calendar.google.com/public/basic'
        ],
        loading: function(bool) {
            if (bool) {
                $('#loading').show();
            } else {
                $('#loading').hide();
                highlightSelectedEvents();
            }
        }
    });

    $( "#highlight" ).on( "click", function() {
        $('#calendar').fullCalendar('gotoDate', 2014, 4);        
        highlight_these_events.push('.fc-event:nth-child(4)');
        highlightSelectedEvents();
    });

    $( "#unhighlight" ).on( "click", function() {
        $('.fc-event').removeClass('highlight');
    });



});

Answer 2

我认为您正在寻找在渲染过程中触发的http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/。

编辑：您应该将eventRender添加到日历创建中。从示例：

    $('#calendar').fullCalendar({
    events: [
        {
            title: 'My Event',
            start: '2010-01-01',
            description: 'This is a cool event'
        }
        // more events here
    ],
    eventRender: function(event, element) {
        element.find('.classToAddTo').addClass('newClass'); // Here is where you will use jquery to add your new class/classes
    }
    });

在fullcalendar中调用gotoDate方法后完成加载事件回调？

2 个答案: