@fullcalendar/list
Advanced tools
Display events on a calendar view that looks like a bulleted list
@fullcalendar/list is a plugin for FullCalendar that provides a list view for displaying events. It allows users to see events in a list format, which can be useful for agendas, schedules, and other applications where a list view is more appropriate than a calendar grid.
List View
This feature allows you to display events in a list format. The code sample demonstrates how to initialize a FullCalendar instance with the list plugin and set the initial view to 'listWeek'.
import { Calendar } from '@fullcalendar/core';
import listPlugin from '@fullcalendar/list';
const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
plugins: [listPlugin],
initialView: 'listWeek',
events: [
{ title: 'Event 1', start: '2023-10-01' },
{ title: 'Event 2', start: '2023-10-02' }
]
});
calendar.render();Customizable List Views
This feature allows you to customize the list views. The code sample shows how to set up a custom list view with a specific button text for the 'listMonth' view.
import { Calendar } from '@fullcalendar/core';
import listPlugin from '@fullcalendar/list';
const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
plugins: [listPlugin],
initialView: 'listMonth',
views: {
listMonth: {
buttonText: 'Monthly List'
}
},
events: [
{ title: 'Event 1', start: '2023-10-01' },
{ title: 'Event 2', start: '2023-10-02' }
]
});
calendar.render();Event Grouping
This feature allows you to group events by a specific property. The code sample demonstrates how to group events using the 'groupId' property.
import { Calendar } from '@fullcalendar/core';
import listPlugin from '@fullcalendar/list';
const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
plugins: [listPlugin],
initialView: 'listWeek',
events: [
{ title: 'Event 1', start: '2023-10-01', groupId: 'group1' },
{ title: 'Event 2', start: '2023-10-02', groupId: 'group1' },
{ title: 'Event 3', start: '2023-10-03', groupId: 'group2' }
]
});
calendar.render();React Big Calendar is a full-featured calendar component for React. It provides various views including month, week, and day views, and supports drag-and-drop functionality. Compared to @fullcalendar/list, React Big Calendar is more focused on providing a comprehensive calendar solution with multiple views rather than just a list view.
TUI Calendar is a JavaScript calendar library that supports various views such as daily, weekly, monthly, and more. It is highly customizable and provides features like drag-and-drop, recurring events, and timezone support. Compared to @fullcalendar/list, TUI Calendar offers a broader range of views and functionalities.
Day.js is a minimalist JavaScript library for parsing, validating, manipulating, and displaying dates and times. While it does not provide a calendar view, it can be used in conjunction with other libraries to handle date and time operations. Compared to @fullcalendar/list, Day.js is more focused on date manipulation rather than providing a calendar interface.
Display events on a calendar view that looks like a bulleted list
Install the necessary packages:
npm install @fullcalendar/core @fullcalendar/list
Instantiate a Calendar with the necessary plugin:
import { Calendar } from '@fullcalendar/core'
import listPlugin from '@fullcalendar/list'
const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
plugins: [listPlugin],
initialView: 'listWeek',
events: [
{ title: 'Meeting', start: new Date() }
]
})
calendar.render()
6.1.15 (2024-07-12)
FAQs
Display events on a calendar view that looks like a bulleted list
The npm package @fullcalendar/list receives a total of 288,425 weekly downloads. As such, @fullcalendar/list popularity was classified as popular.
We found that @fullcalendar/list 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
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.