Fullcalendar is a library developed by Adam Shaw that loads events by AJAX (as well as other methods) and presents them in a calendar/agenda display. Please always tag your fullCalendar version additionally - e.g. fullcalendar-5, fullcalendar-4 etc.
Fullcalendar is a calendar plugin developed by Adam Shaw.
It displays timed calendar events in fully customizable views, in traditional familiar calendar formats, as well as agenda-style lists. The built-in view types are:
- Agenda
- Day
- Week
- Month
Views can be customised to a certain extent, and there is also an API agains which to implement completely new view types for use within the rest of the calendar functionality.
Events can be fed into the calendar via Ajax feeds, or JSON arrays within the page. Multiple simultaneous sources of events are supported, and there is pre-built integration with Google Calendar iCal feeds.
Events can be dragged & dropped onto and around the calendar.
There is a wide range of callback functions and methods, so you can easily handle user actions, e.g select time/range, event resize/drag/drop etc.
The project offers thorough documentation including working demos, and a public GitHub repository where the source code can be found, and bug reports and feature requests can be submitted.
Stack Overflow Snippet Starter
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.css">
<div id='calendar'></div>
Javascript
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
