fullcalendar

What is fullcalendar?

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.

What are fullcalendar's main functionalities?

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();

Other packages similar to fullcalendar

react-big-calendar

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.

tui-calendar

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

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.

README

FullCalendar

A full-sized drag & drop event calendar (jQuery plugin).

• Project website and demos
• Documentation
• Support
• Contributing
• Changelog
• License