本文详解 fullcalendar 周视图无法渲染的常见原因及完整解决方案，重点强调 dom 元素获取、插件注册、实例初始化与显式渲染四大关键步骤，并提供可直接运行的 html 示例代码。
本文详解 fullcalendar 周视图无法渲染的常见原因及完整解决方案，重点强调 dom 元素获取、插件注册、实例初始化与显式渲染四大关键步骤，并提供可直接运行的 html 示例代码。
FullCalendar 的周视图（timeGridWeek）是构建日程调度系统的核心视图之一，但初学者常遇到“页面空白、无报错、日历不显示”的问题。根本原因并非配置逻辑错误，而是遗漏了两个强制性操作：一是必须通过 document.getElementById() 显式获取日历容器 DOM 元素并赋值给变量；二是必须在实例化 Calendar 后主动调用 .render() 方法——该方法不可省略，且需确保执行时 DOM 已就绪。
以下为完整、可直接运行的最小可行示例（基于 FullCalendar v6+ CDN 版本，无需构建工具）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>FullCalendar 周视图配置示例</title>
<!-- 引入核心库 + timeGrid 插件 -->
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.15/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6.1.15/index.global.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.15/main.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6.1.15/main.css" />
</head>
<body>
<div id="calendar"></div>
<script>
// ✅ 步骤1：确保 DOM 加载完成后再执行
document.addEventListener('DOMContentLoaded', function() {
// ✅ 步骤2：显式获取容器元素（关键！）
const calendarEl = document.getElementById('calendar');
// ✅ 步骤3：初始化日历实例，注册 timeGridPlugin
const calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [FullCalendar.TimeGrid],
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay'
},
// 可选：添加测试事件便于验证渲染
events: [
{
title: '团队会议',
start: new Date().setHours(10, 0, 0, 0),
end: new Date().setHours(11, 30, 0, 0)
}
]
});
// ✅ 步骤4：显式调用 render() —— 这是解决白屏问题的最关键一行！
calendar.render();
});
</script>
</body>
</html>? 注意事项与最佳实践：
- render() 不可省略：FullCalendar v5+ 起取消了自动渲染机制，必须手动调用，否则容器保持空状态；
- DOM 就绪是前提：务必包裹在 DOMContentLoaded 或等效生命周期钩子中，避免因 getElementById 返回 null 导致脚本中断；
- CDN 引入路径需匹配：使用 @fullcalendar/timegrid 时，全局变量为 FullCalendar.TimeGrid（非旧版 timeGridPlugin），注意命名一致性；
- 样式文件必须引入：仅引入 JS 不会渲染任何 UI，main.css 是必需的；
- 调试建议：若仍为空白，请检查浏览器控制台是否有 404（资源加载失败）或 TypeError: Cannot read property 'appendChild' of null（容器未找到），据此快速定位缺失环节。
掌握以上四步，即可稳定启用 timeGridWeek 视图，并在此基础上扩展事件交互、自定义时间轴、响应式适配等高级功能。
