javascript - 回调月、周、日标题栏按钮点击？

Question

当用户单击日/周/月按钮时，我需要运行一些 Javascript 代码来重新加载日历。是否有类似 dayButtonClicked() 之类的回调？

发生BUG:

当我第一次加载日历时。最初的 View 看起来不错，我的最初加载日。一旦我加载另一个 View ，例如周。每个条目都是重复的并显示两个数据源。如果我再次在日和月之间单击后退和前进，数据就会恢复正常。发生的情况是，当每天点击后首次加载新 View 时，removeEventSource 并未被调用。你以前见过这种情况吗？

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

我什至按照您的操作方式复制了您的代码，因为我认为我的代码有问题；即使我改成这样:

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

当我从默认加载的 View 移动到另一个 View 时，它仍然会双重加载数据。我开始认为这肯定是 FullCalendar 中的一个错误。这让我发疯

编辑2: 我的上帝。我不敢相信它终于起作用了!

我不知道为什么，但我需要交换 addEventSource 和 removeEventSource 它现在看起来像这样:

        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

是的 - 不幸的是，这取决于你如何看待它 - 它可能是一个功能，也可能是一个错误!？!重要的一行是

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

摘 self 的另一篇文章!

为什么lastView == undefined？这是因为当日历首次加载时，甚至在屏幕上出现任何内容之前，都会触发此事件!

所以我做了一个 var = lastview 并将其保留为未定义，当事件第一次触发时它分配 firstRun 它可以是任何东西 - 但不是实际名称任何monthView 此步骤会跳过第一个事件，并且不会两次添加您的提要!我已将这两件事添加为开发人员的错误..但他们正在考虑它 - 因为它们是有争议的功能..

所以剩下的唯一一件事就是硬编码一个skip方法——这就是整个lastview存在的原因。我花了两三天的时间尝试调试这个问题；您需要逐行跟踪您的代码，查看何时添加提要，并尝试以某种方式避免它。

不要忘记在事件结束时设置最后一个viewname。

    ...
       lastView = view.name;
    }