FullCalendar JS — проблема со стилем в TimeGrid

Я использую плагин FullCalendar: https://fullcalendar.io/

По какой-то причине при загрузке представления временной сетки заголовок не обрезается правильно, как показано на скриншоте ниже.

https://fullcalendar.io/

Ниже приведен код для инициализации календаря.

 function SetupAndRenderCalendar() {
    var calendarEl = document.getElementById('calendar');

    calendar = new FullCalendar.Calendar(calendarEl, {
        height: 'parent',
        plugins: ['dayGrid', 'timeGrid'],
        defaultView: 'dayGridMonth',
        header: { center: 'dayGridMonth,timeGridWeek' },
        minTime: "06:00:00",
        maxTime: "20:00:00",

    });

    calendar.render();
}

Я видел несколько сообщений StackOverflow, в которых рекомендуется дать классу css пользовательское переопределение, например

<style>
.fc-time-grid-event {
    margin-bottom: 1px;
    white-space:nowrap;
}
</style>

Честно говоря, мне не понравилось это решение, так как текст не был красиво обёрнут, когда div события был достаточно большим.

Я проверил демоверсии на сайте, и нет проблем с переносом длинного заголовка, так что это должно быть ошибка на моей стороне.

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


javascript html css fullcalendar fullcalendar-4
person Richard    schedule 04.11.2019    source источник
comment
Судя по снимку экрана, у вас может быть какой-то пользовательский CSS на вашей странице (либо через тему fullCalendar, либо через изменения в файлах CSS fullCalendar, либо какой-то дополнительный CSS, который вы добавили сами)? Или вы сделали что-нибудь, чтобы настроить внешний вид ваших событий с помощью обратного вызова eventRender? Эти вещи, безусловно, являются наиболее вероятной причиной такой проблемы. Я отмечаю, что события также появляются в немного неправильном месте в сетке, что является еще одним признаком проблем с CSS. Удалите его обратно к исходному CSS по умолчанию, предоставленному fullCalendar, и посмотрите, есть ли у вас проблема.   -  person ADyson    schedule 04.11.2019
comment
Отличный совет! Собираюсь попробовать это сейчас, чтобы увидеть, есть ли какой-то пользовательский css более высокого уровня на странице макета, вызывающий проблему.   -  person Richard    schedule 04.11.2019
comment
@ADyson, ты был прав. Проблема в том, что в проекте используется тема Metronic, которая переопределяет поведение по умолчанию и вызывает проблему.   -  person Richard    schedule 04.11.2019

Ответы (1)


arrow_upward
1
arrow_downward

Согласно комментарию Эдисона, что-то происходило на более высоком уровне с CSS.

Случилось так, что мы использовали купленную в магазине тему (Metronic) с пользовательским CSS для внешнего вида FullCalendar.

Затем я добавил приведенный ниже код в пользовательский css, и это решило проблему.

.fc-time-grid-event .fc-content {
overflow: hidden;
max-height: 100%;

}

Не уверен, что это поможет кому-то еще, но вы никогда не знаете.

person Richard    schedule 06.11.2019