我正在使用 FullCalendar 4.3.1 。日历显示正确，但是我无法动态添加事件。我收到此错误: 使用 JQuery 时:
TypeError: $(...).fullCalendar is not a function
我在没有 JQuery 的情况下尝试了它，但仍然无法工作:
TypeError: document.getElementById(...).fullCalendar is not a function
我有这个页面:
<!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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bbb7aabd98ecf6ebf6e9" rel="noreferrer noopener nofollow">[email protected]</a>/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e0e5fde3f6ede0c4b0aab7aab4" rel="noreferrer noopener nofollow">[email protected]</a>/main.min.css' rel='stylesheet' />
<script src='/assets/demo-to-codepen.js'></script>
<script src='https://unpkg.com/@fullcalendar/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e5e9f4e3c6b2a8b5a8b7" rel="noreferrer noopener nofollow">[email protected]</a>/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0460657d63766d6044302a372a34" rel="noreferrer noopener nofollow">[email protected]</a>/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
关于javascript - FullCalendar v4 - fullCalendar 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60235087/