FullCalendar 3.10：如何将月视图跨日期事件拆分为单独块？

要把跨多天的事件（比如2019-04-01到2019-04-04）在月视图显示为每天独立的事件块，而不是拉伸的连续块，核心思路是把单个跨天事件拆分成多个单日事件，让FullCalendar每天都渲染一个独立的事件条目。

具体实现步骤 #

你可以在PHP端生成事件列表的时候，添加一个事件拆分的逻辑，把跨天的事件拆解成每一天的独立事件：

1. 先写一个用于拆分跨天事件的辅助函数：

function splitMultiDayEvent($event) {
    $eventsCollection = [];
    $eventStart = new \DateTime($event->start_date . ' ' . $event->start_time);
    $eventEnd = new \DateTime($event->end_date . ' ' . $event->end_time);

    // 事件在同一天，直接返回原事件
    if ($eventStart->format('Y-m-d') === $eventEnd->format('Y-m-d')) {
        $eventsCollection[] = Calendar::event(
            $event->name,
            false,
            $eventStart,
            $eventEnd,
            $event->id,
            [
                'color' => '#f05050',
                'slug' => $event->slug,
                'url' => 'event/' . $event->slug,
            ]
        );
        return $eventsCollection;
    }

    // 循环拆分每一天的事件
    $currentDay = clone $eventStart;
    while ($currentDay <= $eventEnd) {
        // 确定当天事件的结束时间：最后一天用原事件结束时间，否则用当天23:59:59
        $dayEnd = clone $currentDay;
        if ($currentDay->format('Y-m-d') === $eventEnd->format('Y-m-d')) {
            $dayEnd = $eventEnd;
        } else {
            $dayEnd->setTime(23, 59, 59);
        }

        // 添加当天的事件到集合
        $eventsCollection[] = Calendar::event(
            $event->name,
            false,
            $currentDay,
            $dayEnd,
            $event->id, // 保留原事件ID，确保点击时指向同一个详情页
            [
                'color' => '#f05050',
                'slug' => $event->slug,
                'url' => 'event/' . $event->slug,
            ]
        );

        // 跳到下一天的同一时间点
        $currentDay->modify('+1 day');
    }

    return $eventsCollection;
}

2. 替换原来的事件添加逻辑：

// 不再直接把原事件加到$event_list，而是先拆分
$splitEvents = splitMultiDayEvent($event);
foreach ($splitEvents as $singleDayEvent) {
    $event_list[] = $singleDayEvent;
}

原理说明 #

FullCalendar 3.x的月视图中，跨天的定时事件默认会渲染成横跨多天的拉伸块。通过把一个跨天事件拆分成多个单日事件，每个事件对应当天的时间段，FullCalendar就会在每个日期单元格里渲染独立的事件块，和普通单日事件的显示效果一致。

另外，我们保留了原事件的ID、链接和样式，所以用户点击任意一天的事件块，都会跳转到同一个事件详情页，不会影响原有交互逻辑。

内容的提问来源于stack exchange，提问作者Redzwan Latif