---
title: List View
title_for_landing: List
children:
  - title: List-View-specific Options
    children:
      - listDayFormat
      - listDayAltFormat
  - article: list-day-render-hooks
    points:
      - listDayClass
      - listDayBodyClass
  - article: list-day-header-render-hooks
    points:
      - listDayHeaderClass
      - listDayHeaderInnerClass
      - listDayHeaderContent
      - listDayHeaderDidMount
      - listDayHeaderWillUnmount
  - article: no-events-render-hooks
    points:
      - noEventsClass
      - noEventsInnerClass
      - noEventsContent
      - noEventsDidMount
      - noEventsWillUnmount
demos:
  - list-view-demo
---

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 "No events to display" screen is displayed, which can be customized via [render hooks](no-events-render-hooks). There are 4 preset list views: **listDay**, **listWeek**, **listMonth**, and **listYear**. They can be initialized in an [ES6 setup](initialize-es6) like so:

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

Or you can choose to initialized the List views [as a global bundle](initialize-globals):

```html
<script src='<fullcalendar-dist>/all.global.js'></script>
<script src='<fullcalendar-dist>/themes/monarch/global.js'></script>
<link href='<fullcalendar-dist>/skeleton.css' rel='stylesheet' />
<link href='<fullcalendar-dist>/themes/monarch/theme.css' rel='stylesheet' />
<link href='<fullcalendar-dist>/themes/monarch/palettes/purple.css' rel='stylesheet' />
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'listWeek'
});
...
</script>
```

If you'd like a different interval of time, you can create a [custom view](custom-view-with-settings) 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  in the [event render hooks](event-render-hooks) and [eventClick](eventClick).

## Event Appearance

The event appearance can be controlled by [List Item Event Render Hooks](list-item-event-render-hooks).

In the following example, we pass non-standard information about events through the `extendedProps` hash property. Then, we change the display of the event row and dot marker depending on a custom _status_ property:

```js
var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'listWeek',
  events: [
    {
      title: 'Meeting',
      start: '2019-08-12T14:30:00',
      extendedProps: {
        status: 'done'
      }
    },
    {
      title: 'Birthday Party',
      start: '2019-08-13T07:00:00',
      color: 'green'
    }
  ],
  listItemEventClass: (data) => (
    data.event.extendedProps.status === 'done'
      ? 'list-item-event-done'
      : ''
  ),
  listItemEventBeforeClass: (data) => (
    data.event.extendedProps.status === 'done'
      ? 'list-item-event-dot-done'
      : '',
  ),
});
```

```css
/* CSS */

.list-item-event-done {
  background-color: red;
}

.list-item-event-dot-done {
  background-color: white;
}
```

## Toolbar Buttons

By default, the [Toolbar](toolbar) will render buttons for list-view as the text "List". To opt-out of this behavior, and render duration-based buttons like "Week" or "Month", set `listText: false`.