@fullcalendar/timegrid
Advanced tools
@fullcalendar/timegrid is a plugin for FullCalendar that provides a time grid view, which is useful for displaying events in a calendar format that emphasizes time slots. This is particularly useful for applications that need to show daily or weekly schedules with time-specific events.
Time Grid View
This feature allows you to create a time grid view for your calendar, which can display events in a weekly or daily format with time slots.
{
"import": "import { Calendar } from '@fullcalendar/core';",
"import": "import timeGridPlugin from '@fullcalendar/timegrid';",
"code": "const calendarEl = document.getElementById('calendar');",
"code": "const calendar = new Calendar(calendarEl, { plugins: [timeGridPlugin], initialView: 'timeGridWeek' });",
"code": "calendar.render();"
}
Event Rendering
This feature allows you to render events on the time grid view, specifying the start and end times for each event.
{
"import": "import { Calendar } from '@fullcalendar/core';",
"import": "import timeGridPlugin from '@fullcalendar/timegrid';",
"code": "const calendarEl = document.getElementById('calendar');",
"code": "const calendar = new Calendar(calendarEl, { plugins: [timeGridPlugin], initialView: 'timeGridWeek', events: [ { title: 'Meeting', start: '2023-10-07T10:00:00', end: '2023-10-07T12:00:00' } ] });",
"code": "calendar.render();"
}
Customizable Time Slots
This feature allows you to customize the duration of each time slot in the time grid view, making it flexible to fit different scheduling needs.
{
"import": "import { Calendar } from '@fullcalendar/core';",
"import": "import timeGridPlugin from '@fullcalendar/timegrid';",
"code": "const calendarEl = document.getElementById('calendar');",
"code": "const calendar = new Calendar(calendarEl, { plugins: [timeGridPlugin], initialView: 'timeGridWeek', slotDuration: '00:30:00' });",
"code": "calendar.render();"
}
react-big-calendar is a calendar component for React that provides a similar time grid view. It is highly customizable and supports various views like month, week, and day. Compared to @fullcalendar/timegrid, 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 time grid, month, and week views. It is highly customizable and supports features like drag-and-drop and event resizing. Compared to @fullcalendar/timegrid, tui-calendar offers a broader range of views and is not tied to any specific framework.
scheduler is a JavaScript library for creating scheduling applications. It provides a time grid view and supports features like event creation, editing, and drag-and-drop. Compared to @fullcalendar/timegrid, scheduler is more focused on providing a complete scheduling solution with additional features like resource management.
Display events on time slots
Install the necessary packages:
npm install @fullcalendar/core @fullcalendar/timegrid
Instantiate a Calendar with the necessary plugin:
import { Calendar } from '@fullcalendar/core'
import timeGridPlugin from '@fullcalendar/timegrid'
const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
plugins: [timeGridPlugin],
initialView: 'timeGridWeek',
events: [
{ title: 'Meeting', start: new Date() }
]
})
calendar.render()
6.1.15 (2024-07-12)
FAQs
Display events on time slots
The npm package @fullcalendar/timegrid receives a total of 558,681 weekly downloads. As such, @fullcalendar/timegrid popularity was classified as popular.
We found that @fullcalendar/timegrid 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
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
Security News
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.