在FullCalendar中监听"日期更改"？

Question

有没有办法将一个监听器附加到FullCalendar,只要当前查看的日期发生变化就会被触发,即如果您在月视图中,那么下个月将触发通过该日期的第一天的事件,并且在周视图中更改周数,日视图等.

唯一暴露的侦听器就是dayClick回调,但这没什么用,因为它只会在用户点击实际日期的单元格时触发,而不是例如在标题栏中按下Next/prev/today控件时.

我希望此功能能够将FullCalendar中当前查看的月份与ExtJS datepicker组件同步,因此如果在FullCalendar中更改了查看的月份,则会更新Datepicker以显示同一个月.(想想Google Calendar的UI左上角是"迷你日历",是日期选择器)

Answer 1

法案,

我知道这个问题非常古老,但我需要一个解决方案,并想到我会在这里为其他人发布.我通过将viewDisplay事件附加到我的日历来解决问题(此事件已在FullCalendar的v2中删除,viewRender可以替代使用).

$("#calendar").fullCalendar({
    viewDisplay: function (element) {

    }
});

一旦有权访问element参数,就可以使用element.start或获取日期element.visStart.如果您在月视图中,start将为您提供您正在查看的月份的第一天,visStart将为您提供该月的第一个可见日期

Answer 2

我就这样做了:

$("#calendar").fullCalendar({

viewRender: function(view, element){
        var currentdate = view.intervalStart;
        $('#datepicker').datepicker().datepicker('setDate', new Date(currentdate));
    }

    });

在月视图中,intervalStart将返回FullCalendar上显示的月份的第一天,而不是第一个可见日,通常是接近上个月末的一天.

Answer 3

对于FullCalendar v4（撰写本文时的最新版本），正确的回调是：

viewSkeletonRender (文档)

function( info )

当初始视图呈现或用户更改视图时，将触发此回调，但在 dateRender 回调触发之前，这是所有日期/时间单元格都已呈现的回调。

日期渲染（文档）

function( info )

这在 viewSkeletonRender 回调之后但在 eventRender 回调之前触发。

Answer 4

现在确实是一个古老的问题，但在 FullCalendar 4 中，datesRender回调可能就是您想要的。根据文档，这是“当呈现一组新的日期时”触发的，实际上，每当您导航到前一天/下一天/周/月或使用日期选择器或“今天”按钮执行操作时，都会触发此操作所以。

用法示例：

$("#calendar").fullCalendar({
    datesRender: function (info) {
        alert("The first date on display is: " + info.view.activeStart);
    }
});

Answer 5

在 V5 中，您必须使用datesSet 而不是datesRender。