Как обернуть заголовок ресурса в представлении временной шкалы fullCalendar, когда разделитель еще не перемещен?

Question

Я использую FullCalendar в React, и заголовок ресурса иногда бывает длинным. Пользователь может перемещать разделитель при необходимости, но я хочу обернуть заголовок ресурса, когда он не помещается в заданное пространство.

Есть идеи?

Answer 1

Один из вариантов - просто сделать перенос текста (он наследует правило без переноса от своих родительских элементов по умолчанию):

.fc-cell-text
{
  white-space: normal;
}

Чтобы остановить переполнение текста снова, если разделитель перемещается, чтобы сделать область имени ресурса меньше, вы также можете добавить прослушиватель событий, чтобы fullCalendar обновлял свой размер при каждом щелчке по разделителю:

document.addEventListener("click", function () {
  if (event.target.classList.contains("fc-divider")) {
    console.log("here");
    calendar.updateSize();
  }
});

Демо: https://codepen.io/ADyson82/pen/KKdjzoW