Fullcalendar eventClick does not work when change view

Question

I'm using fullcalendar in an app with phonegap. I have two external buttons which change the view (month or week), and the default view is Month.

nova.touch.bindClick("#btn_week", function() {
        $('#calendar').fullCalendar('changeView', 'basicWeek');
        $('#calendar').fullCalendar( 'render' );            
    });

nova.touch.bindClick("#btn_month", function() {
        //$('#calendar_week').hide();
        $('#calendar').fullCalendar('changeView', 'month');
        $('#calendar').fullCalendar('render');
    });

I have the events and event click:

$('#calendar').fullCalendar({
                theme: false,
                defaultView: 'month',
                columnFormat: 'ddd',
                firstDay: 1,
                editable: true,
                height: $('#calendar_content').height(),
                header: {
                        right: 'today',
                        left: 'title'
                        //center: 'month,basicWeek'
                    },
                events: [                       
                    {

                        title: 'N',
                        start: new Date(y, m, d-8)
                    },
                    {

                        title: 'L',
                        start: new Date(y, m, d+1)
                    },
                    {

                        title: 'L2',
                        start: new Date(y, m, d-15)
                    }

                ],

                eventClick: function(calEvent, jsEvent, view) {

                    alert('Event: ' + calEvent.title);
                    alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
                    alert('View: ' + view.name);

                   $('#calendar').fullCalendar('updateEvent', calEvent);

                }

For the first time the event click works well. I click in the event and I see the alert. But when I change the view with the external buttons, If I touch/click in the event, the alert doesn't show.

The fullcalendar version is: fullcalendar-2.3.2

Answer 1

Phonegap does not works well with events in fullcalendar. I found a solution.

I have created a function that creates the calendar with differents parameters (date, type of view) and put in this function the touch events (if put outside of this function, the events do not work), and when I change the date in the calendar or the view with an external button, I destroy the calendar and create again with the new date and view.

This is the code for the function to create calendar:

openCalendar: function(view, date_open, data){

    var me = this;          
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();     

    $('#calendar').fullCalendar({           
        theme: false,
        defaultView: view,
        columnFormat: 'ddd',
        defaultDate: date_open,
        firstDay: 1,
        editable: true,
        height: $('#calendar_content').height(),

        header: {
                right: 'today',
                left: 'title'
                //center: 'month,basicWeek'
            },
        events: [
            {
                title: 'E',
                start: new Date(y, m, 1)
            },
            {
                title: 'N',
                start: new Date(y, m, d-5)
            },
            {

                title: 'L',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                title: 'R',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {

                title: 'NS',
                start: new Date(y, m, d-7)
            },
            {

                title: 'N',
                start: new Date(y, m, d-8),
                imagen: 'yes'
            },
            {

                title: 'L',
                start: new Date(y, m, d+1)
            },
            {

                title: 'L2',
                start: new Date(y, m, d-15)
            }

        ]
    });

     nova.touch.bindClick(".fc-event-container",function(){
         me.firstDialog(); //open dialog
        });

     $('.fc-day').on( 'touchstart', function ( startEvent ) {           
         me.firstDialog();
    });

},

In the initial call I do it like this:

var date = new Date();
me.openCalendar('month', date);

If I change something:

 nova.touch.bindClick("#btn_week", function() {

        var current_date = $('#calendar').fullCalendar('getDate');            
        $('#calendar').fullCalendar('destroy');         
        me.openCalendar('basicWeek', current_date);

    });

    nova.touch.bindClick("#btn_month", function() {

        var current_date = $('#calendar').fullCalendar('getDate');
        $('#calendar').fullCalendar('destroy');
        me.openCalendar('month', current_date);            
    });

And when I touch in an event, the dialog or alert is opened correctly.

Answer 2

I'm not familiar with phonegap but I can guess what's going on here.

nova.touch.bindClick("#btn_week"... is binding to an element and becoming useless when the calendar is rerendered since the element no longer exists.

Solution 1

Use a delegated event listener. I do not know if this exists within phonegap.

Solution 2

Rebind it every render within eventAfterAllRender. Something along the lines of

eventAfterAllRender: function(){
    nova.touch.bindClick("#btn_week", function() {
        $('#calendar').fullCalendar('changeView', 'basicWeek');
        $('#calendar').fullCalendar( 'render' );            
    });

    nova.touch.bindClick("#btn_month", function() {
        //$('#calendar_week').hide();
        $('#calendar').fullCalendar('changeView', 'month');
        $('#calendar').fullCalendar('render');
    });
},