Можем ли мы добавить время заполнения или несколько цветовых стилей в события FullCalendar? [закрыто] ⇐ Html

[Anonymous]

нужно добавить продолжительность буфера до и после событий (временные базы буфера) в FinalCalendar. Возможно ли это, как показано на изображении? (реализовано ниже) But unable to align buffer events with main event as event and its 2 buffer's can't be grouped to stay in line.
Any suggestion to make first or second approach work or any new direction is also welcomed.
Here is the basic code of approach 1.

Код: Выделить всё

var cal = new FullCalendar.Calendar(document.getElementById('calendar'), {
headerToolbar: {
left: "prev,next today",
center: "title",
right: "dayGridMonth timeGridWeek,timeGridDay",
},
initialView: "dayGridMonth",
displayEventTime: false,
eventDisplay: 'block',
events: [
{
id: 'a',
title: 'Event',
start: '2025-06-11',
end: '2025-06-25'
}
],
eventDidMount: function (info) {
info.el.classList.add('parent');

let befi = document.createElement("div");
befi.className = "bufferbefore";
befi.style.cssText = "width: 25%;";//fixed width here for simplicity actually will be time duration

let afi = document.createElement("div");
afi.className = "bufferafter";
afi.style.cssText = "width:33%;";

info.el.appendChild(afi);
info.el.appendChild(befi);
},
});
cal.render();< /code>
.fc-event-title,
.fc-event-title-container,
.fc-event-main {
text-align: center;
width: 100%;
display: block;
}
.parent {
position: relative;
}
.bufferafter {
position: absolute;
height: 100%;
background: #9dcaf7;
top: 0;
left: 0;
}
.bufferbefore {
position: absolute;
height: 100%;
background: #9dcaf7;
top: 0;
right: 0;
}< /code>




Navigate to June 2025

Подробнее здесь: https://stackoverflow.com/questions/796 ... dar-events