如果开始时间在 22:00 至 24:00 之间，则以月份模式显示 2 天的完整日历 4.0 事件

Question

在完整日历 4.0 中，事件的时间为： “start”：“2020-JULY-09 23:40”，在月份模式下占用 2 个单元格 july-08 和 July-9th，如附图所示，在日模式下还包括前一天的事件22:00 至 24:00 显示在次日 12:00 AM 。我们怎样才能避免这种情况，特别是在月份模式下，我什至尝试过开始和结束，其中一个论坛建议使用 eventsfterrender 我们可以实现这一点，这是 fullcalendar 的一项功能。请推荐。

Answer 1

你说

活动时间：“start”：“2020-JULY-09 23:40”

和

22:00 至 24:00 之间

也将于第二天上映。

从您所写的内容来看，这些活动似乎没有定义结束日期/时间。

如果您没有指定结束日期，则 fullCalendar 将为您的事件提供标准的时间长度（或持续时间）。根据 https://fullcalendar.io/docs/defaultTimedEventDuration，此时间默认设置为 1 小时。

因此，任何开始日期为 23:00 或之后的活动都会有一个默认结束时间，该时间会进入第二天。 （我不确定你说的“从 22:00 开始”——你的意思是“23:00”吗？）

因此，为了避免这种情况，您可以更改

defaultTimeEventDuration

，或者当然，如果您设置特定的结束日期，您可以更好地控制活动的长度。 （您已经提到“我也尝试过开始和结束”，但不幸的是，从您的描述来看，不清楚在这种情况下您到底尝试了什么以及效果是什么。但是，如果您愿意，可以通过添加来改变行为结束日期。）

Answer 2

我知道我可能会迟到回答，但遇到了类似的问题，我的解决方法可能会为某人节省一些时间。简而言之，我们有一个在日历中显示外发电子邮件的应用程序。这里的问题是，我们实际上没有结束日期，只有“开始”日期。例如，具有相似的日期时间：

2024-06-27T23:50:00

。在这种情况下，该事件也会溢出到第二天，这在我们的场景中是不正确的，因为该特定电子邮件是在 27 日发送的，与 28 日无关。所提出的

defaultTimeEventDuration

和其他解决方案在一定程度上有效，但总是存在一些边缘情况。

解决方法是根据开始日期 + 1 毫秒创建

end

日期。这也将涵盖大多数边缘情况，因为它甚至适用于 23:59:59。唯一不起作用的情况是 1 毫秒溢出到另一天。但在我们的例子中，它不必那么精确，因此我们发现这种解决方法是可以接受的。

您可以在客户端或服务器端执行此操作，我们正在客户端调整

end

日期，因此例如我们使用

dayjs

，但任何其他库或当然vanila js也可以实现此目的。

const startDate = '2024-06-27T23:59:59';
const endDateObject = dayjs(new Date(startDate)).add(1, 'ms').toDate();

或者 vanila js（注意，我实际上没有测试这个，所以可能需要调整）：

var startDate = '2024-06-27T23:59:59+00:00';
var endDateObject = new Date(new Date(startDate).getTime() + 1);

然后事件看起来像这样：

let newEvent = {
  id: 123,
  title: 'Event title',
  start: startDate,
  end: endDateObject.toISOString(true),
  // other props ...
}

顺便提一下，这是使用 React 使用 FullCalendar v5 进行测试的，但我想这也应该适用于其他地方。