@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.6.0 (2021-03-28)

• feature: icalendar events receive URL (#6173)
• feature: icalendar events receive location, organizer, description in extendedProps (#6097)
• fix: resizing resource column larger does not always update column widths (#6140)
• fix: print view cut off for wide liquid-width calendar (#5707)
• fix: event start time is limited by what is visible by slotMinTime (#6162)
• fix: Event::setProp can't change the id (#4730)
• fix: icalendar event source does not update on refreshEvents (#6194)
• fix: business hours per resource do not fill row height with expandRows (#6134)
• fix: icalendar recurring events ignoring count rule (#6190)
• fix: icalendar recurring timed-events with wrong times (#6139, #6106)
• fix: removed accidental ical.js dependency in common's package.json (#6171)
• fix: for gcal events, restore extendedProperties (#5083)
• fix: for gcal events, make attachments available (#5024)
• fix: can't parse rrule strings with newlines after UNTIL statements (#6126)
• locale: fixed typos in Tamil (#6115)
• locale: added Bengali (#6096)
• breaking-change: for icalendar recurring event that don't specify dtend/duration, the resulting Event object's end is now determined by forceEventDuration, defaultTimedEventDuration, and defaultAllDayEventDuration, whereas previously it was sometimes null.