FullCalendar添加资源后无法创建事件的解决及通用添加方法

一、如何在FullCalendar中添加事件 #

有三种常用实现方式：

• 初始化静态添加：在FullCalendar配置的events数组中直接定义事件对象，需包含start、end、title等核心字段，资源视图下还需指定resourceId。
• 动态插入事件：使用renderEvent方法在任意时机向日历中添加事件，示例：

  $("#calendar").fullCalendar("renderEvent", {
    title: "临时会议",
    start: "2023-12-01T14:00:00",
    end: "2023-12-01T16:00:00",
    resourceId: "a" // 资源视图下必填
  }, true); // 第二个参数为true表示事件会被持久化
  

• 用户交互创建：监听select事件，在用户点击或选择日历区域后触发事件创建流程，这也是你代码中采用的方式，需适配资源视图的特殊要求。

二、资源视图下点击无响应的问题解决 #

你的代码存在两个核心问题，修复后即可实现点击任意区域创建事件的功能：

1. 语法错误导致日历初始化失败 #

在views配置块末尾多了一个多余的反引号（`），这会直接触发JavaScript语法报错，导致日历无法正常加载。
错误代码片段：

views: {
  timelineThreeDays: {
    type: 'timeline',
    duration: { days: 3 } } },` // 此处反引号多余，需删除

修复后：

views: {
  timelineThreeDays: {
    type: 'timeline',
    duration: { days: 3 } 
  }
},

2. 资源视图下创建事件未关联资源ID #

在带资源列的timeline视图中，事件必须指定resourceId才能显示到对应资源列中，且select事件在资源视图下会传递resource对象作为参数，需修改select函数捕获并使用该参数：

修改后的select事件代码：

select: function(start, end, jsEvent, view, resource) {
  var title = prompt("Event Content:");
  var eventData;
  if (title && resource) {
    eventData = {
      title: title,
      start: start,
      end: end,
      resourceId: resource.id // 关联选中的资源列
    };
    $("#calendar").fullCalendar("renderEvent", eventData, true);
  }
  $("#calendar").fullCalendar("unselect");
}

完整修复后的核心代码 #

$(function () {// document ready
  $('#calendar').fullCalendar({
    now: '2023-12-01',
    editable: true,
    droppable: true,
    allDaySlot: false,
    allDayDefault: false,
    navLinks: true,
    selectable: true,
    selectHelper: false,
    eventLimit: true,
    aspectRatio: 1.8,
    scrollTime: '00:00',
    header: {
      left: 'today prev,next',
      center: 'title',
      right: 'timelineDay'
    },
    defaultView: 'timelineDay',
    views: {
      timelineThreeDays: {
        type: 'timeline',
        duration: { days: 3 }
      }
    },
    resourceLabelText: 'Rooms',
    resources: [
      { id: 'a', title: 'Auditorium A' },
      { id: 'b', title: 'Auditorium B', eventColor: 'green' },
      { id: 'c', title: 'Auditorium C', eventColor: 'orange' },
      { id: 'd', title: 'Auditorium D', children: [
        { id: 'd1', title: 'Room D1' },
        { id: 'd2', title: 'Room D2', eventColor: 'green'  },
        { id: 'd3', title: 'Room D3', eventColor: 'orange' },
        { id: 'd4', title: 'Room D4' },
      ] },
      { id: 'e', title: 'Auditorium E', eventColor: 'green' },
      { id: 'f', title: 'Auditorium F', eventColor: 'red' },
      { id: 'g', title: 'Auditorium G', eventColor: 'yellow'  },
      { id: 'h', title: 'Auditorium H', eventColor: 'orange'  },
      { id: 'i', title: 'Auditorium I', eventColor: 'green' },
      { id: 'j', title: 'Auditorium J', eventColor: 'red'  },
      { id: 'k', title: 'Auditorium K', eventColor: 'orange'  },
      { id: 'l', title: 'Auditorium L', eventColor: 'yellow'  },
      { id: 'm', title: 'Auditorium M', eventColor: 'orange'  },
      { id: 'n', title: 'Auditorium N', eventColor: 'green' },
      { id: 'o', title: 'Auditorium O', eventColor: 'red'  }, 
      { id: 'z', title: 'Auditorium Z', eventColor: 'green' }
    ],
    events: [
      { id: '1', resourceId: 'b', start: '2023-12-01T02:00:00', end: '2023-12-01T05:00:00', title: 'event 1' },
      { id: '2', resourceId: 'c', start: '2023-12-01T05:00:00', end: '2023-12-01T11:00:00', title: 'event 2' },
      { id: '3', resourceId: 'd', start: '2023-11-06', end: '2023-11-08', title: 'event 3' },
      { id: '4', resourceId: 'd1', start: '2023-11-06', end: '2023-11-08', title: 'event 10' },
      { id: '5', resourceId: 'e', start: '2023-12-01T03:00:00', end: '2023-12-01T08:00:00', title: 'event 3' },
      { id: '6', resourceId: 'k', start: '2023-12-01T03:00:00', end: '2023-12-01T08:00:00', title: 'event 4' },
      { id: '7', resourceId: 'i', start: '2023-12-01T03:00:00', end: '2023-12-01T08:00:00', title: 'event 5' },
      { id: '8', resourceId: 'f', start: '2023-12-01T05:30:00', end: '2023-12-01T15:30:00', title: 'event 6' },
      { id: '9', resourceId: 'l', start: '2023-12-01T03:30:00', end: '2023-12-01T05:30:00', title: 'event 7' },
      { id: '10', resourceId: 'm', start: '2023-12-01T01:30:00', end: '2023-12-01T07:30:00', title: 'event 8' },
      { id: '11', resourceId: 'n', start: '2023-12-01T00:30:00', end: '2023-12-01T08:30:00', title: 'event 9' }
    ],
    select: function(start, end, jsEvent, view, resource) {
      var title = prompt("Event Content:");
      var eventData;
      if (title && resource) {
        eventData = {
          title: title,
          start: start,
          end: end,
          resourceId: resource.id
        };
        $("#calendar").fullCalendar("renderEvent", eventData, true);
      }
      $("#calendar").fullCalendar("unselect");
    },
    eventClick: function(calEvent) {
      console.log(calEvent)
      calEvent.title = "111";
      calEvent.start = "2023-11-20T10:00:23Z";
      calEvent.end = "2023-11-20T12:00:23Z";
      $("#calendar").fullCalendar("updateEvent", calEvent);
    }, 
  });  
});

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