如何正确配置FullCalendar周视图？解决周视图加载空白问题

你的代码存在几个关键问题，导致周视图无法加载：

• 你引入的是FullCalendar的全局CDN版本，却使用了ES模块的import语法，全局版本不需要import，相关类和插件已挂载到全局window对象。
• 未获取页面上的日历容器元素，calendarEl变量未定义。
• 未调用日历实例的render()方法，无法触发渲染。
• 脚本放在<head>中时，DOM还未加载完成，无法获取到<div id='calendar'>元素。

修正后的代码 #

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
  </head>
  <body>
    <div id='calendar'></div>
    <script>
        // 全局版本直接使用window上的Calendar和timeGridPlugin
        const calendarEl = document.getElementById('calendar');
        const calendar = new Calendar(calendarEl, {
            plugins: [timeGridPlugin],
            initialView: 'timeGridWeek',
            headerToolbar: {
                left: 'prev,next',
                center: 'title',
                right: 'timeGridWeek,timeGridDay'
            }
        });
        // 必须调用render方法渲染日历
        calendar.render();
    </script>
  </body>
</html>

关键修正点说明 #

• 移除了错误的import语句，直接使用全局对象提供的Calendar和timeGridPlugin。
• 通过document.getElementById('calendar')获取日历容器DOM元素。
• 添加calendar.render()方法触发日历渲染。
• 将脚本移到<body>末尾，确保DOM加载完成后再执行脚本。

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