How to load different Event source (json) for each View? - fullcalendar

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>

Answer 2

viewDisplay is trggered when view has changed
http://arshaw.com/fullcalendar/docs/display/viewDisplay/
then you can check view.name atribute

Answer 3

Thank you for this example :)
I was not able to make this ( in above code the events array ) work for me, but i figure out another way to add event sources using some of the code you provided.
This is my logic:
My primary source of events is this(this is the events source from the default examples of Fullcalendar):
events: function(start, end, callback) {
$.ajax({
type: 'POST',
url: 'myurl',
dataType:'xml',
crossDomain: true,
data: {
// our hypothetical feed requires UNIX timestamps
start: Math.round(start.getTime() / 1000),
end: Math.round(end.getTime() / 1000),
'acc':'2',
},
success: function(doc) {
var events = [];
var allday = null; //Workaround
var Editable = null; //Workaround
$(doc).find('event').each(function()
{
if($(this).attr('allDay') == "false") //Workaround
allday = false; //Workaround
if($(this).attr('allDay') == "true") //Workaround
allday = true; //Workaround
if($(this).attr('editable') == "false") //Workaround
Editable = false; //Workaround
if($(this).attr('editable') == "true") //Workaround
Editable = true; //Workaround
events.push({
id: $(this).attr('id'),
title: $(this).attr('title'),
start: $(this).attr('start'),
end: $(this).attr('end'),
allDay: allday,
editable: Editable
});
});
//calendar.fullCalendar( 'addEventSource', othersources.folgas );
//calendar.fullCalendar( 'addEventSource', othersources.ferias );
//calendar.fullCalendar('refetchEvents');
callback(events);
}
});
}
Now i needed it to add more sources and to do this ouside the calendar (next to the date variables from fullcalendar examples) i made a variable like the code above, but with ajax calls similar to my primary: )
var othersources = {
anothersource: {
events: function(start, end, callback) {
$.ajax({
type: 'POST',
url: 'myurl',
data: {
// our hypothetical feed requires UNIX timestamps
start: Math.round(start.getTime() / 1000),
end: Math.round(end.getTime() / 1000),
'acc':'7',
},
success: function(doc) {
var events = [];
var allday = null; //Workaround
var Editable = null; //Workaround
$(doc).find('event').each(function()
{
if($(this).attr('allDay') == "false") //Workaround
allday = false; //Workaround
if($(this).attr('allDay') == "true") //Workaround
allday = true; //Workaround
if($(this).attr('editable') == "false") //Workaround
Editable = false; //Workaround
if($(this).attr('editable') == "true") //Workaround
Editable = true; //Workaround
events.push({
id: $(this).attr('id'),
title: $(this).attr('title'),
start: $(this).attr('start'),
end: $(this).attr('end'),
allDay: allday,
editable: Editable
});
});
callback(events); //notice this
}
});
},
cache: true,
//error: function() { alert('something broke with courses...'); },
color: 'green', //events color and stuff
textColor: 'white',
//className: 'course'
}
}
The following code is similar to the above and is part of the calendar proprietys (inside calendar variable):
eventSources: [ othersources.anothersource ],
viewDisplay: function(view) {
if (view.name == 'month'){
// alert(view.name);
//calendar.fullCalendar( 'addEventSource', othersources.folgas );
calendar.fullCalendar( 'addEventSource', othersources.anothersource );
//calendar.fullCalendar('refetchEvents'); //Notice i'm not doing the refetch events. And its working for me. but i'm calling thi elsewhere, every time i make an action. So you must figure it out ;)
}