FullCalendar中的“日期更改”侦听器?

lsmepo6l  于 2022-09-26  发布在  其他
关注(0)|答案(8)|浏览(239)

是否有任何方法可以将侦听器附加到FullCalendar,当当前查看的日期更改时,该侦听器将被触发,即如果您在“月”视图中,则转到下一个月将触发事件,该事件将在该月的第一天传递date,而在“周”视图、“日”视图中更改周数时,该事件也将被触发。
唯一与此接近的公开侦听器是dayClick回调,但这并不好,因为它只在用户单击实际的一天单元格时触发,而不是在标题栏中按下Next/prev/today控件时触发。
我希望此功能能够将FullCalendar中当前查看的月份与ExtJS日期选择器组件同步,因此如果在FullCaledar中更改了查看的月份,则日期选择器将更新为显示同一月份。(想想谷歌日历的用户界面,左上角的“迷你日历”是日期选择器)。

bxfogqkk

bxfogqkk1#

账单
我知道这个问题很古老,但我需要一个解决方案,我想我会在这里为其他人发布它。我通过将viewDisplay事件附加到我的日历上自己解决了这个问题(该事件是removed in v2 of FullCalendar,可以改用viewRender)。

  1. $("#calendar").fullCalendar({
  2. viewDisplay: function (element) {
  3. }
  4. });

访问元素参数后,可以使用element.startelement.visStart获取日期。如果您在月份视图中,start将为您提供您正在查看的月份的第一天,visStart将为您显示该月份的第一个可见日期

2g32fytz

2g32fytz2#

我就是这样做的:

  1. $("#calendar").fullCalendar({
  2. viewRender: function(view, element){
  3. var currentdate = view.intervalStart;
  4. $('#datepicker').datepicker().datepicker('setDate', new Date(currentdate));
  5. }
  6. });

在月份视图中,intervalStart将返回FullCalendar上显示的月份的第一天,而不是第一个可见的日期,通常是前一个月的最后一天。

6tr1vspr

6tr1vspr3#

对于FullCalendar v4(撰写本文时的最新版本),正确的回调是:

视图 backbone 渲染docs

function( info )
当初始视图呈现或用户更改视图时,但在datesRender回调触发之前,将触发此回调,该回调用于所有日期/时间单元格已呈现时的回调。

日期呈现docs

function( info )
这将在viewSkeletonRender回调之后、eventRender调用之前触发。

aij0ehis

aij0ehis4#

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

bkkx9g8r

bkkx9g8r5#

现在的问题确实很古老,但在FullCalendar 4中,datesRender回调可能就是您想要的。根据docs,“当呈现一组新的日期时”会触发此事件,实际上,只要您导航到上一天/下一天/周/月,或者使用日期选择器或“今天”按钮来执行此操作,就会触发此事件。
示例用法:

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

aamkag616#

eventDrop函数用于获取日期更改的数据。下面的例子很适合我。我使用的是完整日历版本(3.8.0)

  1. $('#calendar').fullCalendar({
  2. header: {
  3. left: 'prev,next today, prevYear,nextYear',
  4. center: 'title',
  5. right: 'month'
  6. },
  7. buttonText: {
  8. month: 'month',
  9. week: 'week',
  10. day: 'day'
  11. },
  12. navLinks: true,
  13. editable: true,
  14. droppable: true,
  15. events: [
  16. {
  17. title: 'All Day Event',
  18. start: '2022-06-01',
  19. color: '#257e4a'
  20. },
  21. {
  22. title: 'Long Event',
  23. start: '2022-06-07',
  24. end: '2022-06-10'
  25. }
  26. ],
  27. eventDrop: function (event, delta, revertFunc) {
  28. alert(event.title + " was dropped on " + event.start.format());
  29. if (!confirm("Are you sure about this change?")) {
  30. revertFunc();
  31. }
  32. }
  33. });
展开查看全部
4jb9z9bj

4jb9z9bj7#

我正在使用带适当Angular Package 的Angular 库:@fullcalendar/angles“:”^5.8.0“。
在此版本中,CalendarOptions对象包含回调方法“datesSet”,每次更改当前月份视图时都会调用该方法,并发送有关当前月份视图的所有正确信息。方法也会在初始月视图呈现时调用。
视图组件示例:

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

适当的ts对象:

  1. calendarOptions: CalendarOptions = {
  2. initialView: 'dayGridMonth',
  3. datesSet: (data => {
  4. console.log('datesSet: ' , data);
  5. })
  6. };
pbwdgjma

pbwdgjma8#

对于Fullcalendar V4,

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

相关问题