Premium FullCalendar无法加载Bootstrap5主题问题求助
当前显示效果(主题未生效)

预期显示效果

标准版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
相关产品推荐
相关产品推荐

