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

[Anonymous]

Я использую FullCalendar v6 в приложении React + TypeScript с dayGridMonth. Мне нужна сетка месяца, чтобы все события всегда были видны (без «+больше»), и чтобы высота строки недели увеличивалась до максимального количества событий на этой неделе (например, FullCalendar, используемый в WordPress).
Однако я застрял в «компромиссе»:
Если я настрою CSS, чтобы предотвратить перекрытие недель и позволить сетке расти, многодневные события allDay перестанут располагаться горизонтально и будут отображаться только в виде коротких блоков в первый день каждого сегмент недели (например, только 1 и 8 февраля, но не заполняя дни между ними).
Если я верну CSS для восстановления правильного охвата, недели перекроются / вся строка недели станет скрытой (номера дней следующей недели исчезнут), как если бы сегменты событий располагались друг над другом.
Я подозреваю, что это вызвано переопределениями CSS, примененными к .fc-daygrid-event-harness, что также влияет .fc-daygrid-event-harness-abs (поскольку элемент ремня безопасности abs содержит оба класса). Ремень пресса использует встроенные вычисления сверху/слева/справа; когда я переопределяю их (даже косвенно), макет нарушается.
Требования
dayGridMonth
Нет «+more» — все события должны оставаться видимыми (высота недели может увеличиваться)
Многодневные события allDay должны охватывать непрерывно несколько дней (правильно разбиваться на сегменты недели)
Недели не перекрываются (недели не должны перекрывать друг друга)
Среда
React 18 + TypeScript
@fullcalendar/react + @fullcalendar/daygrid + @fullcalendar/interaction
TailwindCSS (но я не применяю классы Tailwind напрямую к событиям, кроме классов категорий)
Параметры FullCalendar: height: "auto", fixedWeekCount: false
Минимальный воспроизводимый пример
Компонент React

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

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 (



);
}

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

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

css

/* 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;
}

Это предотвращает перекрытие недель, но тогда многодневные события не распределяются правильно (они отображаются только в начале недели).
Если я удаляю/ослабляю переопределение жгута, охват возвращается, но иногда я получаю перекрытие недель/строку следующей недели скрытой.
Что я пробовал
Исправить эксклюзивные даты окончания для событий на весь день (конец = последний видимый день + 1).
Нет Пользовательский рендеринг eventContent (собственный рендеринг FullCalendar).
Удаление dayMaxEvents / dayMaxEventRows (я хочу, чтобы все было видно).
Удаление оболочек макета с переполнением скрытым / переполнением автоматически в родительских контейнерах.
Множество экспериментов CSS вокруг .fc-daygrid-day-frame, .fc-scrollgrid-sync-table и жгуты.
Вопрос
Как правильно (параметры FullCalendar + безопасный CSS) добиться:
Все события видимы (нет «+больше», строки недель могут увеличиваться)
Правильный охват нескольких дней (непрерывная полоса между днями/сегментами недели)
Нет перекрытия недель (нет скрытых недельные строки)
В частности:
Какие селекторы CSS никогда не следует переопределять (например, .fc-daygrid-event-harness-abs, top/left/right)?
Существует ли рекомендуемая конфигурация для сетки месяцев с автоматической высотой со множеством многодневных событий в течение всего дня без использования dayMaxEvents?



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