FullCalendar JS - проблема стиля в TimeGrid - PullRequest
Новая
       20

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

0 голосов
/ 04 ноября 2019

Я использую плагин 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 события был достаточно большим.

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

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

1 Ответ

0 голосов
/ 06 ноября 2019

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

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

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

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

}

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

...