Question

Hi i have a calendar which must load a different JSON source of events for each view. ie, A brief source for “Month” (only a max of 3 items per day cell), then more detailed sources of data for both “Day” and “Week”.

I was thinking i could capture when a view has loaded and based on which view, call removeEventSource() to remove the previous event source then addEventSource() to add the current view’s related data and refresh.
Is this the only way to do something like this? If so… how do i detect that the view has finished loading so i can call getView() to inturn load the appropriate event source?

I’ve seen there is loading() callback but i don’t think this is what i need, i want to know when the whole calendar is complete loading not just the current data.

Thanks for any help

EDIT: The only other way I can think to do this is remove the DAY/WEEK/MONTH fullcalendar buttons and replace with my own which reloads the php screen with a variable appended say &calLoad=month or &calLoad=day i can then load with a different json feed but this is obviously a less optimal way of doing things.

Answer 1

Funnily enough I just posted an answer to an entirely different question that happens to be the solution to this. I used the addEventSource() and removeEventSource() methods, as the OP considered.

<script>
var fcSources = {
    courses: {
                url: base+'accessfm/calendar/courses',
                type: 'GET',
                cache: true,
                error: function() { alert('something broke with courses...'); },
                color: 'purple',
                textColor: 'white',
                className: 'course'
            },
    requests: {
                url: base+'accessfm/calendar/requests',
                type: 'GET',
                cache: true,
                error: function() { alert('something broke with requests...'); },
                textColor: 'white',
                className: 'requests'
            },
    loads:  {
                url: base+'accessfm/calendar/loads',
                type: 'GET',
                cache: true,
                error: function() { alert('something broke with loads...'); },
                color: 'blue',
                textColor: 'white',
                className: 'loads'
            }
};
$('#fullcalendar').fullCalendar({
    header: {
                left: 'title',
                center: 'agendaDay,agendaWeek,month',
                right: 'today prev,next'
            },
    defaultView: 'agendaWeek',
    firstDay: 1,
    theme: true,
    eventSources: [ fcSources.courses, fcSources.requests, fcSources.loads ],
    viewDisplay: function(view) {
        if (lastView != view.name){ // view has been changed, tweak settings
            if (view.name == 'month'){
                $('#fullcalendar').fullCalendar( 'removeEventSource', fcSources.loads )
                                  .fullCalendar( 'refetchEvents' );;
            }
            if (view.name != 'month' && lastView == 'month'){
                $('#fullcalendar').fullCalendar( 'addEventSource', fcSources.loads );
            }
        }
        lastView = view.name;
    }
});
</script>