fullcalendar
Advanced tools
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.
A full-sized drag & drop event calendar (jQuery plugin).
3.10.0 (2019-01-10)
POTENTIALLY BREAKING CHANGE: The jquery and moment packages have been moved to peerDependencies. If you are using NPM to install fullcalendar, you'll need to explicitly add jquery and moment as dependencies of your project. NPM will not install them automatically. (#4136, #4233)
New Features:
Bugfixes:
FAQs
Easily render a full-sized drag & drop calendar with a combination of standard plugins
The npm package fullcalendar receives a total of 139,607 weekly downloads. As such, fullcalendar popularity was classified as popular.
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
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.