【发布时间】:2019-10-01 01:15:08
【问题描述】:
问题: 我正在使用 FullCalendar 4 我想创建一个“约会日历”,并且我正在使用 rrule 来保存可供选择的可用空间。
如果我为某个日期添加一个新约会,我想删除现有的可用空间并插入一个新事件。
喜欢: 开始时间:2019-10-10T10:00 标题:空闲空间
开始:2019-10-10T10:00 标题:为客户屏蔽
第一个应该消失,第二个应该显示。
现在同时显示 2 个事件。
我该如何解决这个问题?
编辑:
所以,第一个事件是使用 rrule,它每周一、周二和周五重复。
但我在星期二早上 7 点也有一个活动(第二个)。现在,我想在这个日期使用 rrule 删除事件。
我该怎么做?
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list', 'rrule'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
defaultDate: '2019-09-12',
editable: true,
events: [
{
"title": "Free",
rrule: {
freq: 'weekly',
byweekday: ['mo', 'tu', 'fr'],
dtstart: '2019-09-02T07:00',
until: '2022-06-01'
},
},
{
"title": "Blocked",
"type": "call",
"start": "2019-09-03T07:00"
}
],
eventTimeFormat: { // like '14:30:00'
hour: '2-digit',
minute: '2-digit',
hour12: false
},
eventColor: '#378006',
eventClick: function (info) {
alert('Event: ' + info.event.start);
alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
alert('View: ' + info.view.type);
// change the border color just for fun
info.el.style.borderColor = 'red';
},
});
calendar.render();
});
【问题讨论】:
-
使用事件来表示空闲时间并不是一个好主意。一个空闲的位置应该由一个事件的缺席来表示。请参阅此答案以获得更好的模式:stackoverflow.com/a/58164691/5947043
-
感谢您的回复,但这不是我想要的方式。我只想展示这样的空闲插槽(免费:蓝色,占用:橙色)imgur.com/0VJ70k4 - 知道如何实现这一点吗?
-
将日历的默认背景颜色更改为蓝色,则可用空间将变为蓝色。通过使用事件来做你所要求的事情会产生比它解决的问题更多的问题
-
只是另一个问题,我怎样才能删除重复的事件?我的意思是在一个 startTime 上发生 2 个事件。我只想显示一个。
-
由于我不知道事件是如何到达那里的,所以我无法真正告诉您如何删除它们。我需要适当的示例数据和日历代码才能理解问题(即问题的minimal, reproducible example)。
标签: javascript fullcalendar fullcalendar-4 rrule