Как изменить размер элемента события в FullCalendar DayGrid View? - PullRequest
Новая
       28

Как изменить размер элемента события в FullCalendar DayGrid View?

0 голосов
/ 17 июня 2020

В моем рендеринге FullCalendar я использую представление dayGrid для создания расписания. При заполнении этого календарного представления (расписания) событиями каждое событие имеет одинаковую высоту, независимо от продолжительности события. Я хотел бы сделать события больше или меньше в зависимости от их продолжительности, как в демонстрации FullCalendar для других представлений календаря. Можно ли этого достичь с помощью представления dayGrid?

Мой календарь: MyCalendarImage

FullCalendar Желаемый стиль: FullCalendarImage

1 Ответ

0 голосов
/ 18 июня 2020

В конце концов, я нашел способ достичь sh своей цели. Стиль CSS для визуализации календаря можно изменить прямо на странице html, используя: 

<style>
   .fc-day-grid-event > .fc-content {
       white-space: normal;
   }
</style>

. Это позволяет тексту заголовка события переноситься на несколько строк. Без изменения этого стиля текст события (заголовок) просто обрезает все, что больше ширины окна события. Как только этот стиль будет на месте, я могу просто вставить символы новой строки ('\ n') в свой html, чтобы увеличить размер поля. Поскольку я управляю своими событиями из базы данных, легко просто добавить символы новой строки в строку заголовка, соответствующую желаемому размеру события.

Вот как мой календарь выглядел раньше: NoEventSizeControl

А вот несколько примеров событий для воссоздания изображения: 

events: [
            {
            id: 'event1',
            title: 'Event 1- 5h',
            start: '2020-06-16',
            displayEventTime: false,
            editable: true,
            allDay: true
            },

            {
              id: 'event2',
              title: 'Event 2- 2h',
              start: '2020-06-16',
              displayEventTime: false,
              editable: true,
              allDay: true
            },

            {
                id: 'event3',
                title: 'Event 3- 1h',
                start: '2020-06-16',
                displayEventTime: false,
                editable: true,
                allDay: true
            }
]

Вот как выглядит календарь с моим решением: EventSizingSolution

И простая модификация событий, необходимых для этого решения: 

events: [
            {
            id: 'event1',
            title: 'Event 1- 5h' + '\n\n\n\n\n',
            start: '2020-06-16',
            displayEventTime: false,
            editable: true,
            allDay: true
            },

            {
              id: 'event2',
              title: 'Event 2- 2h' + '\n\n',
              start: '2020-06-16',
              displayEventTime: false,
              editable: true,
              allDay: true
            },

            {
                id: 'event3',
                title: 'Event 3- 1h',
                start: '2020-06-16',
                displayEventTime: false,
                editable: true,
                allDay: true
            }
]
...