Programmiererforum

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

Derzeit habe ich 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. Beachten Sie, dass ich die Größe der Ereigniskarten nicht ändern kann, da sie auf 1/4 der Zeile festgelegt sein müssen.
Aktuelle Ansicht
Das Folgende ist ein minimal reproduzierbares Beispiel.
[code]




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



[/code]
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 näher an die linken heranrücken. 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 Fehler