我正在使用FullCalendar 4.3.1。日历显示正确，但我无法动态添加事件。我收到此错误： 使用 JQuery 时：
类型错误： $(...(。fullCalendar 不是一个函数
我在没有 JQuery 的情况下尝试它，但仍然无法正常工作：
TypeError： document.getElementById(...(.fullCalendar 不是一个函数
我有这个页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href = 'libs/fullcalendar/core/main.css' rel = 'stylesheet' />
<link href = 'libs/fullcalendar/daygrid/main.css' rel = 'stylesheet' />
<link href = 'libs/fullcalendar/timegrid/main.css' rel = 'stylesheet' />
<link href = 'libs/fullcalendar/list/main.css' rel = 'stylesheet' />
<script src='libs/fullcalendar/core/main.js'></script>
<script src='libs/fullcalendar/core/locales/sk.js'></script>
<script src='libs/fullcalendar/interaction/main.js'></script>
<script src='libs/fullcalendar/daygrid/main.js'></script>
<script src='libs/fullcalendar/timegrid/main.js'></script>
<script src='libs/fullcalendar/list/main.js'></script>
<script src='libs/fullcalendar/moment/main.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['moment', 'interaction', 'dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
locale: 'sk'
});
calendar.render();
});
function addEventToCalendar()
{
$('#calendar').fullCalendar('renderEvent', {
title: 'dynamic event',
start: new Date(),
allDay: true
});
//not working too
/*
document.getElementById('calendar').fullCalendar('renderEvent', {
title: 'dynamic event',
start: new Date(),
allDay: true
});
*/
}
</script>
</head>
<body>
<div style="margin-top: 10px">
<a onclick="addEventToCalendar()">
<i class="fas fa-calendar-alt calendarButtonText"></i> Add event
</a>
</div>
<div id='calendar' ></div>
</body>
</html>问题出在哪里？
我认为您没有正确访问日历对象。
<!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.3.1/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.css' rel='stylesheet' />
<script src='/assets/demo-to-codepen.js'></script>
<script src='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.3.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'>
</div>
<div id='calendar'></div>
</body>
</html>查看此演示页面上的源代码： https://fullcalendar.io/docs/Calendar-addEvent-demo