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

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

FullCalendar

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:

Typical Week View:

License: FullCalendar is free and licensed under MIT.
Popularity: npm has about 50,000 downloads per week.
Creator: arshaw (https://www.npmjs.com/~arshaw)

Features

• 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: https://www.npmjs.com/package/fullcalendar
On github: https://github.com/fullcalendar/fullcalendar

Recommended Installation:

[npm] – npm install fullcalendar
Download and include file from https://fullcalendar.io/download or use CDN

Examples:

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

<script>
// most basic:
$(function() {
  $('#calendar').fullCalendar({
    // put your options and callbacks here
  })
});

// more complex
$(document).ready(function() {
  $('#calendar').fullCalendar({
    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
    events:
	[
      {
        title: 'All Day Event',
        start: '2018-05-24'
      },
      {
        title: 'Long Event',
        start: '2018-05-22',
        end: '2018-05-26'
      }
    ]
  });
});
</script>

Further Examples:

https://fullcalendar.io/