嗨，我正在关注https://fullcalendar.io/v4来构建我的js日历。我试图通过点击日历来创建一个新的事件，然后调用函数addEvent。我在哪里以及如何调用函数addEvent？你能举个例子吗？关于删除事件，我也有同样的问题。以下是我所做的，每次点击我都会添加一个事件，看看它是否有效。它不起作用。
var event1 = [
{
title: 'MyEvent',
start: '2020-03-03T13:00:00',
end:'2020-03-03T14:00:00'
},
]
var calendar = new FullCalendar.Calendar(calendarEl, {
eventClick: function (info) {
calendar.addEvent( event1)
},
plugins: ["interaction", "timeGrid"],
header: {
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
},
defaultDate: currentDate,
navLinks: true,
businessHours: {
startTime: "08:00",
endTime: "18:00",
},
editable: true,
weekends: false,
allDaySlot: false,
locale: "en",
events:
[
{
title: 'MyEvent',
start: '2020-03-03T13:00:00',
end:'2020-03-03T14:00:00'
},
]
});
calendar.render();
我查看了main.js中的函数addEvent，看起来id什么都没做，tuple得到了nul，函数(addEvent(也返回了nul！
Calendar.prototype.addEvent = function (eventInput, sourceInput) {
if (eventInput instanceof EventApi) {
var def = eventInput._def;
var instance = eventInput._instance;
// not already present? don't want to add an old snapshot
if (!this.state.eventStore.defs[def.defId]) {
this.dispatch({
type: 'ADD_EVENTS',
eventStore: eventTupleToStore({ def: def, instance: instance }) // TODO: better util for two args?
});
}
return eventInput;
}
var sourceId;
if (sourceInput instanceof EventSourceApi) {
sourceId = sourceInput.internalEventSource.sourceId;
}
else if (sourceInput != null) {
var sourceApi = this.getEventSourceById(sourceInput); // TODO: use an internal function
if (!sourceApi) {
console.warn('Could not find an event source with ID "' + sourceInput + '"'); // TODO: test
return null;
}
else {
sourceId = sourceApi.internalEventSource.sourceId;
}
}
var tuple = parseEvent(eventInput, sourceId, this);
if (tuple) {
this.dispatch({
type: 'ADD_EVENTS',
eventStore: eventTupleToStore(tuple)
});
return new EventApi(this, tuple.def, tuple.def.recurringDef ? null : tuple.instance);
}
return null;
};
你有关于如何使用addEvent函数的例子吗
这里的问题是event1是一个数组，而不是一个对象。addEvent函数需要一个对象作为输入，而不是一个列表/数组。
将其更改为普通对象：
var event1 =
{
title: 'MyEvent',
start: '2020-03-03T13:00:00',
end:'2020-03-03T14:00:00'
}
(没有将对象封装在数组中的[和](，原始代码应该可以正常工作。
好吧，我从fullcalendar网站上取了一个例子，它很有效：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>
Add an event dynamically - Demos | FullCalendar
</title>
<link href='/assets/demo-to-codepen.css' rel='stylesheet' />
<style>
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
}
</style>
<link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css' rel='stylesheet' />
<script src='/assets/demo-to-codepen.js'></script>
<script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth',
header: {
center: 'addEventButton'
},
customButtons: {
addEventButton: {
text: 'add event...',
click: function() {
var dateStr = prompt('Enter a date in YYYY-MM-DD format');
var date = new Date(dateStr + 'T00:00:00'); // will be in local time
if (!isNaN(date.valueOf())) { // valid?
calendar.addEvent({
title: 'dynamic event',
start: date,
allDay: true
});
alert('Great. Now, update your database...');
} else {
alert('Invalid date.');
}
}
}
}
});
calendar.render();
});
</script>
</head>
<body>
<div class='demo-topbar'>
<button data-codepen class='codepen-button'>Edit in CodePen</button>
Click the "add event..." button
</div>
<div id='calendar'></div>
</body>
</html>