调整画布大小时，如何防止 fullcalendar 将事件与 multiMonthPlugin 插件“组合”

Question

使用以下选项：

plugins: [multiMonthPlugin], initialView: 'multiMonthYear',

是否有一个选项可以“强制”日历始终至少显示两行事件？有 dayMaxEvents 和 dayMaxEventsRow 但它们仅限制每天/行的事件上限。我有一个问题，我的全日历每天可以有 0、1 或 2 个事件，并且我希望它始终显示这两个事件而不带 + 链接。现在发生的情况是，如果窗口足够大，我将看到这两个事件，但如果窗口太小，它就会开始将它们组合起来，并且这两个事件将成为“+2”事件，并带有用于展开它们的链接。

我尝试了几个选项，css 似乎不是这里的答案。我觉得也许我缺少一个选项，或者我的日历配置不正确，或者这个插件不能真正做到这一点。

编辑：我这里有一个codepen示例https://codepen.io/poljegui/pen/QWzZryB?editors=0010

请注意 6 月 6 日有两个活动，由于某些原因它们合并为一个活动，我想禁用它。这可能吗？

Answer 1

好吧，看起来 FullCalendar 库正在以某种方式根据滚动和页面宽度变化重新渲染页面。

因此，它不是使用现代方法（如 FlexBox 或 CSS Grid）从头开始动态构建的，而是根据窗口事件重新渲染自身。

在过去的 1 个小时里，我已经使用 React 构建涉足了它，它似乎不支持这样的功能，所以你必须依赖某种 hack（是的，不幸的是 CSS hack）。但我建议您使用

em

长度类型来适应不同屏幕的字体和大小变化（以及未来的变化）。

这是我的工作代码（但它是在 React 中，但具有相同的配置）：

import React from 'react'
import FullCalendar from '@fullcalendar/react'
import multiMonthPlugin from '@fullcalendar/multimonth'

export default class Calendar extends React.Component {
  render() {
    return (
      <>
        <FullCalendar
          plugins={[multiMonthPlugin]}
          initialView="multiMonthYear"
          initialEvents={
            [
              {
                date: new Date(),
                title: "new day"
              },
              {
                date: new Date(),
                title: "new day"
              },
            ]
          }
          dayMaxEvents={2}
          dayMaxEventRows={2}
        />
        <style global jsx>{`
        .fc-daygrid-day-frame {
          min-height: 5em !important;
        }
        `}</style>
      </>
    )
  }
}

在你的情况下，你只需要添加一个全局CSS，如下所示：

<style>
  .fc-daygrid-day-frame {
    min-height: 5em !important;
  }
</style>