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;
            }
        },

Answer 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;
    }