Премиум Fullcalendar не поддерживает тему Bootstrap5
Вот что я вижу (похоже, тема не применяется)
Вот как я ожидал, что это будет выглядеть
Я могу заставить тему начальной загрузки работать со стандартной версией 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>А почему вы загружаете JS версии 5.3.3 и CSS версии 5.0.2?
Ответы 1
В полной документации темы Calendar 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>Н.Б. Я думаю, что документация могла бы прояснить требования к дополнительному плагину. В частности, в разделе «Использование пакета» на странице документации (на момент написания) не показано использование дополнительного файла JS, хотя в живой демонстрации это показано, если вы перейдете к исходному коду CodePen.
FullCalendar Premium поставляется с 1 годом поддержки по электронной почте.