FullCalendar v5：如何在日程事件中显示预订人及会议主题

方法一：后端拼接字段（推荐，逻辑更简洁） #

在你的Laravel控制器的allEvent方法中，直接将name和title拼接成新的title字段返回：

public function allEvent()
{
    // 从数据库查询预订数据
    $bookings = \App\Models\Booking::select('id', 'name', 'title', 'start_time', 'end_time', 'room_id')->get();
    
    // 转换为FullCalendar需要的格式，拼接姓名和主题
    $events = $bookings->map(function($item) {
        return [
            'id' => $item->id,
            'title' => $item->name . ' ' . $item->title, // 核心：拼接姓名和主题
            'start' => $item->start_time,
            'end' => $item->end_time,
            'resourceId' => $item->room_id, // 对应会议室的resourceId
            // 其他需要的字段（比如颜色等）
        ];
    });
    
    return response()->json($events);
}

这样前端无需修改，FullCalendar会直接显示拼接后的标题。

方法二：前端自定义事件内容 #

如果不想修改后端，可通过FullCalendar的eventContent配置项自定义显示内容：

修改你的前端FullCalendar配置，添加eventContent：

var calendar = new FullCalendar.Calendar(calendarEl, {
    // 原有的配置项...
    locale: 'en',
    scrollTime: '00:00',
    editable: true,
    // ...其他配置
    
    events: "{{route('allEvent')}}",
    // 添加以下自定义内容配置
    eventContent: function(info) {
        // 处理空值：如果name不存在，只显示title
        var showText = info.event.extendedProps.name 
            ? `${info.event.extendedProps.name} ${info.event.title}` 
            : info.event.title;
        // 返回要渲染的HTML
        return {
            html: `<div class="fc-event-title">${showText}</div>`
        };
    }
});

注意事项： #

• 确保后端返回的JSON数据中包含name字段，FullCalendar会将非标准字段存入event.extendedProps中
• 后端返回的示例JSON格式：

[
    {
        "id": 1,
        "title": "产品发布会",
        "name": "李四",
        "start": "2024-05-21T14:00:00",
        "end": "2024-05-21T16:00:00",
        "resourceId": "b"
    }
]

排查要点 #

1. 打开浏览器控制台，查看{{route('allEvent')}}接口返回的JSON，确认是否包含name字段
2. 如果用方法二，检查info.event.extendedProps.name是否能正确获取到值
3. 若样式有问题，可通过自定义CSS调整.fc-event-title的样式

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