@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

4.1.0 (2019-04-24)

• scrollToTime method (#467)
• ISO8601 datetime strings with no 'T' not parsed in Safari (#4610)
• all-day dropped events after third not being draggable (#4616)
• dateClick/selecting sometime report wrong dates after calendar resize (#4608)
• js error when using navLinks with header=false (#4619)
• js error when more+ link and multiple async event sources (#4585)
• timeGridEventMinHeight is not defined in OptionsInput interface (#4605)
• Interdependent package semvers with carrot, use tilde (#4620)
• dayRender now called for day columns in timeGrid views