JavaScript Libs: FullCalendar – A full-sized drag & drop event calendar (jQuery plugin).

Category: Javascript Libs Tags:
May 24, 2018
JavaScript Libs

JavaScript Libs is a series of articles introducing useful JavaScript libraries to developers


FullCalendar is a full-sized drag & drop event calendar (jQuery plugin). Excellent for Outlook-style calendar-style event and booking systems

What it does

FullCalendar provides a full graphical web calendar, with several display options for month, week or year.

Typical Month View:

fullCalendar Month View

FullCalendar Month View (from RobotBooker – Room Booking Systems)

Typical Week View:

FullCalendar Week View

FullCalendar Week View (from RobotBooker – Room Booking Systems)

License: FullCalendar is free and licensed under MIT.
Popularity: npm has about 50,000 downloads per week.
Creator: arshaw (


  • Easy to use, web calendar
  • Good customisation
  • Plenty of functions
  • Lots of support, well established library
  • Display events in JSON

Where to Find Moment:

On npm:
On github

Recommended Installation:

[npm] – npm install fullcalendar
Download and include file from or use CDN


<div id='calendar'></div>

// most basic:
$(function() {
    // put your options and callbacks here

// more complex
$(document).ready(function() {
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,basicWeek,basicDay'
    defaultDate: '2018-05-23',
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
        title: 'All Day Event',
        start: '2018-05-24'
        title: 'Long Event',
        start: '2018-05-22',
        end: '2018-05-26'

Further Examples: