本文详解 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 视图，并在此基础上扩展事件交互、自定义时间轴、响应式适配等高级功能。