I have done this by using two feeds
My server returns feedBasic and feedComplex
feedBasic will only show one event on the month no matter how many other of the same event are in there- Click on it and it will change to the month view and load the full feed.
Maybe this code can help you. It is allot of code but it handles 4 feeds + google calendars. Has a few bugs but its the core functionality that works.
$(document).ready(function () {
var lastView;
$('#calendar').fullCalendar({
header: {
left: 'today',
center: 'prev,title,next',
right: 'month,basicDay'
},
slotMinutes: 30,
firstHour: 5,
editable: false,
timeFormat: 'H:mm',
firstday: 0, //Sunday0 Monday1..etc
allDayDefault : true,
//loading: function(bool) { if (bool) $('#loadingImg').show(); else $('#loadingImg').hide(); alert( $('#calendar').fullCalendar('clientEvents') ) },
loading: function(bool) { if (bool) $('#loadingImg').show(); else $('#loadingImg').hide(); },
//VIEW CHANGE - ALSO ADDS INITIAL SOURCES PER DAY VIEW
viewDisplay: function(view) {
if (lastView == undefined) { lastView = 'firstRun'; }
if (view.name != lastView )
{
if (view.name == 'month')
{
if ( '<%=brsEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=brsComplex' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=brsBasic' ); }
if ( '<%=activeEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=fixturesComplex' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=fixturesBasic' ); }
if ( '<%=previousEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=previousComplex' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=previousBasic' ); }
if ( '<%=newsEventEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=newsEvents' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=newsEvents' ); }
}
if (view.name == 'basicDay')
{
if ( '<%=brsEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=brsBasic' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=brsComplex' ); }
if ( '<%=activeEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=fixturesBasic' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=fixturesComplex' ); }
if ( '<%=previousEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=previousBasic' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=previousComplex' ); }
if ( '<%=newsEventEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=newsEvents' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=newsEvents' ); }
}
lastView = view.name;
}
},
//EVENT CLICK
eventClick: function( event, jsEvent, view )
{
//STOP GOOGLE LINK FROM FOLLOWING THROUGH ON ALL OCCASIONS
if (event.url != undefined) { if (event.url.indexOf("google") > 0) { return false; } }
if (event.newsEvent == "True")
{
//SOME OTHER SPECIFIC FUNCTION
}
else
{
var view = $('#calendar').fullCalendar('getView');
if (view.name == 'month')
{
$('#calendar').fullCalendar('changeView', 'basicDay');
$('#calendar').fullCalendar( 'gotoDate', event.start );
}
if (view.name == 'basicDay')
{
//HANDLES CLICK OF EVENT IN DAY VIEW TO EXPAND DIV WITH EXTRA INFORMATION
}
}
},
//HOVER
//eventMouseover: function( event, jsEvent, view ) { if (event.PopUp == 'yes') { $(this).CreateBubblePopup({ innerHtml: + '<br/>Click for more infromation.' , themePath: 'images/bubblepopup-theme', themeName: 'black' }); } } ,
//DAY CLICK
//dayClick: function( event, jsEvent, view ) { alert("Day Clicked.. Booking?") } ,
//ALL COMBINED INITIAL FEEDS
eventSources: [ <%=myGoogleCalendars %> ]
});
//ATTACHING A LOADING IMAGE
$('.fc-header-title').append('<img id="loadingImg" style="width:16px; height:11px; float:none; margin-top: -25px;" src="images/loadingSmall.gif" />');
//HDID FILTER
if ('<%=activeEnabled %>' == 'True') {
$('.fc-header-left').append('<span class="fc-button fc-button-today fc-state-default fc-corner-left fc-corner-right fc-state-active"><span class="fc-button-inner"><span id="filterHDID" class="fc-button-content">hdid</span><span class="fc-button-effect"><span></span></span></span></span>');
$("#filterHDID").click(function() { if ($(this).parents('span').hasClass('fc-state-active'))
{
$('.data-fixtures').css('display', 'none')
$(this).parents('span').removeClass('fc-state-active');
if ('<%=previousEnabled %>' == 'True') { $('.data-previous').css('display', 'none');
}
}
else
{
$('.data-fixtures').css('display', 'inline')
$(this).parents('span').addClass('fc-state-active');
if ( '<%=previousEnabled %>' == 'True') { $('.data-previous').css('display', 'inline')
}
} });
}
//BRS FILTER
if ( '<%=brsEnabled %>' == 'True' ) {
$('.fc-header-left').append('<span class="fc-button fc-button-today fc-state-default fc-corner-left fc-corner-right fc-state-active"><span class="fc-button-inner"><span id="filterBRS" class="fc-button-content">brs</span><span class="fc-button-effect"><span></span></span></span></span>');
$("#filterBRS").click(function() { if ($(this).parents('span').hasClass('fc-state-active'))
{
$('.data-brs').css('display', 'none')
//$('#calendar').fullCalendar('removeEventSource', '/diaryFeed.aspx?style=brs');
$(this).parents('span').removeClass('fc-state-active');
}
else
{
$('.data-brs').css('display', 'inline')
//$('#calendar').fullCalendar('addEventSource', '/diaryFeed.aspx?style=brs');
$(this).parents('span').addClass('fc-state-active');
} });
}
//GOOGLE FEED FILTER
if ( '<%=googleEnabled %>' == 'True') {
$('.fc-header-left').append('<span class="fc-button fc-button-today fc-state-default fc-corner-left fc-corner-right fc-state-active"><span class="fc-button-inner"><span id="filterGCAL" class="fc-button-content">google</span><span class="fc-button-effect"><span></span></span></span></span>');
$("#filterGCAL").click(function() { if ($(this).parents('span').hasClass('fc-state-active'))
{
$('#calendar').fullCalendar('removeEventSource', <%=myGoogleCalendars%>); $(this).parents('span').removeClass('fc-state-active');
}
else
{
$('#calendar').fullCalendar('addEventSource', <%= myGoogleCalendars%>); $(this).parents('span').addClass('fc-state-active');
} });
}
//MORE
});
</script>
A video of what is supposed to happen.
Plug it in the way you need
http://www.youtube.com/watch?v=UKUu9KJxunI
