Initialize with Script Tags
It’s possible to manually include the necessary <script> tags in the head of your HTML page and then initialize a calendar via browser globals. Leverage one of FullCalendar’s prebuilt bundles or include individual plugins
Standard Bundle
First, obtain the standard fullcalendar bundle in one of the following ways:
- Download: fullcalendar-6.1.11.zip
- CDN: jsdelivr
- NPM:
npm install fullcalendar
Then, write the following initialization code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
The fullcalendar bundle’s index.global(.min).js file includes the following packages:
@fullcalendar/core@fullcalendar/interaction(for date selecting, event dragging & resizing)@fullcalendar/daygrid(for month and dayGrid views)@fullcalendar/timegrid(for timeGrid views)@fullcalendar/list(for list views)@fullcalendar/multimonth(for multi-month views)
Premium Bundle
First, obtain the premium fullcalendar-scheduler bundle in one of the following ways:
- Download: fullcalendar-scheduler-6.1.11.zip
- CDN: jsdelivr
- NPM:
npm install fullcalendar-scheduler
Then, write the following initialization code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.11/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'resourceTimelineWeek'
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
You won’t need to include the fullcalendar-scheduler bundle AND the fullcalendar bundle. The fullcalendar-scheduler bundle includes everything.
The fullcalendar-scheduler bundle’s index.global(.min).js file includes the following packages:
@fullcalendar/core@fullcalendar/interaction(for date selecting, event dragging & resizing)@fullcalendar/daygrid(for month and dayGrid views)@fullcalendar/timegrid(for timeGrid views)@fullcalendar/list(for list views)@fullcalendar/multimonth(for multi-month views)@fullcalendar/adaptive(for print optimization)@fullcalendar/scrollgrid@fullcalendar/timeline(more info)@fullcalendar/resource@fullcalendar/resource-daygrid(more info)@fullcalendar/resource-timegrid(more info)@fullcalendar/resource-timeline(more info)
Individual Plugins
You can also include <script> tags for individual plugins. Example:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.11/index.global.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.11/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>