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

                }

首次点击活动效果很好。我点击了活动，我看到了警报。但是当我使用外部按钮更改视图时，如果我在事件中触摸/单击，则警报不会显示。

fullcalendar版本是：fullcalendar-2.3.2

Answer 1

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

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

这是创建日历的功能代码：

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

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

Answer 2

我不熟悉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');
    });
},

更改视图时，Fullcalendar eventClick不起作用

2 个答案: