@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 a month view or "day grid" view

Installation

Install the necessary packages:

npm install @fullcalendar/core @fullcalendar/daygrid

Usage

Instantiate a Calendar with the necessary plugin:

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: 'Meeting', start: new Date() }
  ]
})

calendar.render()

Changelog

6.1.8 (2023-05-24)

• feature: Luxon 3 plugin (#6957)
• feature: Angular 16 support (#7312)
• fix: React warning with JSX "flushSync was called from inside a lifecycle method" (#7334)
• fix: styling sometimes broken in production Next.js (#7284)
• fix: styling broken in Remix, use official workaround (#7261)
• fix: for React custom views, alias component setting to content (#7207)
• locale fix: he (#7124)
• locale fix: zh-tw (#7289)