You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Premium FullCalendar无法加载Bootstrap5主题问题求助

Premium版FullCalendar无法加载Bootstrap5主题问题

当前显示效果(主题未生效)

已添加Bootstrap5主题但未生效的Premium FullCalendar

预期显示效果

期望的FullCalendar显示效果

标准版FullCalendar可正常应用Bootstrap主题,但Premium版(FullCalendar Scheduler)无法生效。已在日历初始化代码中添加themeSystem: 'bootstrap5'配置,相关代码如下:

HTML代码

<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/fullcalendar-scheduler@6.1.14/index.global.min.js"></script>
<div id='calendar'></div>

CSS代码

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

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

JavaScript代码

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();
});

内容的提问来源于stack exchange,提问作者case1352

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.21 15:31:13