时间戳

首页 > 解决方案 > 当分隔线尚未移动时，如何在 fullCalendar 时间线视图中包装资源标题？

css - 当分隔线尚未移动时，如何在 fullCalendar 时间线视图中包装资源标题？

问题描述

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

任何想法？

标签： cssreactjsfullcalendarfullcalendar-4

解决方案

一种选择是简单地使文本换行（默认情况下，它从其父元素继承不换行规则）：

.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

推荐阅读