FullCalendar重复事件未按指定未来日期启动问题求助

我首次使用FullCalendar及rrule插件，非重复事件显示正常，但某重复事件的起始日期为2024-10-31T14:30:00（未来日期），却从当前日期开始渲染。

前端代码 #

<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

问题原因及解决方法 #

错误原因 #

你给重复事件同时设置了start/end和dtstart/rrule属性。FullCalendar在处理重复事件时，会优先使用start作为重复序列的起始基准，忽略dtstart的配置，导致事件错误地从当前日期开始渲染。

修复步骤 #

修改事件数据的构建逻辑，区分重复事件和非重复事件的属性配置：

• 非重复事件：保留start和end属性
• 重复事件：移除start和end，改用dtstart定义起始时间，rrule定义重复规则，添加duration属性指定每个事件实例的持续时长

修改后的事件构建代码如下：

$.each(response, function () {
    var eventData = {
        title: this.title,
        backgroundColor: this.color,
        borderColor: this.color,
        textColor: '#ffffff',
        extendedProps: {
            description: this.description,
            color: this.color,
            id: this.id
        }
    };

    if (this.rrule) {
        // 处理重复事件
        eventData.dtstart = this.dtstart;
        eventData.rrule = this.rrule;
        // 计算事件持续时长（毫秒）
        const start = new Date(this.event_start);
        const end = new Date(this.event_end);
        eventData.duration = (end - start) + 'ms';
    } else {
        // 处理非重复事件
        eventData.start = this.event_start;
        eventData.end = this.event_end;
    }

    events.push(eventData);
});

这样配置后，重复事件会严格按照dtstart指定的2024-10-31T14:30:00作为起始点，结合rrule规则生成正确的重复实例。

内容的提问来源于stack exchange，提问作者joegreen