Full Size and Drag & Drop Calendar Plugin - FullCalendar

Full Size and Drag & Drop Calendar Plugin - FullCalendar

FullCalendar is a jQuery calendar plugin for creating a smart, full size, drag and drop event calendar on the webpage. 

By using AJAX, FullCalendar can fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

Seel also:

Basic Usage:

1. Include the necessary jQuery and moment.js libraries in the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/moment.min.js"></script>

2. Include the FullCalendar plugin's files.

<link rel="stylesheet" href="fullcalendar.css">
<script src="fullcalendar/fullcalendar.js"></script>

3. You can also import the FullCalendar as a module.

npm install jquery moment fullcalendar
import $ from 'jquery';
import 'fullcalendar';

4. Call the function on the element in which you want to place the calendar and add your own events as follows:

<div id="container"></div>
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay,listWeek'
  defaultDate: '2019-01-12',
  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: '2019-01-01',
      title: 'Long Event',
      start: '2019-01-07',
      end: '2019-01-10'
      id: 999,
      title: 'Repeating Event',
      start: '2019-01-09T16:00:00'
      id: 999,
      title: 'Repeating Event',
      start: '2019-01-16T16:00:00'
      title: 'Conference',
      start: '2019-01-11',
      end: '2019-01-13'
      title: 'Meeting',
      start: '2019-01-12T10:30:00',
      end: '2019-01-12T12:30:00'
      title: 'Lunch',
      start: '2019-01-12T12:00:00'
      title: 'Meeting',
      start: '2019-01-12T14:30:00'
      title: 'Happy Hour',
      start: '2019-01-12T17:30:00'
      title: 'Dinner',
      start: '2019-01-12T20:00:00'
      title: 'Birthday Party',
      start: '2019-01-13T07:00:00'
      title: 'Click for Google',
      url: 'http://google.com/',
      start: '2019-01-28'

5. Options and defaults. Check out the Full document for more information.

  titleRangeSeparator: ' \u2013 ',
  monthYearFormat: 'MMMM YYYY',
  defaultTimedEventDuration: '02:00:00',
  defaultAllDayEventDuration: { days: 1 },
  forceEventDuration: false,
  nextDayThreshold: '09:00:00',
  columnHeader: true,
  defaultView: 'month',
  aspectRatio: 1.35,
  header: {
    left: 'title',
    center: '',
    right: 'today prev,next'
  weekends: true,
  weekNumbers: false,
  weekNumberTitle: 'W',
  weekNumberCalculation: 'local',
  scrollTime: '06:00:00',
  minTime: '00:00:00',
  maxTime: '24:00:00',
  showNonCurrentDates: true,
  lazyFetching: true,
  startParam: 'start',
  endParam: 'end',
  timezoneParam: 'timezone',
  timezone: false,
  locale: null,
  isRTL: false,
  buttonText: {
    prev: 'prev',
    next: 'next',
    prevYear: 'prev year',
    nextYear: 'next year',
    year: 'year',
    today: 'today',
    month: 'month',
    week: 'week',
    day: 'day'
  allDayText: 'all-day',
  agendaEventMinHeight: 0,
  theme: false,
  dragOpacity: .75,
  dragRevertDuration: 500,
  dragScroll: true,
  unselectAuto: true,
  dropAccept: '*',
  eventOrder: 'title',
  eventLimit: false,
  eventLimitText: 'more',
  eventLimitClick: 'popover',
  dayPopoverFormat: 'LL',
  handleWindowResize: true,
  windowResizeDelay: 100,
  longPressDelay: 1000


v3.10.0 (2019-02-07)

v3.4.0 (2017-04-28)

  • composer.js for Composer (PHP package manager) 
  • fix toISOString for locales with non-trivial postformatting
  • fix for nested inverse-background events 
  • Estonian locale
  • fixed Latvian localization
  • internal refactor of async systems

v3.2.0 (2017-02-15)

  • New feature: selectMinDistance, threshold before a mouse selection begins
  • Fixed: iOS 10, unwanted scrolling while dragging events/selection
  • Fixed: dayClick triggered when swiping on touch devices 
  • Fixed: dayClick not functioning on Firefix mobile 
  • Fixed: title computed incorrectly for views with no weekends
  • Fixed: unwanted scrollbars in month-view when non-integer width 
  • Fixed: incorrect date formatting for locales with non-standlone month/day names
  • Fixed: date formatting, incorrect omission of trailing period for certain locales 
  • Fixed: formatRange should collapse same week numbers 
  • Fixed: Taiwanese locale updated
  • Fixed: Finnish noEventsMessage updated
  • Fixed: Croatian (hr) buttonText is blank 
  • Fixed: JSON feed PHP example, date range math bug

v3.1.0 (2016-12-05)

  • experimental support for implicitly batched ("debounced") event rendering: eventRenderWait (off by default)
  • new footer option, similar to header toolbar
  • event rendering batch methods: renderEvents and updateEvents
  • more granular touch settings: eventLongPressDelay and selectLongPressDelay
  • eventDestroy not called when removing the popover
  • print stylesheet and gcal extension now offered as minified 
  • fc-today in agenda header cells
  • height-related options in tandem with other options
  • Kazakh locale
  • Afrikaans locale
  • internal refactor related to timing of rendering and firing handlers. calls to rerender the current date-range and events from within handlers might not execute immediately. instead, will execute after handler finishes.

v3.0.1 (2016-10-02)

  • list view rendering event times incorrectly
  • list view rendering events/days out of order
  • events with no title rendering as "undefined"
  • add .fc scope to table print styles
  • "display no events" text fix for German

v3.0.0 (2016-09-05)

  • Bugfixes
  • New Features: List View
  • New Features: Clickable day/week numbers for easier navigation
  • New Features: Programmatically allow/disallow user interactions\
  • New Features: Option to display week numbers in cells
  • New Features: When week calc is ISO, default first day-of-week to Monday
  • New Features: Macedonian locale
  • IE8 support dropped
  • jQuery: minimum support raised to v2.0.0
  • MomentJS: minimum support raised to v2.9.0
  • lang option renamed to locale
  • View-Option-Hashes no longer supported (deprecated in 2.2.4)
  • removed weekMode setting
  • removed axisFormat setting
  • DOM structure of month/basic-view day cell numbers changed

v2.9.0 (2016-07-11)

  • Setters for (almost) all options
  • Travis CI improvements

v2.8.0 (2016-06-20)

  • getEventSources method
  • getEventSourceById method
  • refetchEventSources method
  • removeEventSources method 
  • prevent flicker when refetchEvents is called 
  • fix for removing event sources that share same URL
  • jQuery 3 support 
  • Travis CI integration 
  • EditorConfig for promoting consistent code style
  • use en dash when formatting ranges 
  • height:auto always shows scrollbars in month view on FF
  • new languages

v2.7.0 (2016-05-01)

  • touch device support: - smoother scrolling - interactions initiated via "long press": - event drag-n-drop - event resize - time-range selecting - longPressDelay

v2.6.1 (2016-02-15)

  • make nowIndicator positioning refresh on window resize

v2.5.0 (2015-11-30)

  • internal timezone refactor.
  • internal "grid" system refactor. improved API for plugins.

v2.4.0 (2015-08-17)

  • add new buttons to the header via customButtons 
  • control stacking order of events via eventOrder
  • control frequency of slot text via slotLabelInterval 
  • displayEventTime 
  • on and off methods
  • renamed axisFormat to slotLabelFormat

v2.3.2 (2015-06-15)

  • minor code adjustment in preparation for plugins

v2.3.1 (2015-03-09)

  • Fix week view column title for en-gb

v2.3.0 (2015-02-22)

  • internal refactoring in preparation for other views
  • businessHours now renders on whole-days in addition to timed areas
  • events in "more" popover not sorted by time
  • avoid using moment's deprecated zone method
  • destroying the calendar sometimes causes all window resize handlers to be unbound
  • multiple calendars on one page, can't accept external elements after navigating
  • accept external events from jqui sortable 
  • external jqui drop processed before reverting 
  • IE8 fix: month view renders incorrectly
  • IE8 fix: eventLimit:true wouldn't activate "more" link
  • IE8 fix: dragging an event with an href
  • IE8 fix: invisible element while dragging agenda view events
  • IE8 fix: erratic external element dragging

v2.2.7 (2015-02-10)

  • view.title wasn't defined in viewRender callback 
  • FullCalendar versions >= 2.2.5 brokenness with Moment versions <= 2.8.3 
  • Support Bokmal Norwegian language specifically

v2.2.6 (2015-01-12)

  • Compatibility with Moment v2.9. Was breaking GCal plugin
  • View object's title property mistakenly omitted
  • Single-day views with hiddens days could cause prev/next misbehavior
  • Don't let the current date ever be a hidden day
  • Hebrew locale

v2.2.5 (2014-12-30)

  • buttonText specified for custom views via the views option

v2.2.4 (2014-12-30)

  • Arbitrary durations for basic/agenda views with the views option
  • Specify view-specific options using the views option.
  • Deprecate view-option-hashes
  • Formalize and expose View API
  • updateEvent method, more intuitive behavior.

v2.2.3 (2014-11-26)

  • removeEventSource with Google Calendar object source, would not remove 
  • Events with invalid end dates are still accepted and rendered
  • Bug when rendering business hours and navigating away from original view
  • Links to Google Calendar events will use current timezone
  • Google Calendar plugin works with timezone names that have spaces
  • Google Calendar plugin accepts person email addresses as calendar IDs
  • Internally use numeric sort instead of alphanumeric sort

v2.2.1 (2014-11-20)

  • Fixes to Google Calendar API V3 code

v2.2.1 (2014-11-19)

  • Migrate Google Calendar plugin to use V3 of the API

v2.2.0 (2014-11-15)

  • Background event rendering (144, 1286)
  • Controlling where events can be dragged/resized and selections can go
  • Improvements to dragging and dropping external events
  • Performance boost for moment creation

v2.1.1 (2014-08-30)

  • removeEventSource not working with array 
  • mouseout not triggered after mouseover+updateEvent
  • agenda event's render with no href, not clickable

v2.1.0 (2014-08-27)

  • Large code refactor with better OOP, better code reuse, and more comments. No more reliance on jQuery UI for event dragging, resizing, or anything else.

v2.0.3 (2014-08-16)

  • moment-2.8.1 compatibility
  • relative path in bower.json
  • upgraded jquery-ui and misc dev dependencies

v2.0.2 (2014-06-25)

  • bug with persisting addEventSource calls 
  • bug with persisting removeEvents calls with an array source
  • bug with removeEvents method when called with 0 removes all events 

v2.0.1 (2014-06-16)

  • wrongfully triggering a windowResize when resizing an agenda view event
  • this values in event drag-n-drop/resize handlers consistently the DOM node
  • displayEventEnd - v2 workaround to force display of an end time 
  • don't modify passed-in eventSource items
  • destroy method now removes fc-ltr class
  • weeks of last/next month still visible when weekends are hidden 
  • fixed memory leak when destroying calendar with selectable/droppable
  • delta parameters reintroduced in eventDrop and eventResize handlers 
  • Icelandic language 
  • Bahasa Indonesia language 

v2.0.0 (2014-06-02)

  • Major update.
  • APIs changed.
  • No More IE7 Support.

v1.6.4 (2013-09-01)

  • better algorithm for positioning timed agenda events (issue 1115)
  • `slotEventOverlap` option to tweak timed agenda event overlapping (issue 218)
  • selection bug when slot height is customized (issue 1035)
  • supply view argument in `loading` callback (issue 1018)
  • fixed week number not displaying in agenda views (issue 1951)
  • fixed fullCalendar not initializing with no options (issue 1356)
  • NPM's package.json, no more warnings or errors (issue 1762)
  • building the bower component should output bower.json instead of component.json (PR 125)
  • use bower internally for fetching new versions of jQuery and jQuery UI

v1.6.3 (2013-08-11)

  • viewRender callback (PR 15)
  • viewDestroy callback (PR 15)
  • eventDestroy callback (PR 111)
  • handleWindowResize option (PR 54)
  • eventStartEditable/startEditable options (PR 49)
  • eventDurationEditable/durationEditable options (PR 49)
  • specify function for $.ajax `data` parameter for JSON event sources (PR 59)
  • fixed bug with agenda event dropping in wrong column (PR 55)
  • easier event element z-index customization (PR 58)
  • classNames on past/future days (PR 88)
  • allow null/undefined event titles (PR 84)
  • small optimize for agenda event rendering (PR 56)
  • deprecated:
  • viewDisplay
  • disableDragging
  • disableResizing
  • bundled with latest jQuery (1.10.2) and jQuery UI (1.10.3)

This awesome jQuery plugin is developed by fullcalendar. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 07.02.2019
  • Source