FullCalendar — Full-Sized JavaScript Event Calendar

Introduction

FullCalendar is a full-sized, drag-and-drop event calendar for the web. It supports month, week, day, and list views out of the box and integrates with React, Vue, and Angular. Events can come from static arrays, JSON feeds, or Google Calendar.

What FullCalendar Does

• Renders month, week, day, and list views for event scheduling
• Supports drag-and-drop event creation, moving, and resizing
• Fetches events from JSON APIs, Google Calendar, or iCalendar feeds
• Handles recurring events and all-day events natively
• Provides a timeline and resource view for scheduling rooms, staff, or equipment

Architecture Overview

FullCalendar uses a plugin architecture where each view type (dayGrid, timeGrid, list, timeline) is a separate package. The core package manages the calendar state, event store, and date math. Rendering is handled by a virtual DOM layer that outputs to the browser DOM. Framework connectors for React, Vue, and Angular wrap the core and expose reactive props and event callbacks.

Self-Hosting & Configuration

• Install the core package plus view plugins for the layouts you need
• Configure via an options object with properties for initial view, header toolbar, and event sources
• Add interactivity with the @fullcalendar/interaction plugin for drag and drop
• Style with CSS variables or override the default theme with custom stylesheets
• Use the React, Vue, or Angular connector packages for framework-native integration

Key Features

• Plugin-based architecture lets you ship only the views you use
• Resource scheduling with timeline and vertical resource views
• Event constraints, overlap rules, and business-hour highlighting
• Locale support with over 50 built-in translations
• Responsive design that adapts to mobile and tablet screens

Comparison with Similar Tools

• DHTMLX Scheduler — commercial scheduler with Gantt support; FullCalendar is open source with a broader community
• Toast UI Calendar — lighter weight; FullCalendar offers more view types and resource scheduling
• React Big Calendar — React-only; FullCalendar supports multiple frameworks and vanilla JS
• Day.js/Luxon — date utility libraries; FullCalendar is a complete calendar UI component

FAQ

Q: Is FullCalendar free? A: The standard views (dayGrid, timeGrid, list) are MIT-licensed. Premium plugins like timeline and resource views require a commercial license.

Q: Can I load events from a REST API? A: Yes. Point the events option to a URL and FullCalendar will fetch JSON on view changes, passing date range parameters.

Q: Does it support recurring events? A: Yes. Define events with daysOfWeek, startTime, and endTime properties, or use the RRule plugin for complex recurrence patterns.

Q: How do I integrate with React? A: Install @fullcalendar/react and use the <FullCalendar /> component with props matching the standard options.

Sources

• https://github.com/fullcalendar/fullcalendar
• https://fullcalendar.io/docs