Full Size and Drag & Drop Calendar Plugin - FullCalendar

Full Size and Drag & Drop Calendar Plugin - FullCalendar
File Size: 568 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

FullCalendar is a jQuery Calendar Plugin with jQuery UI for creating a smart, full size, drag and drop Calendar widget on your 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).

You Might Also Be Interested In:

Basic Usage:

1.  Include jQuery Library, jQuery UI and FullCalendar.js

<script type='text/javascript' src='../jquery/jquery-1.8.1.min.js'></script>
<script type='text/javascript' src='../jquery/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>

2. Include FullCalendar CSS

<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />

3. Initialize the plugin

<script type='text/javascript'>

$(document).ready(function() {

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$('#calendar').fullCalendar({
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});

});

</script>

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

Calendar.defaults = {

  titleRangeSeparator: ' \u2013 ', // en dash
  monthYearFormat: 'MMMM YYYY', // required for en. other locales rely on datepicker computable option

  defaultTimedEventDuration: '02:00:00',
  defaultAllDayEventDuration: { days: 1 },
  forceEventDuration: false,
  nextDayThreshold: '09:00:00', // 9am

  // display
  defaultView: 'month',
  aspectRatio: 1.35,
  header: {
    left: 'title',
    center: '',
    right: 'today prev,next'
  },
  weekends: true,
  weekNumbers: false,

  weekNumberTitle: 'W',
  weekNumberCalculation: 'local',
  
  //editable: false,

  //nowIndicator: false,

  scrollTime: '06:00:00',
  
  // event ajax
  lazyFetching: true,
  startParam: 'start',
  endParam: 'end',
  timezoneParam: 'timezone',

  timezone: false,

  //allDayDefault: undefined,

  // locale
  isRTL: false,
  buttonText: {
    prev: "prev",
    next: "next",
    prevYear: "prev year",
    nextYear: "next year",
    year: 'year', // TODO: locale files need to specify this
    today: 'today',
    month: 'month',
    week: 'week',
    day: 'day'
  },

  buttonIcons: {
    prev: 'left-single-arrow',
    next: 'right-single-arrow',
    prevYear: 'left-double-arrow',
    nextYear: 'right-double-arrow'
  },

  allDayText: 'all-day',
  
  // jquery-ui theming
  theme: false,
  themeButtonIcons: {
    prev: 'circle-triangle-w',
    next: 'circle-triangle-e',
    prevYear: 'seek-prev',
    nextYear: 'seek-next'
  },

  //eventResizableFromStart: false,
  dragOpacity: .75,
  dragRevertDuration: 500,
  dragScroll: true,
  
  //selectable: false,
  unselectAuto: true,
  
  dropAccept: '*',

  eventOrder: 'title',
  //eventRenderWait: null,

  eventLimit: false,
  eventLimitText: 'more',
  eventLimitClick: 'popover',
  dayPopoverFormat: 'LL',
  
  handleWindowResize: true,
  windowResizeDelay: 100, // milliseconds before an updateSize happens

  longPressDelay: 1000
  
};


Calendar.englishDefaults = { // used by locale.js
  dayPopoverFormat: 'dddd, MMMM D'
};


Calendar.rtlDefaults = { // right-to-left defaults
  header: { // TODO: smarter solution (first/center/last ?)
    left: 'next,prev today',
    center: '',
    right: 'title'
  },
  buttonIcons: {
    prev: 'right-single-arrow',
    next: 'left-single-arrow',
    prevYear: 'right-double-arrow',
    nextYear: 'left-double-arrow'
  },
  themeButtonIcons: {
    prev: 'circle-triangle-e',
    next: 'circle-triangle-w',
    nextYear: 'seek-prev',
    prevYear: 'seek-next'
  }
};

Change Logs:

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.