@fullcalendar/list

What is @fullcalendar/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.

What are @fullcalendar/list's main functionalities?

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

Other packages similar to @fullcalendar/list

react-big-calendar

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

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.

dayjs

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.

README

FullCalendar List View Plugin

Display events on a calendar view that looks like a bulleted list

Installation

Install the necessary packages:

npm install @fullcalendar/core @fullcalendar/list

Usage

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