@fullcalendar/daygrid

What is @fullcalendar/daygrid?

@fullcalendar/daygrid is a plugin for FullCalendar that provides a month view and a basic week view. It allows users to display events in a grid format, making it easy to visualize events over a period of time.

What are @fullcalendar/daygrid's main functionalities?

Month View

This feature allows you to display a full month view of the calendar. The code initializes the FullCalendar with the dayGrid plugin and sets the initial view to 'dayGridMonth'.

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

Week View

This feature allows you to display a week view of the calendar. The code initializes the FullCalendar with the dayGrid plugin and sets the initial view to 'dayGridWeek'.

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

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

Event Display

This feature allows you to display events on the calendar. The code initializes the FullCalendar with the dayGrid plugin, sets the initial view to 'dayGridMonth', and adds events to be displayed.

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

Other packages similar to @fullcalendar/daygrid

react-big-calendar

react-big-calendar is a calendar component for React that provides a similar grid-based view for displaying events. It supports month, week, and day views, and is highly customizable. Compared to @fullcalendar/daygrid, react-big-calendar is specifically designed for React applications and offers a more React-centric API.

tui-calendar

tui-calendar is a JavaScript calendar library that provides various views including month, week, and day views. It is highly customizable and supports features like drag-and-drop event creation and resizing. Compared to @fullcalendar/daygrid, tui-calendar offers a broader range of features and is not tied to any specific framework.

vue-fullcalendar

vue-fullcalendar is a Vue.js component wrapper for FullCalendar. It provides similar functionalities to @fullcalendar/daygrid but is specifically designed for Vue.js applications. It allows for easy integration of FullCalendar into Vue projects, offering a more seamless experience for Vue developers.

README

FullCalendar Day Grid Plugin

Display events on Month view or DayGrid view

View the docs »

This package was created from the FullCalendar monorepo »

Changelog

6.0.0-beta.1 (2022-08-03)

FullCalendar no longer attempts to import .css files. Instead, FullCalendar's JS is responsible for injecting its own CSS. This solves many issues with third party libraries:

• Webpack: no longer necessary to use css-loader (see [example project][webpack-css-hack])
• Rollup: no longer necessary to use a css-processing plugin (like postcss) (see [example project][rollup-css-hack])
• NextJS: no longer necessary to ignore and manually import .css files (see [example project][next-css-hack], #6674)
• Angular 14 is incompatible with FullCalendar v5 ([see ticket][angular-css-bug]). FullCalendar v6 restores support for Angular 14 and above, but does so via a completely different package. Please use the new FullCalendar Web Component package (@fullcalendar/web-component), which can integrate with Angular via the [method described here][angular-web-components].