@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

View your events as a bulleted list

View the docs »

This package was created from the FullCalendar monorepo »

Changelog

4.3.0 (2019-08-09)

• HTML/CSS for timeline events has been refactored. BREAKING CHANGE if customized CSS.
• timeline event titles sometimes overflow outside of element when time (#4928)
• eventStartEditable false is not compatible with eventResourceEditable true (#4930)
• calling Calendar::render after initial render causes bad sizing (#4718, #4723)
• when list views destroyed, wouldn't call eventDestroy (#4727)
• solve JS errors when switching views and using showNonCurrentDates (#4677, #4767)
• prevent unnecessary scrollbars from appearing in daygrid views (4624, #4732)
• draggedEvent start time is null in eventAllow when switching resources (#4932)
• scrollToTime method honors a whole duration, not just a time (#4935)
• some background events wouldn't recieve eventClick or hovering (#3148, #4750)
• fix infinite recursion when custom view type is itself (#4198)
• respect firstDay setting when weekNumberCalculation set to ISO (#4734)
• fix typo in Danish (#4708)
• adjust typescript def for setExtendedProp (#4679)
• googleCalendarApiKey added to typescript options definition (#4772)
• moment/luxon formatting same-day range with dash (#4686)
• error importing moment plugin into typescript project (#4691, #4680, #4580)
• refs to sourcemaps removed from dist (accidentally included in previous version)
• distributing an ESM file, referenced by package.json's module
• using a more portable SASS (#4626, #4651, #4671)