@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

Changelog

Source

6.1.0 (2023-01-29)

feature: multimonth view (#470, #1140)
- provides multiMonthYear view, which displays 3x4 small months when space permits
- can extend multiMonth view with custom durations
- can specify multiMonthMinWidth, which will force wrapping if months are too small
- can specify multiMonthMaxColumns: 1 to guarantee one column of months
- can specify multiMonthTitleFormat to customize text above each month
feature: improved daygrid behavior when multiple weeks/months
- when many rows, instead of condensing rows, guaranteed min-height, for forcing scrollbars
- displaying month names for month switchovers, controlled by monthStartFormat
- a new stock dayGridYear view
feature: in daygrid/multimonth, +more link has hover effect with grey background color
feature: @fullcalendar/web-component has shadow option
feature/fix: from content-injection hooks, returning true does default rendering (#7110)
feature/fix: CSP nonce value passed to dynamically-injected stylesheets (#7104)
fix: React event duplication while DnD and updating redux store (#7066, #7067, #7071)
fix: styles are not applied correctly for elements using shadow DOM (#7118)
fix: custom view content with JSX doesn't render (#7160)
fix: resourceAreaHeaderContent overrides headerContent in resource columns (#7153)
fix: update moment-timezone for latest tz data (#6987)
fix: dayGrid w/ showNonCurrentDates: false can have final squished row (#7162)
fix: root-level repo with git submodules shouldn't force ssh protocol (#6714)
fix: in fullcalendar bundle, FullCalendar.Preact exposed for interop with plugins
fix: EventApi::toPlainObject now returns allDay property
locale: add weekTextLong for French locale (#6731, #7144)
locale: replace "évènement" in French locales (#7108)
locale: add Uzbek cyrillic translation (#6853)
locale: update Galician locale (#7103)
locale: update pt-br locale (#7106)

Readme

Source

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

Keywords

FAQs

What is @fullcalendar/daygrid?

Is @fullcalendar/daygrid popular?

Is @fullcalendar/daygrid well maintained?

Last updated on 30 Jan 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install