FullCalendar Scheduler 4.0.1：calendar.AddEvent复制事件无法显示

我帮你找到了两个导致复制事件不显示的关键问题，咱们一步步来修正：

问题1：错误使用了多资源关联属性 #

你在复制事件时用了resourceIds（复数），但在当前的Resource Timeline视图中，单个事件关联单个资源应该用**单数的resourceId**属性。resourceIds是用于事件关联多个资源的场景，用在这里会让FullCalendar无法正确识别复制事件所属的资源行，自然就显示不出来。

问题2：原事件的日期逻辑错误 #

你代码里原事件的end日期早于start日期（比如event1的start是2019-03-19，end却是2019-03-07），这种无效的日期范围也会导致事件渲染异常，复制后的事件继承了这个错误日期，同样无法显示。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../packages/core/main.css' rel='stylesheet' />
<link href='../packages/daygrid/main.css' rel='stylesheet' />
<link href='../packages/timegrid/main.css' rel='stylesheet' />
<link href='../packages/list/main.css' rel='stylesheet' />
<link href='../packages/timeline/main.css' rel='stylesheet' />
<link href='../packages/resource-timeline/main.css' rel='stylesheet' />
<script src='../packages/core/main.js'></script>
<script src='../packages/interaction/main.js'></script>
<script src='../packages/daygrid/main.js'></script>
<script src='../packages/timegrid/main.js'></script>
<script src='../packages/list/main.js'></script>
<script src='../packages/timeline/main.js'></script>
<script src='../packages/resource-common/main.js'></script>
<script src='../packages/resource-timeline/main.js'></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ["resourceTimeline"],
now: "2019-03-19",
header: {
left: "today prev,next",
center: "title",
right: "resourceTimelineDay,resourceTimelineWeek"
},
aspectRatio: 1.6,
defaultView: "resourceTimelineDay",
resources: [
{ id: "a", title: "Auditorium A" },
{ id: "b", title: "Auditorium B" }
],
events: [
// 修正原事件的end日期，确保晚于start
{ id: "1", resourceId: "a", start: "2019-03-19T08:00:00", end: "2019-03-19T12:00:00", title: "event 1" },
{ id: "2", resourceId: "b", start: "2019-03-19T10:00:00", end: "2019-03-19T14:00:00", title: "event 2" }
],
// Duplication
eventClick: function(arg) {
dupedEvent = calendar.addEvent({
title: `Copy of ${arg.event.title}`, // 加上标识方便区分原事件和复制事件
start: arg.event.start,
end: arg.event.end,
id: `copy-${Math.random().toString(36).substr(2,9)}`, // 生成更规范的随机ID
resourceId: arg.event.resourceId // 改用单数的resourceId绑定资源
});
console.log("Original: ", arg.event);
console.log("Duplicate: ", dupedEvent)
}
});
calendar.render();
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

额外说明 #

• 给复制的事件加了Copy of 前缀，方便你直观区分原事件和复制事件；
• 生成了更规范的随机ID，避免潜在的ID冲突；
• 修正后的日期范围符合逻辑，确保事件能正常渲染。

现在点击原事件，复制出来的事件就会显示在对应的资源行上，并且可以正常拖动调整位置啦。

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