FullCalendar中如何监听“日期变更”事件？

Question

是否可以在 FullCalendar 中附加一个监听器以在当前视图日期更改时触发事件？例如，如果您在月视图中，则转到下个月将触发事件并传递该月第一天的日期，而在周视图中更改周，日视图中更改日等都是如此。

唯一接近这种功能的公开侦听器是 dayClick 回调，但这不好，因为它仅在用户单击实际日期单元格时触发，而不是例如在标题栏中按下 Next/prev/today 控件。

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

- Bill Dami

Answer 1

Bill,

我知道这个问题已经非常古老了，但我需要一个解决方案，所以决定在这里发布它供其他人参考。我通过将viewDisplay事件附加到我的日历上解决了这个问题（这个事件在FullCalendar的v2中被删除，可以使用viewRender代替）。

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

    }
});

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

- Anthony Shaw

Answer 2

这是我做的方法：

$("#calendar").fullCalendar({

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

    });

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

- user3241874

---

我使用了eventAfterAllRender回调函数，在日历渲染完毕后会调用它。然后通过传递的view对象进行操作...eventAfterAllRender: function(view){ doMyStuff(view.intervalStart.format('YYYY-MM-DD')); } - Yorick

Answer 3

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

viewSkeletonRender (文档)

function (info)

此回调在初始视图呈现或用户更改视图时触发，但在 datesRender 回调触发之前触发，datesRender 是所有日期/时间单元格均被呈现时的回调。

datesRender (文档)

function (info)

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

- sr9yar

---

当用户在不同月份之间导航时，datesRender 对我很有用。我想加载那个月的事件。 - CodeMonkey

在Full Calendar 4中的datesRender函数中，如何获取日历的当前视图？请提供建议。谢谢。 - Kamlesh

Answer 4

在V5中，您需要使用datesSet而不是datesRender。

- Karlth

Answer 5

真正古老的问题，但在FullCalendar 4中，您可能需要使用datesRender回调函数。根据文档，这个回调函数会在“渲染新日期集合时”触发，实际上，无论是导航到前一天/下一天/上一周/下一周/上个月/下个月，还是使用日期选择器或“今天”按钮进行导航，都会触发该回调函数。

示例用法：

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

- Philip Stratford

---

哈，是的，我已经很久没有使用任何与jQuery相关的东西了，但很高兴看到这个问题仍然在帮助人们！ :-) - Bill Dami

Answer 6

eventDrop函数用于获取日期更改的数据。以下示例对我很有效。我正在使用fullcalendar版本（3.8.0）

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today, prevYear,nextYear',
        center: 'title',
        right: 'month'
    },
    buttonText: {
        month: 'month',
        week: 'week',
        day: 'day'
    },
    navLinks: true,
    editable: true,
    droppable: true,
    events: [
        {
            title: 'All Day Event',
            start: '2022-06-01',
            color: '#257e4a'
        },
        {
            title: 'Long Event',
            start: '2022-06-07',
            end: '2022-06-10'
        }
    ],
    eventDrop: function (event, delta, revertFunc) {
        alert(event.title + " was dropped on " + event.start.format());

        if (!confirm("Are you sure about this change?")) {
            revertFunc();
        }
    }            
});

       

- AngularJMK

---

谢谢！这是唯一对我起作用的答案。 - Hassan Serhan

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

- Milos

Answer 8

针对Fullcalendar V4，

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

- ramamoorthy_villi

---

将单个按钮附加点击事件处理程序远远不能回答这个问题。您需要将侦听器连接到“上一个”、“下一个”和“今天”按钮以及日期选择器，但仍无法处理通过调用其方法之一（如calendar.prev()）更改日历日期的情况。此外，在确保已加载新日期之前，我会非常谨慎地获取新显示的日期，就像您的示例尝试做的那样。恕我直言，我的答案更好。 - Philip Stratford