FullCalendar v6 (React) dayGridMonth: либо многодневные события allDay не охватывают [закрыто] ⇐ CSS

[Anonymous]

Я использую FullCalendar v6 в приложении React с dayGridMonth. Мне нужна сетка месяца, чтобы все события всегда были видны (без дополнительных атрибутов), и чтобы высота строки недели увеличивалась до максимального количества событий на этой неделе (например, FullCalendar, используемый в WordPress).
Если я настрою CSS, чтобы предотвратить перекрытие недель и позволить сетке расти, многодневные события allDay перестанут располагаться по горизонтали и будут отображаться только в виде коротких блоков в первый день каждого сегмента недели (например, только 1 и 8 февраля, но не заполняя дни). между).
Если я верну CSS для восстановления правильного охвата, недели перекроются / вся строка недели станет скрытой (номера дней следующей недели исчезнут), как если бы сегменты событий располагались друг над другом.
Я подозреваю, что это вызвано переопределениями CSS, примененными к .fc-daygrid-event-harness, что также влияет на .fc-daygrid-event-harness-abs (потому что элемент ремня безопасности содержит оба класса). Ремень пресса использует встроенные вычисления сверху/слева/справа; когда я их переопределяю (даже косвенно), макет нарушается.

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

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";

const events = [
// 5 all-day events starting same day, spanning over a week boundary
{ id: "1", title: "Event 1", start: "2026-02-01", end: "2026-02-10", allDay: true },
{ id: "2", title: "Event 2", start: "2026-02-01", end: "2026-02-10", allDay: true },
{ id: "3", title: "Event 3", start: "2026-02-01", end: "2026-02-10", allDay: true },
{ id: "4", title: "Event 4", start: "2026-02-01", end: "2026-02-10", allDay: true },
{ id: "5", title: "Event 5", start: "2026-02-01", end: "2026-02-10", allDay: true }
];

export default function Calendar() {
return (



);
}

Когда я добавляю недельные правила автоматической высоты и пытаюсь избежать дублирования, я использовал что-то вроде:

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

/* allow week rows to grow */
.fc .fc-scrollgrid-sync-table { height: auto !important; }
.fc .fc-scrollgrid-sync-table tbody tr { height: auto !important; }
.fc .fc-daygrid-day-frame { height: auto !important; min-height: 120px; }

/* I previously tried overriding the harness to keep it in flow: */
.fc .fc-daygrid-event-harness {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
}

Как я могу убедиться, что все события, сведенные в один день, видны и не переполняют поле, отведенное для дня?



Мой текущий результат
Чего ожидать














Подробнее здесь: https://stackoverflow.com/questions/798 ... don-t-span