Geek Answers Handbook

Complete jQuery calendar how to change view

I use JQuery Full Calendar in my application, but I need a slightly different view, that is, tasks in the month view are not displayed, but only colored days that have events associated with a different color than days without events. Then, when the user clicks this day in month mode, a daily view for that day opens showing all the events.

Is it possible to make such a setting? Thank you.

+7
source share
3 answers

I did it using two channels

My server returns feedBasic and feedComplex

feedBasic will show only one event of the month, no matter how many others from the same event are. Click on it and it will change to the month view and load the full channel.

Perhaps this code may help you. It contains code, but it processes 4 channels + Google calendars. It has a few errors, but its main functionality 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>

Video of what is about to happen. Connect it the way you need http://www.youtube.com/watch?v=UKUu9KJxunI

+7
source

http://webdesignandseo.net/jquery/datepicker/

In fact, you can do this in a regular jQuery DatePicker, if you prefer, instead (go to March to see the events and click for a warning). I don't know much about how the Full Calendar plugin works, but the documentation might be something like:

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

+1
source

Here is a solution that works without duplicates generated when moving between views. it loads two different sets of data sources depending on what kind you are loading. I used spamkins with it. note the order of the addEventSource and removeEventSource . For me, I needed to load addEventSource to removeEventSource , otherwise duplicates will appear in the first view, click

http://dev2.mycmo.com.au/fullcalendar/calendar_problem_demo.php

0
source

More articles:


All Articles