RockRMS网站FullCalendar仅显示当月事件问题求助

问题描述 #

我在RockRMS网站上使用标准版本的日历（不熟悉该系统也没关系），下方JS代码中混有Lava代码可忽略。日历初始视图设为dayGridMonth，但目前仅显示2025年7月的事件，7月前后的事件均不显示。

已核对CMS中的事件设置，例如每月最后周四举办的「Best Yet Night」事件，半年前就创建了，但只有7月的能显示。我已排查过CMS及代码里的限制因素，附上7月、8月的日历截图，现寻求解决办法。

相关代码 #

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.17/index.global.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',

    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },

            events: [
                {% for eventItemOccurrence in EventItemOccurrences %}
                {
                    title  : '{{ eventItemOccurrence.Name }}',
                    description: '{{ eventItemOccurrence.Summary }}',
                    url    : '{% if eventItemOccurrence.DetailPage != null %}{{ eventItemOccurrence.DetailPage }}{% else %}{{ DetailsPage }}?EventOccurrenceId={{ eventItemOccurrence.EventItemOccurrence.Id }}{% endif %}',
                    start  : '{{ eventItemOccurrence.DateTime | Date:'yyyy-MM-ddTHH:mm:ss' }}',
                    end    : '{{ eventItemOccurrence.EndDate | Date:'yyyy-MM-dd' }}{{ eventItemOccurrence.EndTime | Date:'THH:mm:ss' }}'
                },
                {% endfor %}
                ]
            });
            
            calendar.render();
    });
</script>

排查方向与解决办法 #

1. 检查后端数据返回范围 #

目前代码通过Lava循环{% for eventItemOccurrence in EventItemOccurrences %}加载事件，大概率是RockRMS仅返回了当前渲染页面时的7月事件数据，没有包含前后月份的事件。

• 解决：修改RockRMS中事件数据的获取逻辑，设置合理的时间范围（比如当前月份前后3个月），确保EventItemOccurrences包含所有需要显示的事件实例。

2. 修正事件日期格式 #

代码中end字段是通过拼接EndDate和EndTime生成的，可能出现格式不规范的情况（比如缺少分隔符、时间格式错误），导致FullCalendar无法识别其他月份的事件。

• 解决：如果RockRMS提供了完整的结束日期时间字段（比如EndDateTime），直接用Lava过滤器格式化：

  end  : '{{ eventItemOccurrence.EndDateTime | Date:'yyyy-MM-ddTHH:mm:ss' }}'
  

  若没有该字段，确保拼接后的格式严格符合ISO 8601标准（yyyy-MM-ddTHH:mm:ss）。

3. 改用动态事件加载 #

当前一次性加载所有事件的方式，依赖后端返回全量数据，一旦后端数据范围受限就会出现问题。改用FullCalendar的动态加载机制，切换月份时自动请求对应时间段的事件：

var calendar = new FullCalendar.Calendar(calendarEl, {
    // 其他配置不变
    events: function(info, successCallback, failureCallback) {
        // 替换为RockRMS的事件接口，传入时间范围参数
        fetch(`/path/to/rockrms/events?start=${info.start.toISOString()}&end=${info.end.toISOString()}`)
            .then(res => res.json())
            .then(events => successCallback(events))
            .catch(err => failureCallback(err));
    }
});

4. 验证重复事件的实例生成 #

像「Best Yet Night」这类重复事件，可能RockRMS没有生成7月以外的事件实例，导致前端无法加载。

• 解决：检查RockRMS中重复事件的配置，确认重复规则（每月最后周四）正确生效，且系统已生成所有符合条件的事件实例；若后端不支持生成重复实例，可引入FullCalendar的rrule插件，通过后端返回的重复规则在前端动态生成事件。

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