# List View

> FullCalendar v4 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v4/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 [noEventsMessage](https://legacy.fullcalendar.io/v4/noEventsMessage.md) is displayed. There are 4 preset list views: **listDay**, **listWeek**, **listMonth**, and **listYear**. They can be initialized in an [ES6 setup](https://legacy.fullcalendar.io/v4/initialize-es6.md) like so:

```js
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:

```html
<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](https://legacy.fullcalendar.io/v4/initialize-globals.md):

```html
<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](https://legacy.fullcalendar.io/v4/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 [eventRender](https://legacy.fullcalendar.io/v4/eventRender.md) and [eventClick](https://legacy.fullcalendar.io/v4/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 [`eventRender`](https://legacy.fullcalendar.io/v4/eventRender.md) callback, 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, {
  plugins: [ 'list' ],
  defaultView: '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'
    }
  ],
  eventRender: 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/v4/listDayFormat.md) - A Date Formatter that affects the text on the left side of the day headings in list view.
- [listDayAltFormat](https://legacy.fullcalendar.io/v4/listDayAltFormat.md) - A Date Formatter that affects the text on the right side of the day headings in list view.
- [noEventsMessage](https://legacy.fullcalendar.io/v4/noEventsMessage.md) - The text that is displayed in the middle of list view, alerting the user that there are no events within the given range.

## Demos

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