@fullcalendar/core

What is @fullcalendar/core?

@fullcalendar/core is a powerful and flexible JavaScript library for creating interactive and customizable calendars on web applications. It provides a wide range of features including event management, date navigation, and view customization.

What are @fullcalendar/core's main functionalities?

Basic Calendar Setup

This code sets up a basic calendar using the dayGrid plugin, which displays a month view of the calendar.

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

Event Management

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

Custom Views

This code shows how to set up a calendar with a custom view, in this case, a weekly time grid view.

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin, timeGridPlugin],
  initialView: 'timeGridWeek'
});
calendar.render();

Date Navigation

This code configures the calendar with navigation buttons to move between months, weeks, and days, as well as a 'today' button.

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth',
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  }
});
calendar.render();

Other packages similar to @fullcalendar/core

react-big-calendar

react-big-calendar is a similar package for React applications. It provides a calendar component with support for various views (month, week, day) and event management. Compared to @fullcalendar/core, it is more tightly integrated with React and offers a more React-centric API.

tui-calendar

tui-calendar is a full-featured calendar library that supports various views, including month, week, and day. It offers a wide range of customization options and is known for its performance. Compared to @fullcalendar/core, tui-calendar is more lightweight and has a different set of customization options.

scheduler

scheduler is a JavaScript library for creating scheduling applications. It supports drag-and-drop event management, various views, and resource management. Compared to @fullcalendar/core, scheduler is more focused on resource scheduling and management.

README

FullCalendar Core Package

Provides core functionality, including the Calendar class

View the docs »

This package was created from the FullCalendar monorepo »

Changelog

5.1.0 (2020-06-29)

• fix: css variables for default event border and bg color switched (#5551)
• fix: eventContent moves arrow event length indicators (#5547)
• fix: wrong ts types for bootstrapFontAwesome settings (#5548)
• fix: Dash between event start and end times is "undefined" with eventTimeFormat and moment plugin (#5493)
• fix: Events get displaced due to incorrect collisions detected depending on browser, zoom level (#5549)
• fix: Resource rows are initially squished in Chome in timeline view with contentHeight: "auto" and JSON resources (#5545)
• fix: unwanted text selection while dragging in Safari
• fix: reintroduce list-view color-change on event-row hover