更改视图时 Fullcalendar eventClick 不起作用

Question

我在带有 phonegap 的应用程序中使用 fullcalendar。我有两个更改视图（月或周）的外部按钮，默认视图是月。

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');
    });

我有事件和事件点击：

$('#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);

                }

事件点击第一次运行良好。我单击事件并看到警报。但是当我使用外部按钮更改视图时，如果我在事件中 touch/click，则不会显示警报。

fullcalendar版本为：fullcalendar-2.3.2

Answer 1

我对 phonegap 不熟悉，但我能猜到这是怎么回事。

nova.touch.bindClick("#btn_week"... 正在绑定到一个元素，并且在重新呈现日历时变得无用，因为该元素不再存在。

解决方案 1

使用委托事件侦听器。我不知道这是否存在于 phonegap 中。

解决方案 2

在 eventAfterAllRender 内每次渲染时重新绑定它。类似于

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

Answer 2

Phonegap 不适用于全日历中的事件。我找到了解决方案。

我创建了一个函数，它使用不同的参数（日期、视图类型）创建日历，并将触摸事件放入此函数（如果放在此函数之外，事件将不起作用），当我使用外部按钮更改日历或视图中的日期，我销毁日历并使用新日期和视图重新创建。

这是创建日历的函数代码：

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();
    });

},

在最初的通话中，我是这样做的：

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

如果我改变了什么：

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

当我触摸某个事件时，对话框或警报会正确打开。

更改视图时 Fullcalendar eventClick 不起作用

Fullcalendar eventClick does not work when change view

javascript

fullcalendar

phonegap-plugins