Questions tagged [fullcalendar]

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/fullcalendar@5.5.1/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/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();
});