logo

FullCalendar

Docs List View

These are the new v4 docs! More info

A list view displays events in a simple vertical list for a specific interval of time. If there are no events during a specific interval of time, the noEventsMessage is displayed. There are 4 preset list views: listDay, listWeek, listMonth, and listYear. They can be initialized in an ES6 setup like so:

import { Calendar } from '@fullcalendar/core';
import listPlugin from '@fullcalendar/list';
...
let calendar = new Calendar(calendarEl, {
  plugins: [ listPlugin ],
  defaultView: 'listWeek'
});
...

Then you’ll need to ensure the correct stylesheets are loaded:

<link href='node_modules/@fullcalendar/core/main.css' rel='stylesheet' />
<link href='node_modules/@fullcalendar/list/main.css' rel='stylesheet' />

Or you can choose to initialized the List views entirely with script tags:

<link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/list/main.css' rel='stylesheet' />

<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/list/main.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'list' ],
  defaultView: 'listWeek'
});
...
</script>

If you’d like a different interval of time, you can create a custom view with type 'list'.

The following settings are specific to list-view. However, many other settings throughout the API also affect list-view as well, such as eventRender and eventClick.