月,星期,星期标题栏按钮点击回调?

时间:2011-04-11 05:41:59

标签: javascript html javascript-events fullcalendar

当用户点击,按日/周/月按钮时,我需要运行一些javascript代码来重新加载日历。是否有像dayButtonClicked()之类的回调?

发生BUG:

首次加载日历时。初始视图看起来很好,我最初加载一天。只要我加载另一个视图,如周。每个条目都是重复的,并显示两个数据源。如果我再次点击日和月之间的数据,则数据恢复正常。发生的事情是,在每天点击一次后首次加载新视图时,不会调用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 );                }
        },

当我从默认加载的视图移动到另一个视图时,它仍然会加载数据。我开始认为它肯定是FullCalendar中的一个错误。它让我疯狂

编辑2: 天哪。我无法相信它终于有效了!

我不知道为什么但是我需要交换addEventSourceremoveEventSource它现在看起来像这样:

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

2 个答案:

答案 0 :(得分:2)

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

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

来自我的其他帖子!

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

所以我将var = lastview保留为未定义,当事件第一次触发时它会分配firstRun它可以是任何真实的 - 但不是任何monthView的实际名称 这一步SKIPS第一个事件 - 并且不会添加您的Feed两次!我已将这两件事添加为开发人员的错误......但他们正在思考它 - 因为它们是可论证的特征..

所以唯一剩下的就是硬编码跳过方法 - 这就是为什么整个lastview都存在的原因。我花了2或3天试图调试这个问题;您需要逐行跟踪您的代码并查看添加Feed的时间并尝试以某种方式避免它。

不要忘记在活动结束时设置最后viewname

    ...
       lastView = view.name;
    }

答案 1 :(得分:1)

通常点击查看按钮会触发此事件

要小心,因为如果您在dayViews或Months in month视图中更改日期,此事件也将触发,但您通过存储最后一个变量来传递该日期

的jQuery ..

.
viewDisplay: function(view) { ** }
.

将**替换为

.fullCalendar( 'refetchEvents' )

它会再次获取您的Feed。比如刷新并更新可能发生的任何更改 http://arshaw.com/fullcalendar/docs/event_data/refetchEvents/

或者您可以切换来源

$('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=Complex' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=Basic' );   

但是要找出点击了哪些按钮,你需要这样做

 eventClick: function( event, jsEvent, view ) 
             { }