如何在ASP.NET Core中逐天渲染FullCalendar事件

核心思路 #

FullCalendar的events回调仅支持一次性返回视图所需的全部事件，无法通过多次调用successCallback实现增量渲染。要实现逐天加载并即时显示，需改用动态添加事件的方式：初始化日历后，在视图渲染完成的钩子中逐天请求数据，每次请求成功后立刻将事件添加到日历中。

具体实现步骤 #

1. 调整日历初始化代码

移除原events配置，改用datesSet钩子触发逐天加载逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  window.calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    datesSet: function(info) {
      // 视图切换或初始化完成后，启动逐天加载
      loadEventsDayByDay(info.start, info.end);
    }
  });
  calendar.render();
});

2. 编写逐天加载函数

通过async/await串行请求每一天的事件，并用addEventSource将数据动态添加到日历：

// 用于取消未完成的请求，避免视图切换后重复加载
let abortController = null;

async function loadEventsDayByDay(startDate, endDate) {
  // 取消上一次未完成的加载任务
  if (abortController) abortController.abort();
  abortController = new AbortController();

  let currentDate = new Date(startDate);
  while (currentDate < endDate) {
    // 检查是否已取消加载，避免无效循环
    if (abortController.signal.aborted) break;

    // 格式化日期为接口所需格式（示例：YYYY-MM-DD）
    const dateStr = currentDate.toISOString().split('T')[0];
    try {
      // 请求当天的事件数据
      const response = await axios.get(`/api/events?date=${dateStr}`, {
        signal: abortController.signal
      });
      // 动态添加当天事件到日历，添加后会立刻渲染
      calendar.addEventSource(response.data);
    } catch (error) {
      // 忽略取消请求的错误，仅捕获真实请求失败
      if (error.name !== 'AbortError') {
        console.error(`加载${dateStr}事件失败:`, error);
      }
    }

    // 日期推进一天
    currentDate.setDate(currentDate.getDate() + 1);
    // 可选：添加短暂延迟，降低服务器请求压力
    await new Promise(resolve => setTimeout(resolve, 100));
  }
}

3. 修改后端接口

调整ASP.NET Core控制器接口，支持根据传入的date参数返回当天的事件数据：

[HttpGet("api/events")]
public async Task<IActionResult> GetDailyEvents([FromQuery] DateTime date)
{
    // 查询当天的事件数据
    var events = await _eventRepository.GetEventsByDate(date.Date);
    return Ok(events);
}

注意事项 #

• 加载状态提示：可通过dayCellContent钩子为正在加载的日期添加加载提示，提升用户体验。
• 请求频率控制：添加setTimeout延迟避免短时间内大量请求导致服务器过载。
• 重复请求拦截：通过AbortController在视图切换时取消未完成的请求，避免无效数据加载。

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