# List View

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.md). There are 4 preset list views: **listDay**, **listWeek**, **listMonth**, and **listYear**. They can be initialized in an [ES6 setup](initialize-es6.md) 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.md):

```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.md) 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.md) and [eventClick](eventClick.md).

## Event Appearance

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

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.md) 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`.

## Articles

- [List Day Render Hooks](list-day-render-hooks.md) - Customize the container elements for each day's section in List view. For the day-header row itself, see List Day Header Render Hooks.
- [List Day Header Render Hooks](list-day-header-render-hooks.md) - In List view, a "day header" is the row that displays the date above a group of events. Customize its appearance with these hooks. For the container elements of each day's section, see List Day Render Hooks.
- [No-Events Render Hooks](no-events-render-hooks.md) - In list view, the “No events to display” message.

## List-View-specific Options

- [listDayFormat](listDayFormat.md) - A Date Formatter that affects the text on the left side of the day headings in list view.
- [listDayAltFormat](listDayAltFormat.md) - A Date Formatter that affects the text on the right side of the day headings in list view.

## Demos

- [Assorted list views](list-view-demo)