Callback for month, week, day title bar button clicks?

Question

I need to run some Javascript code to reload the calendar when the user either clicks, day/week/month buttons. Is there any callback like dayButtonClicked() or something?

BUG happening:

When I first load the calendar. The initial view looks fine mine initially loads day. As soon as I load another view such as week. Every single entry is duplicated and showing both sources of data. If I then click back and forward between day and month again the data is back to normal. What is happening is the removeEventSource is not being called when it first loads the new view after clicking from day to week. have you seen this happen before?

<script type='text/javascript'>

    $(document).ready(function() {
    
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var loadUrl = "menu_booking.php?ne=1&calsub=1";
        var lastView;
        var fullSource = "../fullcalendar/json-events.php?idc=<?= $sClient ?>&v=long";
        var liteSource = "../fullcalendar/json-events.php?idc=<?= $sClient ?>";
        
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            columnFormat: {
                month: 'ddd',
                week: 'ddd d/M',
                day: 'dddd d/M'
            },          
            defaultView: 'agendaDay',           
            firstDay: 1,            
            //editable: true,
            selectable: true,
            allDaySlot: false,
            firstHour: 7,

                
                        

            viewDisplay: function(view) {
                if (lastView == undefined) { lastView = 'firstRun';  }
                
                if (view.name != lastView ) {
                
                if (view.name == 'agendaWeek') { 
                    $('#calendar').fullCalendar( 'removeEventSource', fullSource ); 
                    $('#calendar').fullCalendar( 'removeEventSource', liteSource ); 
                    $('#calendar').fullCalendar( 'addEventSource', fullSource ); 
                }
                if (view.name == 'agendaDay') { 
                    $('#calendar').fullCalendar( 'removeEventSource', fullSource ); 
                    $('#calendar').fullCalendar( 'removeEventSource', liteSource ); 
                    $('#calendar').fullCalendar( 'addEventSource', liteSource ); 
                }
                
                if (view.name == 'month') { 
                    $('#calendar').fullCalendar( 'removeEventSource', fullSource ); 
                    $('#calendar').fullCalendar( 'removeEventSource', liteSource ); 
                    $('#calendar').fullCalendar( 'addEventSource', fullSource ); 
                }
                lastView = view.name;
                }
            },
            
            timeFormat: { // for event elements
                agendaDay: '',
                agendaWeek: '',
                month: '',
                '': 'h(:mm)t' // default
            },          
                            
        });
        //$('#calendar').limitEvents(2);
    });

</script>

I've even copied your code in exactly how you do it because I thought there was an issue with my code; even if I change to this:

        //VIEW CHANGE - ALSO ADDS INITIAL SOURCES PER DAY VIEW
        viewDisplay: function(view) {
                $('#calendar').fullCalendar( 'removeEventSource', fullSource ); 
                $('#calendar').fullCalendar( 'removeEventSource', liteSource ); 
                $('#calendar').fullCalendar( 'addEventSource', fullSource );                }
        },

It still double loads data when I move from the default loaded view to another. I'm starting to think it is surely a bug in FullCalendar. Its driving me nuts

EDIT 2: MY GOD. I can't believe it finally works!

I have no idea why but I needed to swap around addEventSource and removeEventSource it now looks something like this:

        viewDisplay: function(view) {
            if (lastView == undefined) { lastView = 'firstRun';  }
            
            //alert("viewname: "+ view.name + "lastView: " + lastView);
            if (view.name != lastView ) {
                if (view.name == 'agendaWeek') { 
                    $('#calendar').fullCalendar( 'addEventSource', shortSource ); 
                    $('#calendar').fullCalendar( 'removeEventSource', longSource ); 
                    $('#calendar').fullCalendar( 'removeEventSource', shortSource ); 
                }
                if (view.name == 'agendaDay') { 
                    //alert("in day: add litesource");
                    $('#calendar').fullCalendar( 'addEventSource', longSource ); 
                    $('#calendar').fullCalendar( 'removeEventSource', longSource ); 
                    $('#calendar').fullCalendar( 'removeEventSource', shortSource ); 
                }
                
                if (view.name == 'month') { 
                    //alert("in month: Delete litesource");
                    $('#calendar').fullCalendar( 'addEventSource', shortSource ); 
                    $('#calendar').fullCalendar( 'removeEventSource', longSource ); 
                    $('#calendar').fullCalendar( 'removeEventSource', shortSource ); 
                }
                lastView = view.name;
            }
        },

Solution 1

Yes - unfortunately depending on how you look at it - it could either be a feature or a bug!?! The line that is important is

ewDisplay: function(view) {
             if (lastView == undefined) { lastView = 'firstRun';  }
             if (view.name != lastView ){ ...

From my other post!

Why does lastView == undefined ? That is because when the calendar first loads even before there is anything on screen this event fires!

So I make a var = lastview an leave it undefined, when the event fires first time it assigns firstRun it can be anything really- but not the actual name of any monthView This step SKIPS the first event- and wont add your feed twice! I have added both these things as a bug with the developers.. but they are thinking about it- because they are arguable features..

So the only thing left is to hard code a skip method- and that is why this whole lastview is there for. I have spend 2 or 3 days trying to debug that problem; you will need to follow your code line by line and see when the feeds are being added and try to avoid it somehow.

Don't forget to set the last viewname on the end of the event.

    ...
       lastView = view.name;
    }

Solution 2

Usually clicking on the view button will fire this event

Be careful because this event will also fire if you change days on dayViews or Months in month view but you by pass that by storing a last variable

jQuery..

.
viewDisplay: function(view) { ** }
.

Replace the ** with either

.fullCalendar( 'refetchEvents' )

It will just get your feed again. like a refresh and update any changes that might have occurred http://arshaw.com/fullcalendar/docs/event_data/refetchEvents/

or you could switch sources

$('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=Complex' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=Basic' );   

But to find out which buttons was clicked you would need to do this

 eventClick: function( event, jsEvent, view ) 
             { }

Comments

[Justin Schwartzenberger]

Holy crap, I have been feeling your pain for the past few months. Just came across this question after countless searches. Rest assured, your post has helped someone else! Thanks.

[wired00]

@pumpkin that was a very big help. I've also been reading your other fullcalendar posts and they are all very helpful so have added as favourites. basically i'm sure i already had tried viewDisplay:function(view) but i was sure it only called that callback when the page is initially loaded NOT when i click the view button ie, week/month/day. BUT... after reading your more detail code on another SO post i retried viewDisplay etc and it works perfectly. Now via that call back i will simply check the view name. ie if month, load the simple datasource if day, then load a more detailed souce. TY

[wired00]

I'm getting a real problem where no matter what i do whenever i first click either , month/day/week the data will be appearing twice. it basically is not clearing all items with 'removeEventSource' i will show my code in edit above

[Piotr Kula]

Also you can try and remove all events when changing views- i also had that version before Call ".fullCalendar( 'removeEvents')" this eill remove all events- but not the sources. THis double source is a bit annoying problem- hopefully it will be fixed in next release. arshaw.com/fullcalendar/docs/event_data/removeEvents

[wired00]

Mate, you have been so much help and i'm surprised you understood my problem :) Well I'm doing everything you say and still having that issue. Yep i actually also tried the 'removeEvents' but there is a bigger issue with this, whenever i navigate with the arrows to go forward/back it adds more and more duplicate rows so i went back to just removeEventSource()` and it atleast just has only 1 duplicate. I will have to build a more cut down version. One with a static json source and a basic calendar screen whcih i can put the whole solution public and allow yourself and the fullCalendr devs acces

[wired00]

btw haha its funy you say you've spent 2-3 days working on it. Last night when i got your answer, i jumped on my laptop and to my wifes dismay sat in bed from ~1am till 4am working on it! Even though its not yet been resolved i'm happy your also seeing the same problem and its not just me! Just to clarify are you saying you have indeed gotten around that duplicate bug happening with your lastview== undefined etc code?

[wired00]

ppumpkin Here is a demo of the problem i'm experiencing dev2.mycmo.com.au/fullcalendar/calendar_problem_demo.php after initial load if you click events, ie click month you can see it duplicates all events. If you click back to day and then back again to month you can see the duplicates are fixed. Have a look at this source it seems identical to your code but is still not working

[wired00]

!!! it works. I switch the addEventSource and removeEventSource around. removeEventSource should be after addEventSource!? Please see my edit above

[Piotr Kula]

Yea I was wondering if the order in which it removes and add events was important- before i had it the other way around, then switched it and left it like that because it works for me. I think there are allot of undocumented side effects in fullCalendar- but its a great calendar. :D

[wired00]

yep its a great calendar :) very happy now thanks for your help