FullCalendar 5 - 如何获取事件系列的结束日期 - eventClick？

Posted 2023-05-08

【中文标题】FullCalendar 5 - 如何获取事件系列的结束日期 - eventClick？

【英文标题】：FullCalendar 5 - How do I get the end date of an event series - eventClick?

【发布时间】：2021-12-31 05:11:16

【问题描述】：

我正在使用 FullCalendar 5 和 JSON 来填充事件：

id;
title;
daysOfWeek;
startRecur;
endRecur;
startTime;
endTime;
backgroundColor;

我有一系列带有开始和结束日期的事件。当我单击一个事件时，结束日期显示为事件发生所在的日期单元格。我想检索一系列事件的结束日期。我正在使用 info.event.end。

这是代码：

eventClick: function(info) 
    var eventObj = info.event;
            
    $('#updateDescription').val(eventObj.title);
    $('#updateStartDate').val(moment(eventObj.start).format('DD/MM/YYYY'));
    $('#updateEndDate').val(moment(eventObj.end).format('DD/MM/YYYY')); //Shows as 29/11/2021 should be 01/12/2021
    $('#updateStartTime').val(moment(eventObj.start).format('HH:mm'));
    $('#updateEndTime').val(moment(eventObj.end).format('HH:mm'));
    $('#updateColour').val(eventObj.backgroundColor);
            
    $('#ecClickModal').modal('show');
,

id: '001,
title: 'Event A',
daysOfWeek: '[1, 4]',
startRecur: '2021-01-01',
endRecur: '2022-12-30',
startTime: '10:00',
endTime: '11:00',
backgroundColor: 'Red',

id: '002,
title: 'Event B',
daysOfWeek: '[2, 3]',
startRecur: '2021-05-01',
endRecur: '2023-05-30',
startTime: '09:00',
endTime: '10:00',
backgroundColor: 'Blue',

id: '003,
title: 'Event C',
daysOfWeek: '[5]',
startRecur: '2020-01-01',
endRecur: null,
startTime: '10:00',
endTime: '11:00',
backgroundColor: 'Green',

当我点击“事件 B”时，我想获得结束日期“2023-05-30”。

目前，如果我点击“2021 年 11 月 30 日”发生的“事件 B”，那么：

info.event.start is 30/11/2021
info.event.end is 30/11/2021

周期性活动不需要结束日期。因此，解决方案必须能够满足“事件 C”（即请为空结束日期）。

【问题讨论】：

不幸的是，无法从单个事件中做到这一点。也许可以通过 fullCalendar 项目提出功能请求（请参阅fullcalendar.io/requesting-features）。

@ADyson 我提出了功能请求。

【参考方案1】：

目前在 FullCalendar 中没有内置函数来获取一系列事件的最后日期。您必须使用calendar::getEvents 获取所有事件，然后找到最后一个事件的结束日期。

document.addEventListener('DOMContentLoaded', function() 
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, 
    initialView: 'dayGridMonth',
    events: [
      
        id: 'a',
        title: 'my event a',
        start: '2021-11-01',
        end: '2021-11-02'
      ,
      
        id: 'b',
        title: 'my event b',
        start: '2021-11-03',
        end: '2021-11-04'
      ,
      
        id: 'c',
        title: 'my event c ',
        start: '2021-11-05',
        end: '2021-11-06'
      ,
      
        id: 'd',
        title: 'my event d',
        start: '2021-11-07',
        end: '2021-11-08'
      ,
    ],
  );

  calendar.render();

  // Fetching all events
  const allEvents = calendar.getEvents();


  // Sorting the events based on the last date (descending)
  allEvents.sort((eventA, eventB)=> 
    return eventB.end-eventA.end;
  );

  const lastDate = allEvents[0].end;
);

info.event.end 只为您提供单个事件的结束日期。

另外，在我偶然发现它之前，我该如何管理一个空的结束日期？

你能解释一下这个问题吗？

【讨论】：

感谢您的帮助，非常感谢。我已更新问题以使其更清楚。我想获取我点击的重复事件的结束日期。