如何在完整日历上立即显示所选事件的所有详细信息

我有以下使用fullcalendar的html页面：

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
editable: true,
headerToolbar: {
start: 'prev,next today',
center: 'title',
end: 'dayGridMonth,timeGridWeek,timeGridDay'
},
selectable: true, //can click to set event
selectMirror: true, // so it's solid 
unselectAuto: false, //if you click outside calendar, event doesn't disappear, but if you click inside calendar, event still disappears
editable: true,
eventStartEditable: true,
eventResizableFromStart: true,
eventDurationEditable: true,
select: function(selectionInfo) {
calendar.addEvent({
title: 'dynamic event',
start: selectionInfo.start,
end: selectionInfo.end //need these and not endTime/startTime, otherwise they won't re-render
});
}

});
calendar.render();
});

<!DOCTYPE html>
<html>
<head>
<title>Fullcalendar Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>

当日历在周视图中时，我在某个地方点击(只点击一次，什么都不做——这很重要(，就会创建一个30分钟的事件(开始和结束时间取决于你点击的位置(，我可以看到事件的开始和结束时间，但不能看到标题("动态事件"(。只有当我点击日历上的其他地方时，我才能看到上述活动的标题。我已经通过console.log语句(而不是在代码中(确认了标题实际上存在于javascript中的事件对象中，但有没有一种方法可以让标题只需单击一下就立即可见(所以可能需要在select函数中完成一些操作(？

您只需要在添加事件后运行calendar.unselect();，这样使选择可视化的元素(由于selectMirror选项，该元素是实心而非透明的(就不会覆盖在渲染的事件上。

在单击其他位置之前，选择不会自动清除(除非选项中有unselectAuto: true(。

相关文档：

https://fullcalendar.io/docs/Calendar-unselect

https://fullcalendar.io/docs/unselectAuto

演示：

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
editable: true,
headerToolbar: {
start: 'prev,next today',
center: 'title',
end: 'dayGridMonth,timeGridWeek,timeGridDay'
},
selectable: true, //can click to set event
selectMirror: true, // so it's solid 
unselectAuto: false, //if you click outside calendar, event doesn't disappear, but if you click inside calendar, event still disappears
editable: true,
eventStartEditable: true,
eventResizableFromStart: true,
eventDurationEditable: true,
select: function(selectionInfo) {
calendar.addEvent({
title: 'dynamic event',
start: selectionInfo.start,
end: selectionInfo.end //need these and not endTime/startTime, otherwise they won't re-render
});
calendar.unselect();
}

});
calendar.render();
});

<!DOCTYPE html>
<html>
<head>
<title>Fullcalendar Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>

相关内容

最新更新

热门标签：