 |
| Feature-rich And Draggable Event Calendar Plugin - FullCalendar |
FullCalendar is a lightweight yet powerful and Feature Rich JavaScript library for creating flexible, draggable event calendars in modern web applications.
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).
Note that the FullCalendar now works as a Vanilla (ES6) JavaScript since v4, which removes jQuery and moment as dependencies. View the Upgrade Guide for more information.
You can still download and use the FullCalendar V3 in your jQuery powered projects.
More Features
- Multiple languages.
- Lots of themes to fit your needs.
- Supports custom timezone.
- Custom toolbar.
- Supports Month, TimeGri, List, DayGrid, Timeline, and Custom Views.
- Custom header & footer controls.
- Uses virtual DOM for faster rendering (V5).
- Compatible with Bootstrap 5
3RD Plugins:
- fullcalendar-rightclick.js: right click plugin
- swipecalendar: provides swiping/sliding capabilities
Basic Usage (v6):
1. Install & Download:
# Yarn $ yarn add @fullcalendar # NPM $ npm install @fullcalendar --save
2. Install & Download plugins as per your needs:
- @fullcalendar/interaction: Detect dateClick actions, selectable actions, and event drag-n-drop & resizing.
- @fullcalendar/daygrid: Month and DayGrid views.
- @fullcalendar/timegrid: TimeGrid views.
- @fullcalendar/list: Lists views.
- @fullcalendar/scrollgrid: Advanced scrolling.
- @fullcalendar/bootstrap5: Bootstrap 5 theme.
- @fullcalendar/bootstrap4: Bootstrap 4 theme.
- @fullcalendar/google-calendar: Allows the plugin to load events from a public Google Calendar feed.
- @fullcalendar/icalendar: Load events from an iCalendar feed.
- @fullcalendar/rrule: For leveraging the RRule library for event recurrence.
- @fullcalendar/luxon/@fullcalendar/luxon2: Offers a named-timezone implementation, a formatting string implementation, and utilities for converting to Luxon DateTimes.
- @fullcalendar/moment: Offers a formatting string implementation and utilities fo convert to Moment objects.
- @fullcalendar/moment-timezone: Offers a named timezone implementation.
- @fullcalendar/react: React component.
- @fullcalendar/vue3/@fullcalendar/vue: Vue.js component.
- @fullcalendar/angular: Angular component.
# Yarn $ yarn add @fullcalendar/core $ yarn add @fullcalendar/pluginName # NPM $ npm install @fullcalendar/core --save $ npm install @fullcalendar/pluginName --save
3. Import the core module and plugins as follows:
import { Calendar } from '@fullcalendar/core';
import pluginNamePlugin from '@fullcalendar/pluginName';
4. Or directly load the JavaScript in the document.
<script src='https://cdn.jsdelivr.net/npm/index.global.min.js'></script>
5. Create a container element to hold the evnet calendar.
<div id="calendar"></div>
6. Render a basic calendar (with no events) on the page.
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
// plugins to load
plugins: ['dayGrid', 'timeGrid'], // plugins to load
// header controls
header: {
left: 'dayGridMonth,timeGridWeek,timeGridDay custom1',
center: 'title',
right: 'custom2 prevYear,prev,next,nextYear'
},
// footer controls
footer: {
left: 'custom1,custom2',
center: '',
right: 'prev,next'
},
// custom toolbar buttons
customButtons: {
custom1: {
text: 'custom 1',
click: function () {
alert('clicked custom button 1!');
}
},
custom2: {
text: 'custom 2',
click: function () {
alert('clicked custom button 2!');
}
}
}
});
// render the calendar
calendar.render();
});
7. Create a calender with events defined in an array of event objects as follows:
var calendar = new FullCalendar.Calendar(calendarEl, {
events: [
{
title: 'All Day Event',
start: '2020-02-01'
},
{
title: 'Long Event',
start: '2020-02-07',
end: '2020-02-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-02-09T16:00:00'
}
});
8. Global configurations. Check out the Full document for more information.
eventDisplay: 'auto',
defaultRangeSeparator: ' - ',
titleRangeSeparator: ' \u2013 ',
defaultTimedEventDuration: '01:00:00',
defaultAllDayEventDuration: { day: 1 },
forceEventDuration: false,
nextDayThreshold: '00:00:00',
dayHeaders: true,
initialView: '',
aspectRatio: 1.35,
headerToolbar: {
start: 'title',
center: '',
end: 'today prev,next'
},
weekends: true,
weekNumbers: false,
weekNumberCalculation: 'local',
editable: false,
nowIndicator: false,
scrollTime: '06:00:00',
slotMinTime: '00:00:00',
slotMaxTime: '24:00:00',
showNonCurrentDates: true,
lazyFetching: true,
startParam: 'start',
endParam: 'end',
timeZoneParam: 'timeZone',
timeZone: 'local',
locales: [],
locale: '',
themeSystem: 'standard',
dragRevertDuration: 500,
dragScroll: true,
allDayMaintainDuration: false,
unselectAuto: true,
dropAccept: '*',
eventOrder: 'start,-duration,allDay,title',
dayPopoverFormat: { month: 'long', day: 'numeric', year: 'numeric' },
handleWindowResize: true,
windowResizeDelay: 100,
longPressDelay: 1000,
eventDragMinDistance: 5,
expandRows: false,
navLinks: false,
selectable: false
Basic Usage (v3):
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>
$('#container').fullCalendar({
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.
$('#container').fullCalendar({
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
});
Live Demo
See the Pen Draggable Event Calendar and Feature Rich Plugins jQuery by Teguh Sigit (@teguhsigit) on CodePen.
File Info
- File Name :
- fullcalendar-6.0.1.zip
- Size :
- 571KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT