Question

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

与此接近的唯一暴露的监听器是dayClick回调，但这没有用，因为它只在用户点击实际日期的单元格时触发，而不是例如当按下Next / prev / today控件时标题栏。

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

Answer 1

比尔，

我知道这个问题非常古老，但我需要一个解决方案，并认为我会在这里为其他人发布。我通过将viewDisplay事件附加到我的日历来解决了问题（此事件为removed in v2 of FullCalendar，而viewRender可能会被使用）。

$("#calendar").fullCalendar({
    viewDisplay: function (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 4中，datesRender回调可能就是您想要的。对于docs，这是在“呈现一组新日期时”触发的，实际上，这将是您导航到前一天/第二天/周/月或使用日期选择器或“今天” ”按钮。

用法示例：

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

Answer 4

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

viewSkeletonRender （docs）

function( info )

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

datesRender （docs）

function( info )

这会在viewSkeletonRender回调之后但在 eventRender回调。

Answer 5

在V5中，您必须使用dateSet而不是dateRender。

Answer 6

对于Fullcalendar V4，

document.getElementById('my-button').addEventListener('click', function() {
  var date = calendar.getDate();
  alert("The current date of the calendar is " + date.toISOString());
});

Answer 7

我正在使用带有适当角度包装器的 angular 库：@fullcalendar/angular": "^5.8.0"。

在此版本中，CalendarOptions 对象包含回调方法“datesSet”，每次更改当前月视图时都会调用该方法并发送有关当前月视图的所有正确信息。初始月视图渲染也会调用该方法。

视图组件示例：

<full-calendar #calendar [options]="calendarOptions"></full-calendar>

合适的 ts 对象：

calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    datesSet: (data => {
      console.log('datesSet: ' , data);
    })
  };

Answer 8

对于FullCalendar V5，他们引入了视图渲染挂钩。

查看渲染挂钩钩子 viewClassNames-一个ClassName输入，用于将className添加到根视图元素。视图更改时都会调用。

viewDidMount-将视图添加到DOM后立即调用

viewWillUnmount-在将视图从DOM中删除之前立即调用。

链接：https://fullcalendar.io/docs/view-render-hooks

在FullCalendar中监听“日期更改”？

8 个答案: