FullCalendar dayGrid View 不在标题中显示视图选项

Question

我在 JS 中使用 FullCalendar v5 当我尝试使用 dayGrid View 时，它不起作用。

预期输出：

收到的输出： 我在我的 PHP 文件顶部为 dayGrid 插件添加了一个脚本标签：

  <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.9.0/"></script>

以下脚本标签用于在标题上添加按钮：

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

Answer 1

查看您使用的基于 jQuery 的语法，您似乎使用的是 fullCalendar v3（或更低版本），而不是 v5。 （v4 及以上版本没有作为 jQuery 插件实现，初始化日历的语法有很大不同。）

因此需要参考这里的文档：https://fullcalendar.io/docs/v3#toc

一旦你这样做了，你就会看到

a) 视图名称都不同，并且

b) 启动时设置视图的选项是defaultView，而不是initialView。

因此您需要的代码是：

var calendar = $("#calendar").fullCalendar({
  defaultView: "agendaWeek",
  header: {
    left: "prev,next",
    center: "title",
    right: "month,agendaDay,agendaWeek"
  },
  editable: true,
  events: "https://fullcalendar.io/demo-events.json"
});

现场演示：https://codepen.io/ADyson82/pen/XWgpaao

附：链接https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.9.0/ 只是指向 5.9 版插件文件之一的链接，它不是主要的 fullCalendar 文件。如果您设法使用 v3 使日历正常工作，那么您根本不需要该参考。