Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@fullcalendar/list

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fullcalendar/list

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

6.0.3
Source
npm

Version published: 2 years ago

Weekly downloads: 292K; decreased by-0.63%

Maintainers: 1

Weekly downloads

Created: 6 years ago

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