@fullcalendar/daygrid
Advanced tools
@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.
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();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 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 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.
Display events on a month view or "day grid" view
Install the necessary packages:
npm install @fullcalendar/core @fullcalendar/daygrid
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()
6.1.15 (2024-07-12)
FAQs
Display events on a month view or "day grid" view
The npm package @fullcalendar/daygrid receives a total of 667,758 weekly downloads. As such, @fullcalendar/daygrid popularity was classified as popular.
We found that @fullcalendar/daygrid demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.