Как удалить разрыв между двумя событиями с одинаковым/перекрывающимся временным интервалом в timeGridView? ⇐ Html

[Anonymous]

В настоящее время у меня возникают проблемы с попыткой устранить разрыв между событиями, которые занимают один и тот же временной интервал или имеют перекрывающийся временной интервал в timeGridView FullCalendar, как показано на изображении. Обратите внимание: я не могу изменить размер карточек событий, поскольку требуется, чтобы они занимали 1/4 строки.
Текущий вид
Ниже приведен минимальный воспроизводимый пример.

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

FullCalendar Overlapping Events Demo


body {
font-family: Arial, sans-serif;
}
#calendar {
max-width: 900px;
margin: 50px auto;
}
.fc-timegrid-event-harness {
max-width: 25% !important;
}






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

const calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridDay', // Show timeGridDay view
height: 'auto',
slotMinTime: '08:00:00',
slotMaxTime: '20:00:00',
slotEventOverlap: false,
events: [
{
title: 'Meeting',
start: '2025-01-15T10:00:00',
end: '2025-01-15T12:00:00',
color: '#3788d8'
},
{
title: 'Workshop',
start: '2025-01-15T11:00:00',
end: '2025-01-15T13:00:00',
color: '#ff5733'
},
{
title: 'Lunch Break',
start: '2025-01-15T12:00:00',
end: '2025-01-15T12:30:00',
color: '#33d977'
},
{
title: 'Discussion',
start: '2025-01-15T11:30:00',
end: '2025-01-15T12:30:00',
color: '#ffc107'
},
{
title: 'Team Call',
start: '2025-01-15T14:00:00',
end: '2025-01-15T15:30:00',
color: '#6c757d'
},
{
title: 'Team Call 2',
start: '2025-01-15T14:00:00',
end: '2025-01-15T15:30:00',
color: '#f200ff'
}
]
});

calendar.render();
});

Я попробовал использовать параметр eventOverlap в объекте календаря. Я просмотрел документацию FullCalendar и погуглил, но безрезультатно.
Я попытался изолировать CSS и обнаружил, что основной причиной, по-видимому, является CSS, который определяет максимальную ширину карточки событий. Чтобы противодействовать этому, я возился с отступами, но это бесполезно.
Я также попробовал несколько очень грязных обходных путей, чтобы изменить свойства inset-inline-start карточек событий в EventDidMount(), поэтому что те, что справа, приближаются к тем, кто слева. Излишне говорить, что это было очень глючно и неэффективно.
Изменить: если вы видели мой предыдущий и очень похожий пост, спасибо за ваш отзыв. Я принял их близко к сердцу и постарался улучшить. Я впервые пишу здесь, поэтому обязательно допущу ошибок. Моя вина

Подробнее здесь: https://stackoverflow.com/questions/793 ... me-slot-in