fullcalendar
Advanced tools
Easily render a full-sized drag & drop calendar with a combination of standard plugins
FullCalendar is a JavaScript calendar library that provides a full-sized, drag-and-drop calendar. It is highly customizable and can be used to display events, handle user interactions, and integrate with various data sources.
Display a Basic Calendar
This code initializes a basic calendar using FullCalendar with the dayGrid plugin to display a month view.
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
plugins: [dayGridPlugin],
initialView: 'dayGridMonth'
});
calendar.render();
Add Events to the Calendar
This code demonstrates how to add events to the calendar. Events can have a title, start date, and optionally an end date.
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
plugins: [dayGridPlugin],
initialView: 'dayGridMonth',
events: [
{ title: 'Event 1', start: '2023-10-01' },
{ title: 'Event 2', start: '2023-10-05', end: '2023-10-07' }
]
});
calendar.render();
Handle Event Clicks
This code shows how to handle event clicks. When an event is clicked, an alert is shown with the event's title, and the event's border color is changed.
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
plugins: [dayGridPlugin],
initialView: 'dayGridMonth',
events: [
{ title: 'Event 1', start: '2023-10-01' },
{ title: 'Event 2', start: '2023-10-05', end: '2023-10-07' }
],
eventClick: function(info) {
alert('Event: ' + info.event.title);
// change the border color just for fun
info.el.style.borderColor = 'red';
}
});
calendar.render();
Drag and Drop Events
This code enables drag-and-drop functionality for events. The 'editable' property is set to true, allowing users to drag and drop events to different dates.
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
plugins: [dayGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
editable: true,
events: [
{ title: 'Event 1', start: '2023-10-01' },
{ title: 'Event 2', start: '2023-10-05', end: '2023-10-07' }
]
});
calendar.render();
React Big Calendar is a full-featured calendar component for React. It is similar to FullCalendar but is specifically designed for React applications. It offers a variety of views (month, week, day) and supports drag-and-drop functionality.
TOAST UI Calendar is a JavaScript calendar library that provides a variety of views and supports drag-and-drop functionality. It is highly customizable and can be used in both vanilla JavaScript and frameworks like React and Vue.
Calendarize is a lightweight JavaScript library for creating simple calendars. It is less feature-rich compared to FullCalendar but is suitable for basic calendar needs and has a smaller footprint.
Easily render a full-sized drag & drop calendar with a combination of standard plugins
This fullcalendar package bundles these plugins:
Load the index.global.min.js file and use the FullCalendar global namespace:
<!DOCTYPE html>
<html>
<head>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const calendarEl = document.getElementById('calendar')
const calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
})
calendar.render()
})
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
npm install fullcalendar
import { Calendar } from 'fullcalendar'
document.addEventListener('DOMContentLoaded', function() {
const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
initialView: 'dayGridMonth'
})
calendar.render()
})
6.1.15 (2024-07-12)
FAQs
Easily render a full-sized drag & drop calendar with a combination of standard plugins
We found that fullcalendar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.