Premium Fullcalendar 未选择 Bootstrap5 主题

Question

这就是我所看到的（主题看起来不适用）

这就是我期望的样子

我可以让 bootstrap 主题在 fullcalendar 标准版上运行，但不能在高级版上运行

我已将此行添加到日历的初始化中

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    themeSystem: 'bootstrap5',
    timeZone: 'UTC',
    editable: true,
    initialView: 'resourceTimelineDay',
    initialDate: '2024-06-05',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimeGridDay'
    },
    resourceAreaHeaderContent: 'Rooms',
    views: {
      resourceTimelineDay: { buttonText: 'timeline' },
      resourceTimeGridDay: { buttonText: 'timeGrid' }
    },
    events: [
      {
        resourceId: 'a',
        title: 'Timed Event',
        start: '2024-06-05T16:00:00+00:00'
      },
      {
        resourceId: 'b',
        title: 'Conference',
        start: '2024-06-05'
      },
      {
        resourceId: 'c',
        title: 'Meeting',
        start: '2024-06-05T10:30:00+00:00',
        end: '2024-06-05T12:30:00+00:00'
      },
      {
        resourceId: 'a',
        title: 'Lunch',
        start: '2024-06-05T12:00:00+00:00'
      }
    ],
    resources: [
      {
        id: 'a',
        title: 'Auditorium A'
      },
      {
        id: 'b',
        title: 'Auditorium B'
      },
      {
        id: 'c',
        title: 'Auditorium C'
      },
      {
        id: 'd',
        title: 'Auditorium D'
      }
    ]
  });

  calendar.render();
});

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
<div id='calendar'></div>

Answer 1

fullCalendar bootstrap 5 主题文档 说：

为了使用 Bootstrap 5 主题正确设置您的日历主题， 您必须包含正确的样式表，包括 JavaScript 插件，并将 themeSystem 设置为“bootstrap5”。

您错过了“包含 JavaScript 插件”步骤。也就是说，您还必须添加 fullCalendar 的 bootstrap 5 插件文件。即使您使用的是全局捆绑文件，该插件也不包含在内 在里面。请参阅 插件索引 了解所有插件的详细信息以及指向它们的 CDN 链接。

您还忘记包含同一文档中提到的引导图标文件。

从技术上讲，引导 JS 文件不是必需的，因此不在我下面的演示中 - 尽管如果您在页面中使用其他引导功能，您可能希望自己使用它。 （另请注意，在您的示例中，您加载的引导 CSS 和 JS 文件之间也存在版本不匹配，这是兼容性问题的根源。）

这是一个工作版本：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    themeSystem: 'bootstrap5',
    timeZone: 'UTC',
    editable: true,
    initialView: 'resourceTimelineDay',
    initialDate: '2024-06-05',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimeGridDay'
    },
    resourceAreaHeaderContent: 'Rooms',
    views: {
      resourceTimelineDay: { buttonText: 'timeline' },
      resourceTimeGridDay: { buttonText: 'timeGrid' }
    },
    events: [
      {
        resourceId: 'a',
        title: 'Timed Event',
        start: '2024-06-05T16:00:00+00:00'
      },
      {
        resourceId: 'b',
        title: 'Conference',
        start: '2024-06-05'
      },
      {
        resourceId: 'c',
        title: 'Meeting',
        start: '2024-06-05T10:30:00+00:00',
        end: '2024-06-05T12:30:00+00:00'
      },
      {
        resourceId: 'a',
        title: 'Lunch',
        start: '2024-06-05T12:00:00+00:00'
      }
    ],
    resources: [
      {
        id: 'a',
        title: 'Auditorium A'
      },
      {
        id: 'b',
        title: 'Auditorium B'
      },
      {
        id: 'c',
        title: 'Auditorium C'
      },
      {
        id: 'd',
        title: 'Auditorium D'
      }
    ]
  });

  calendar.render();
});

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/index.global.min.js"></script>
<div id='calendar'></div>