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

[Anonymous]

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

Текущий вид
Я попробовал использовать опцию eventOverlap в объекте календаря. Я пробовал изменить некоторые CSS здесь и там, но до сих пор понятия не имею, что вызывает пробел. Я просмотрел документацию и безуспешно погуглил.
Это мой текущий код для рендеринга FullCalendar:
document.addEventListener('DOMContentLoaded', function () {
const calendarEl = document.getElementById('event-agenda');

if (!calendarEl || !eventDays.length || !eventDays[0].date_start) {
return;
}

const calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridDay',
initialDate: eventDays[0].date_start,
headerToolbar: false,
dayHeaders: false,
allDaySlot: false,
slotMinTime: timeRangeOfEventDays[eventDays[0].date_start]?.slotMinTime ?? '10:00:00',
slotMaxTime: timeRangeOfEventDays[eventDays[0].date_start]?.slotMaxTime ?? '24:01:00', // Include midnight
slotDuration: '01:00:00',
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: true,
},
slotEventOverlap: false,
contentHeight: 'auto',
events: eventActivities,
eventDidMount: function(info) {
const eventDesc = info.event._def.extendedProps.description
tippy(info.el, {
content: `
${info.event._def.title}
${
eventDesc ? `
About event: ${eventDesc}
` : ''
}
`,
placement: 'top',
allowHTML: true,
});
},
eventClick: function (info) {
info.jsEvent.preventDefault();
return;
},
eventContent: function (info) {
const duration = (new Date(info.event.end) - new Date(info.event.start)) / (60 * 1000); // Duration in minutes
const isShortEvent = duration < 30;
const isMediumEvent = duration < 60;
const isHourLongEvent = duration === 60;
const isLongEvent = duration 90;

if (isShortEvent) {
return {
html: `


${getTimeInAMPMFormat(info.event.start)} - ${getTimeInAMPMFormat(info.event.end)}

${info.event.title}
${ info.event.url ? `

` : ''}

`
}
} else {

let descClass = '';
if (isHourLongEvent) {
descClass = 'event-item-hour-long-desc';
}
else if (isLongEvent) {
descClass = 'event-item-long-desc';
}
else if (isExtraLongEvent) {
descClass = 'event-item-extra-long-desc';
}

const container = document.createElement('div');
container.innerHTML = info.event.extendedProps.description ?? "";

const parsedElement = container.firstChild;

if (parsedElement) {
parsedElement.classList.add(descClass);
}

return {
html: `




${getTimeInAMPMFormat(info.event.start)} - ${getTimeInAMPMFormat(info.event.end)}

${info.event.title}

${info.event.url ? `

` : ''}

${ info.event.extendedProps.description && !isMediumEvent ? `

${parsedElement.outerHTML}
` : ''
}

`
}
}
}
});

calendar.render();
}


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