FullCalendar 中的重复活动从今天开始

Question

我第一次使用 FullCalendar 和 rrule 插件。非重复事件正确显示。由于某种原因，重复事件从今天开始，即使开始日期是在未来。

这是我的代码：

<div class="text-center">
<div id="calendar" class="pt-3"></div>
</div>
@section Scripts {
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            eventDisplay: 'block', 
            dayMaxEvents: true,
            headerToolbar: {
                left: 'prev,next,today',
                center: 'title',
                right: 'multiMonthYear,dayGridMonth,timeGridWeek,timeGridDay,listMonth'
            },
            dateClick: function (info) {
                var clickedDate = getDateWithoutTime(info.date);
                var nowDate = getDateWithoutTime(new Date())
                if (clickedDate >= nowDate) {
                    window.location.replace("/CalendarEvents/Create");
                }
                else alert("Sorry, you cannot create event for the past date.");
            },
            events: function (fetchInfo, successCallback, failureCallback) {
                $.ajax({
                    url: "@Url.Action("GetCalendarEvents", "CalendarEvents")",
                    method: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        var events = [];
                        $.each(response, function () {
                            events.push({
                                title: this.title,
                                start: this.event_start,
                                end: this.event_end,
                                backgroundColor: this.color,
                                borderColor: this.color,
                                textColor: '#ffffff',
                                dtstart:this.dtstart,
                                rrule: this.rrule,
                                extendedProps: {
                                    description: this.description,
                                    color: this.color,
                                    id: this.id
                                }
                            });
                        });

                        successCallback(events);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        failureCallback();
                    }
                });
            },
            eventMouseEnter: function (info) {
                $(info.el).attr("tabindex", -1);
                var editURL = 'https://' + window.location.host + '/CalendarEvents/Edit/' + info.event.extendedProps.id;
                var deleteURL = 'https://' + window.location.host + '/CalendarEvents/Delete/' + info.event.extendedProps.id;
                var details = "<div id='popover-content'><strong>Start Time:</strong> " + moment(info.event.start).format('MMMM D, YYYY, h:mm a') + "<br /><strong>End Time:</strong> " + moment(info.event.end).format('MMMM D, YYYY, h:mm a') + "<br /><strong>Description:</strong> " + info.event.extendedProps.description + "<br /><a href='" + editURL + "' class='mt-2 btn btn-sm btn-primary'>Edit</a>  <a href='" + deleteURL + "' class='mt-2 btn btn-sm btn-danger'>Delete</a></div>";
                $(info.el).popover({ title: info.event.title, content: details, html: true, trigger: 'hover focus', }).popover('toggle');
            }
        });

        calendar.render();
    });

    function getDateWithoutTime(dt) {
        dt.setHours(0, 0, 0, 0);
        return dt;
    }
  </script>
}

这是我在控制台日志中看到的内容：

 event_start: 2024-10-31T14:30:00
 event_end: 2024-11-08T15:31:00
 dtstart: 2024-10-31T14:30:00
 rrule: FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20241109

但是这个重复发生的事件是从今天开始渲染的，而不是 10 月 31 日。知道我犯了什么错误吗？

Answer 1

您似乎对 fullCalendar 接受 RRule 数据的两种格式有点困惑。

根据 fullCalendar RRule 插件文档，您可以任一为 fullCalendar 提供 RRule 字符串，或枚举 rrule 的各个属性的对象。您的代码是一个中途之家，您在 RRule 字符串中获得了一些数据，其中一些在属性中（特别是

dtstart

）。这是行不通的。您需要采取其中一种方法，并坚持下去。

此外，在使用 RRule 时，您不需要向 fullCalendar 提供

start

和

end

属性。这些属性仅适用于非重复事件并且将被忽略。

所以你的事件对象应该是这样的：

{
  title: this.title,
  backgroundColor: this.color,
  borderColor: this.color,
  textColor: '#ffffff',
  rrule: this.rrule,
  extendedProps: {
    description: this.description,
    color: this.color,
    id: this.id
  }
}

并且您的 RRule 字符串需要在其中包含

DTSTART

属性 - 根据上面的示例，这看起来像：

DTSTART:20241031T143000\nRRULE:FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20241109

现场演示：https://codepen.io/ADyson82/pen/MWNGWZv