求助：为Fullcalendar的renderEvent添加自定义字段

没问题，这事儿其实挺 straightforward 的，咱一步步来搞定它：

首先得确认你的后端输出已经包含了自定义字段——从你贴的PHP代码来看，你已经把job_type加到了事件数组里，只要最后用echo json_encode($events);输出JSON，FullCalendar会自动把这些额外字段存到事件对象里，不用额外配置。

1. 手动调用renderEvent时传入自定义字段 #

如果你是手动创建事件并调用renderEvent添加到日历，直接把自定义字段塞进事件对象里就行，比如：

// 假设你要添加一个新事件
calendar.renderEvent({
  start: '2024-05-20 09:00:00',
  end: '2024-05-20 11:00:00',
  title: 'REG-456',
  job_type: 'Repair', // 你的自定义字段
  id: '789'
}, true); // 第二个参数设为true会把事件持久化到日历的数据源中，可选

2. 在日历中展示/使用自定义字段 #

如果要把自定义字段展示在事件卡片上，或者在交互（比如点击事件）中使用它，FullCalendar提供了回调函数来实现：

示例1：在事件卡片上显示job_type #

用最新版推荐的eventContent回调（旧版本可以用eventRender），自定义事件的HTML内容：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    events: "workshopview/functions.php?act=loadAllEvents",
    eventContent: function(info) {
      // 把自定义字段job_type加到事件标题下方
      return {
        html: `
          <div class="fc-title">${info.event.title}</div>
          <div class="fc-small-text">${info.event.extendedProps.job_type}</div>
        `
      };
    }
  });
  calendar.render();
});

注意：FullCalendar会把所有非标准字段放在event.extendedProps对象里，新版本也支持直接访问event.job_type，但用extendedProps兼容性更好。

示例2：点击事件时获取自定义字段 #

在eventClick回调里可以直接拿到自定义字段：

eventClick: function(info) {
  alert(`该事件的工单类型：${info.event.extendedProps.job_type}`);
}

3. 后端代码补全提醒 #

确保你的PHP代码最后输出了完整的JSON，并且所有需要的自定义字段都被加入数组：

while($row= mysqli_fetch_array($res)){
    $events[] = array (
        'start' => date('Y-m-d H:i:s', strtotime($row['event_start'])),
        'end' => date('Y-m-d H:i:s', strtotime($row['event_end'])),
        'title' => $row['reg_no'],
        'job_type'=>$row['job_type'],
        'id'=>$row['booking_id'], // 补全你的id字段
        // 其他需要的自定义字段都可以在这里添加，比如'customer_name'=>$row['customer_name']
    );
}
// 必须输出JSON格式
header('Content-Type: application/json');
echo json_encode($events);
exit;

内容的提问来源于stack exchange，提问作者Fahad.ag