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 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.

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: + '<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

Answer 2

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:

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