I am using JQuery Full Calendar in my application, but I need slightly different view, that is - in month view don't show tasks, just color days which have events associated to different color than days with no events. Then when user clicks this day in month view - a day view for this day is opened showing all the events.
Is it possible to make such adjustment? Thank you kindly.
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
http://webdesignandseo.net/jquery/datepicker/
You can actually do this in the normal jQuery DatePicker if you wanted that instead (go to March to see events and click for an alert). I don't know much about how the Full Calendar Plugin works but there might be something in the documentation that will help:
here is a solution which works with no duplicates generated when moving between views. it loads two different sets of data sources depending on which view you load. I used ppumkins help with his. note the order of the addEventSource and removeEventSource calls. For me i needed to load addEventSource before removeEventSource otherwise duplicates will appear on first view click
http://dev2.mycmo.com.au/fullcalendar/calendar_problem_demo.php
来源：https://stackoverflow.com/questions/5637248/jquery-full-calendar-how-to-change-view