@fullcalendar/daygrid

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