ReferenceError: FullCalendar is not defined
ReferenceError: FullCalendar is not defined
我现在一直在尝试使用文档中提供的示例来实现全日历。当我尝试 运行 它时,我得到这个错误:
ReferenceError: FullCalendar is not defined
我知道这条消息是什么意思,但是我必须在哪里以及如何定义它?
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'list', 'googleCalendar' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,listYear'
},
displayEventTime: false, // don't show the time column in list view
googleCalendarApiKey: 'AIzaSyDU6o_4vQlJbLRI8Tb3TCnCRGi2GsiB***',
// US Holidays
events: 'en.usa#holiday@group.v.calendar.google.com',
eventClick: function(arg) {
// opens events in a popup window
window.open(arg.event.url, '_blank', 'width=700,height=600');
// prevents current tab from navigating
arg.jsEvent.preventDefault();
}
});
calendar.render(); });
我 16 岁 y/o,因此有点缺乏经验。所以如果这个问题看起来太简单了,我很抱歉。
感谢您的帮助。
我认为您没有导入 FullCalendar
源文件来使其工作。或者 css 或 js 文件的路径错误。我是自己做的,效果是这样的:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<link href='core/main.css' rel='stylesheet' />
<link href='daygrid/main.css' rel='stylesheet' />
<script src='core/main.js'></script>
<script src='daygrid/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ]
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
我的 html
文件位于 入门 的 fullcalendar/packages
中,您可以在此处找到包含所有源的 zip 文件:FullCalendar
您仍然可以在此页面找到 FullCalendar 的 CDN:Yarn (cdn example)
只需在顶部添加这个
declare var FullCalendar: any;
将此包含在您的 html 脚本之前。
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.3.0/main.min.js"></script>
我现在一直在尝试使用文档中提供的示例来实现全日历。当我尝试 运行 它时,我得到这个错误:
ReferenceError: FullCalendar is not defined
我知道这条消息是什么意思,但是我必须在哪里以及如何定义它?
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'list', 'googleCalendar' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,listYear'
},
displayEventTime: false, // don't show the time column in list view
googleCalendarApiKey: 'AIzaSyDU6o_4vQlJbLRI8Tb3TCnCRGi2GsiB***',
// US Holidays
events: 'en.usa#holiday@group.v.calendar.google.com',
eventClick: function(arg) {
// opens events in a popup window
window.open(arg.event.url, '_blank', 'width=700,height=600');
// prevents current tab from navigating
arg.jsEvent.preventDefault();
}
});
calendar.render(); });
我 16 岁 y/o,因此有点缺乏经验。所以如果这个问题看起来太简单了,我很抱歉。 感谢您的帮助。
我认为您没有导入 FullCalendar
源文件来使其工作。或者 css 或 js 文件的路径错误。我是自己做的,效果是这样的:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<link href='core/main.css' rel='stylesheet' />
<link href='daygrid/main.css' rel='stylesheet' />
<script src='core/main.js'></script>
<script src='daygrid/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ]
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
我的 html
文件位于 入门 的 fullcalendar/packages
中,您可以在此处找到包含所有源的 zip 文件:FullCalendar
您仍然可以在此页面找到 FullCalendar 的 CDN:Yarn (cdn example)
只需在顶部添加这个
declare var FullCalendar: any;
将此包含在您的 html 脚本之前。
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.3.0/main.min.js"></script>