FullCalendar v5的dayGrid视图header未显示视图切换选项如何解决

• FullCalendar v5已废弃v4及更早版本支持的$(selector).fullCalendar() jQuery风格初始化语法，现有旧写法无法被v5版本识别。
• 依赖引入存在错误：仅引入了dayGrid插件，未引入FullCalendar核心依赖包；且当前使用的dayGrid插件CDN地址指向包根目录，未指向实际可执行的JS文件路径。
• 配置项命名不匹配：v5版本中头部工具栏的配置项已从header更名为headerToolbar，旧配置项会被系统忽略。

1. 修正依赖引入顺序及路径，按如下顺序引入所需资源：

<!-- 先引入jQuery（若项目已引入可跳过） -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- 引入FullCalendar核心包 -->
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@5.9.0/index.global.min.js"></script>
<!-- 引入dayGrid插件 -->
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.9.0/index.global.min.js"></script>
<!-- 若要继续使用jQuery风格调用，需额外引入jQuery适配包 -->
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/jquery@5.9.0/index.global.min.js"></script>

2. 修正初始化代码，可选择任意一种适配v5的写法：

原生JS写法（更推荐，不需要额外引入jQuery适配包） #

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridWeek',
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'dayGridMonth,dayGridDay,dayGridWeek'
    },
    editable: true,
    events: 'https://fullcalendar.io/demo-events.json'
  });
  calendar.render();
});

jQuery风格写法（需引入上述jQuery适配包） #

$(document).ready(function() {
  $('#calendar').fullCalendar({
    initialView: 'dayGridWeek',
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'dayGridMonth,dayGridDay,dayGridWeek'
    },
    editable: true,
    events: 'https://fullcalendar.io/demo-events.json'
  });
});

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