JQuery full calendar, how to change view

Question

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 associate

Answer 1

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: + '
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('');

         //HDID FILTER
         if ('<%=activeEnabled %>' == 'True') {

         $('.fc-header-left').append('hdid');
         $("#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('brs');
         $("#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('google');
            $("#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



     });
 

A video of what is supposed to happen. Plug it in the way you need http://www.youtube.com/watch?v=UKUu9KJxunI