在 FullCalendar v5 中包装标题答案

【问题标题】：Wrap Titles in FullCalendar v5在 FullCalendar v5 中包装标题
【发布时间】：2021-07-28 02:55:24
【问题描述】：

在 FullCalendar v5 上包装标题和时间时遇到问题。通过将.fc-daygrid-event 更改为white-space: normal，我可以将标题换行，但这是不对的：

（顶部是空格调整，底部是默认）

我正在寻找的是：

标题与时间一致，并在时间下方换行。

我应该怎么做才能达到这个目的？

【问题讨论】：

你能提供工作代码以便试用@trees4theforest
Adyson 在下面设置了一个 codepen。谢谢！

标签： html css fullcalendar fullcalendar-5

【解决方案1】：

你也可以通过调整对齐来解决：

.fc-daygrid-event {
  white-space: normal !important;
  align-items: normal !important;
}

演示：https://codepen.io/ADyson82/pen/poPaMBW

【讨论】：

这会对齐两个级别，但不会根据我的示例将第二行左对齐。（我只用white-space: normal在fullcal v3 中就能做到这一点
时间和标题在两个不同的 div 中，所以这可能是你能得到的最好的。无论如何，IMO 它看起来更整洁！
是的，你可能是对的。问题是，如果您有一个超长标题，其中包含运行多行的附加信息，那么在该时间 div 下会浪费大量空间。
而且时间 div 不是固定的，而是根据时间的长度进行调整，这意味着标题没有在同一个框中对齐……这也看起来有点草率。
它永远不会:-)。但我想至少如果你要为他们提供描述和弹出选项，他们至少有机会尝试一下。如果你不这样做，他们就不能。

【解决方案2】：

为了把它分成两行，这里有一个解决方法

.fc-daygrid-event{
  display: block!important;
  padding-left: 15px!important;
}
.fc-daygrid-event {
  white-space: normal !important;
  align-items: normal !important;
}
.fc-daygrid-event-dot{
  display: inline-flex;
  position: absolute;
  left: 0px;
  top: 6px;
}
.fc-event-time,.fc-event-title{
  display: inline;
}

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

document.addEventListener("DOMContentLoaded", function () {
  var calendarEl = document.getElementById("calendar");

  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
      center: "title",
      left: "prevYear,prev,next,nextYear"
    },
    events: [
      {
        title: "Friday Throwdown",
        start: new Date(y, m, 2, 10, 30),
        end: new Date(y, m, 2, 11, 30),
        allDay: false
      },
      {
        title: "Marketing Meeting",
        start: new Date(y, m, 2, 11, 30),
        end: new Date(y, m, 2, 12, 30),
        allDay: false
      },
      {
        title: "Production Meeting",
        start: new Date(y, m, 2, 15, 30),
        end: new Date(y, m, 2, 16, 30),
        allDay: false
      }
    ]
  });

  calendar.render();
});

.fc-daygrid-event {
  white-space: normal !important;
  align-items: normal !important;
}

.fc-daygrid-event{
  display: block!important;
  padding-left: 15px!important;
}
.fc-daygrid-event-dot{
  display: inline-flex;
position: absolute;
left: 0px;
top: 6px;
}
.fc-event-time,.fc-event-title{
  display: inline;
}
.fc-daygrid-day{
  overflow:hidden;
}

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>

如果你想隐藏溢出的文字

.fc-daygrid-day{
  overflow:hidden;
}

【讨论】：

关闭，但我不希望任何超出日期网格的内容，我希望将标题包含在日期网格块中。
你的意思是溢出的文字？
我添加了css来隐藏日网格内溢出的文本。请检查你的意思是什么？ @Trees4theForest
不是隐藏的，而是包裹的，所以它显示了所有的标题，而不会溢出日期网格，或者被切断。不过也差不多了！
你还需要根据宽度切割这个词吗？我认为这是我们可以用 css 达到的接近程度。除此之外，我们可以使用媒体查询在较小屏幕的不同行中实现这一点