FullCalendar在呈现时失去了交互性，我认为这与在web查看器步骤中执行javascript有关。
FullCalendar在呈现时失去了交互性，我认为这与在web查看器步骤中执行javascript有关。
提问于 2022-01-20 11:17:52
我在这里使用了Frudens日历作为模板，它使用了完整的日历。我对原始文件进行了很大的修改，它运行得很好。
此后，我一直试图与现有的解决方案合并，因此遵循所有关于在哪个顺序中执行所有操作的指导。它所有的功能都是正确的，除非当日历被呈现时，它现在失去了交互性。对于资源时间线，资源正确地显示和显示事件，但是顶部的导航按钮在日期，下一个月等等，现在什么都不做。我可以移动一个事件，该事件更新表，但在离开布局并返回到它之前不会更新日历界面。我在日历上有一个刷新按钮，但是和其他导航按钮一样，它不工作。这是完整的日历html：
<!DOCTYPE html>
<html>
<head>
<title>calendar</title>
<meta charset="utf-8" />
<link
href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"
rel="stylesheet"
/>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.3.2/main.min.css" rel="stylesheet"/>
<linkhref="/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.3.2/main.min.js"></script>
<script>
var calendar;
document.addEventListener("DOMContentLoaded", function () {
var calendarEl = document.getElementById("calendar");
//plugins: ['interactionPlugin', 'timeGrid', 'dayGrid', 'resourceTimeline'],
calendar = new FullCalendar.Calendar(calendarEl, {
// --------------------
// FullCalendar Scheduler License
// https://fullcalendar.io/license/premium
// --------------------
schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
// --------------------
// Overall Display
// --------------------
// plugins:[interactionPlugin],
headerToolbar: {
left: "refresh prev,next",
center: "title",
right:
"resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth,resourceTimelineYear resourceTimeline160Day resourceTimeGridDay",
},
customButtons: {
refresh: {
text: "Refresh",
click: function () {
FileMaker.PerformScript("T01_render_calendar", "");
},
},
},
height: window.innerHeight - 20,
aspectRatio: 1.8,
expandRows: false,
handleWindowResize: true,
windowResizeDelay: 100,
windowResize: function (arg) {
calendar.setOption("height", window.innerHeight - 20);
},
// --------------------
// Views
// --------------------
views: {
resourceTimelineDay: {
buttonText: "D",
slotDuration: "00:30:00",
slotMinTime: "00:00",
slotMaxTime: "24:00",
// titleFormat: { day:'2-digit, month: 'short'},
slotLabelFormat: [
{ weekday: 'long' },
{hour: 'numeric', minute: '2-digit', omitZeroMinute: true, meridiem: 'short'},
// // { hour: "2-digit", minute:"", meridiem },
// { hour: "2-digit", minute: "2-digit" },
],
},
resourceTimelineWeek: {
buttonText: "W",
slotDuration: "03:00",
slotMinTime: "00:00",
slotMaxTime: "24:00",
duration: { days: 7 },
// titleFormat: { day:'2-digit, month: 'short'},
weekText:"W",
slotLabelFormat: [
{ week: 'short'}, // top level of text
{ weekday: 'short', day:'2-digit' },
{hour: 'numeric', minute: '2-digit', omitZeroMinute: true, meridiem: 'short'},
// // { hour: "2-digit", minute:"", meridiem },
// { hour: "2-digit", minute: "2-digit" },
],
},
resourceTimelineMonth: {
buttonText: "M",
},
resourceTimelineYear: {
buttonText: "Y",
},
resourceTimeline160Day: {
buttonText: "D(160)",
slotDuration: "06:00",
slotMinTime: "00:00",
slotMaxTime: "24:00",
type: "resourceTimeline",
duration: { days: 160 },
},
resourceTimeGridDay: {
buttonText: "D",
slotDuration: "00:30:00",
slotMinTime: "00:00",
slotMaxTime: "24:00",
},
},
initialView: "resourceTimelineDay",
// --------------------
// Date & Time
// --------------------
slotMinTime: "00:00",
slotMaxTime: "24:00",
// scrollTime: "09:00",
firstDay: 1,
nowIndicator: true,
// --- Date Nav Links ---
navLinks: false, // can click day/week names to navigate views
// navLinkDayClick: function (date, jsEvent) {
// alert(date);
// calendar.changeView("resourceTimelineDay", date);
// FileMaker.PerformScript("datePicker_select", dateConvert(date));
// },
// navLinkWeekClick: function (weekStart, jsEvent) {
// calendar.changeView("resourceTimelineWeek", weekStart);
// FileMaker.PerformScript(
// "datePicker_select",
// dateConvert(weekStart)
// );
// },
// --- Week Numbers ---
weekNumbers: true,
// --- Date Clicking & Selecting ---
selectable: true,
selectMirror: true,
// dateClick: function (arg) {
// alert("click");
// alert(arg.dateStr);
// },
select: function (arg) {
const argJson = JSON.stringify(arg);
FileMaker.PerformScript("fullCalendar_select", argJson);
calendar.unselect();
},
// --------------------
// Events
// --------------------
// --- Event Clicking & Hovering ---
editable: true,
eventClick: function (arg) {
const argJson = JSON.stringify(arg);
FileMaker.PerformScript("fullCalendar_eventClick", argJson);
},
// --- Event Dragging & Resizing ---
eventResourceEditable: true,
eventDrop: function (arg) {
const argJson = JSON.stringify(arg);
FileMaker.PerformScript("fullCalendar_eventDrop", argJson);
},
eventResize: function (arg) {
const argJson = JSON.stringify(arg);
FileMaker.PerformScript("fullCalendar_eventResize", argJson);
},
// --- Event Popover ---
dayMaxEvents: true, // allow "more" link when too many events
// --------------------
// Resources
// --------------------
resourceOrder: "title",
resourceAreaWidth: "15%",
// --------------------
// International
// --------------------
locale: "en",
timeZone: "Europe/London",
});
calendar.render();
});
function setResourcesEventSources(fmParams) {
const obj = JSON.parse(fmParams);
if (obj.option) {
for (let key in obj.option) {
calendar.setOption(key, obj.option[key]);
}
}
calendar.setOption("resources", obj.resources);
calendar.setOption("eventSources", obj.eventSources);
calendar.gotoDate(obj.gotoDate);
}
function dateConvert(date) {
const y = date.getFullYear();
const m = date.getMonth() + 1;
const d = date.getDate();
return y + "-" + m + "-" + d;
}
</script>
<style>
html,
body {
overflow: hidden; /* don't do scrollbars */
font-family: Avenir, Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
},
</style>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
†我认为问题就在呈现日历脚本中的某个地方：脚本片段
任何帮助都将不胜感激。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70785249
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号