# List View

> FullCalendar v6 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v6/list-view
>
> Latest version (v7): https://fullcalendar.io/docs/list-view.md

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](https://legacy.fullcalendar.io/v6/no-events-render-hooks.md). There are 4 preset list views: **listDay**, **listWeek**, **listMonth**, and **listYear**. They can be initialized in an [ES6 setup](https://legacy.fullcalendar.io/v6/initialize-es6.md) like so:

```
npm install --save \
  @fullcalendar/core \
  @fullcalendar/list
```

```js
import { Calendar } from '@fullcalendar/core';
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](https://legacy.fullcalendar.io/v6/initialize-globals.md):

```html
<script src='fullcalendar/index.global.js'></script>
<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](https://legacy.fullcalendar.io/v6/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](https://legacy.fullcalendar.io/v6/event-render-hooks.md) and [eventClick](https://legacy.fullcalendar.io/v6/eventClick.md).

## Event Appearance

FullCalendar options and Event properties control the appearance of events in list view. For example, the color of the event dot marker is the same as the event `backgroundColor`. However, a lot more can be achieved in the [event render hooks](https://legacy.fullcalendar.io/v6/event-render-hooks.md), where the style object of the [Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) can be modified.

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',
      backgroundColor: 'green',
      borderColor: 'green'
    }
  ],
  eventDidMount: function(info) {
    if (info.event.extendedProps.status === 'done') {

      // Change background color of row
      info.el.style.backgroundColor = 'red';

      // Change color of dot marker
      var dotEl = info.el.getElementsByClassName('fc-event-dot')[0];
      if (dotEl) {
        dotEl.style.backgroundColor = 'white';
      }
    }
  }

});
```

## List-View-specific Options

- [listDayFormat](https://legacy.fullcalendar.io/v6/listDayFormat.md) - A Date Formatter that affects the text on the left side of the day headings in list view.
- [listDaySideFormat](https://legacy.fullcalendar.io/v6/listDaySideFormat.md) - A Date Formatter that affects the text on the right side of the day headings in list view.
- [No-Events Render Hooks](https://legacy.fullcalendar.io/v6/no-events-render-hooks.md) - In list view, the “No events to display” message.

## Demos

- [Assorted list views](https://legacy.fullcalendar.io/v6/list-view-demo)