[英]Duplicating event in FullCalendar Scheduler 4.0.1 using calendar.AddEvent
我試圖向我的完整日歷應用程序添加功能,當用戶單擊某個事件時,它將復制該事件(稍后再移動)。
問題在於,重復的事件雖然存在,但不顯示。
起初,我認為這可能是resourceID
問題; 但是,我通過添加資源ID屬性來消除這種恐懼。 我真的不確定這是什么問題,因為兩個元素在功能上都是相同的(盡管它們是用不同的ID制成的)。
我的代碼示例是(復制塊標記為//Duplication
):
<!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: [
{
id: "1",
resourceId: "a",
start: "2019-03-19T08:00:00",
end: "2019-03-07T07:00:00",
title: "event 1"
},
{
id: "2",
resourceId: "b",
start: "2019-03-19T10:00:00",
end: "2019-03-07T22:00:00",
title: "event 2"
}
],
// Duplication
eventClick: function(arg) {
dupedEvent = calendar.addEvent({
title: arg.event.title,
start: arg.event.start,
end: arg.event.end,
id: Math.random(),
resourceIds: arg.event.resourceIds
});
console.log("Orginial: ", 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>
如果有人想看一下,可以使用的Codepen: https ://codepen.io/anon/pen/JzBwwj?editors = 0010
如果查看正在記錄的對象,則重復項沒有resourceIds,如果嘗試記錄arg.event.resourceIds
,則該對象是未定義的,因此不會在重復項上進行設置。 那就是它們沒有被渲染的原因。 它們與資源無關。
您可以使用事件對象上的方法getResources從事件中獲取資源。 那將是正確的方法,但是我確實設法使其從arg.event._def.resourceIds
渲染設置resourceIds。
建議的解決方案:
dupedEvent = calendar.addEvent({
title: arg.event.title,
start: arg.event.start,
end: arg.event.end,
id: Math.random(),
resourceIds: arg.event.getResources().map(resource => resource.id)
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.