Wie entferne ich die Lücke zwischen zwei Ereignissen mit demselben/überlappenden Zeitfenster in timeGridView? ⇐ CSS

[Guest]

Ich habe Probleme beim Versuch, die Lücke zwischen Ereignissen zu schließen, die dasselbe Zeitfenster belegen oder überlappende Zeitfenster in der TimeGridView von FullCalendar haben, wie im Bild unten.
Beachten Sie, dass ich das nicht ändern kann Die Größe der Ereigniskarten muss aufgrund der Anforderung auf 1/4 der Reihe festgelegt werden.
Aktuelle Ansicht:


Das Folgende ist ein minimal reproduzierbares Beispiel.
< div class="snippet">

Code: Select all

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();
});

Code: Select all

body {
font-family: Arial, sans-serif;
}

#calendar {
max-width: 900px;
margin: 50px auto;
}

.fc-timegrid-event-harness {
max-width: 25% !important;
}

Code: Select all

Ich habe versucht, die Option „eventOverlap“ im Kalenderobjekt zu verwenden. Ich habe die FullCalendar-Dokumentation durchgesehen und gegoogelt, aber ohne Erfolg.
Ich habe versucht, das CSS zu isolieren und herausgefunden, dass die Hauptursache das CSS zu sein scheint, das die maximale Breite von bestimmt die Ereigniskarten. Um dem entgegenzuwirken, experimentiere ich mit der Auffüllung herum, aber es nützt nichts.
Ich habe auch einen wirklich chaotischen Workaround ausprobiert, um die Inset-Inline-Start-Eigenschaften von Ereigniskarten auf EventDidMount() so zu ändern dass die rechten sich den linken nähern. Unnötig zu erwähnen, dass es sehr fehlerhaft und ineffizient war.
Bearbeiten: Wenn Sie meinen vorherigen und sehr ähnlichen Beitrag gesehen haben, vielen Dank für Ihr Feedback. Ich habe sie mir zu Herzen genommen und versucht, mich zu verbessern. Es ist das erste Mal, dass ich hier etwas poste, daher kann es passieren, dass ich Fehler mache. Mein Nachteil
Bearbeitung 2: Ich konnte mein Team endlich davon überzeugen, dass es nicht möglich ist, einen Workaround zu finden, um solche Anforderungen zu erfüllen, und wir haben uns entschieden, einfach mit dem Standardverhalten des zu arbeiten lib. Zumindest im Moment.