如何在分隔符尚未移动时将资源标题包装在 fullCalendar 时间轴视图中？

Question

我在 React 中使用 FullCalendar，资源标题有时很长。用户可以在需要时移动分隔线，但我想要的是当资源标题不适合给定的 space.

时将其包装起来

有什么想法吗？

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

如何在分隔符尚未移动时将资源标题包装在 fullCalendar 时间轴视图中？

How to wrap resource title in fullCalendar timeline view when the divider is not moved yet?

css

reactjs

fullcalendar

fullcalendar-4