# Custom Views via Settings

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

It is possible to customize an existing available view by tweaking settings.

If you'd like to take one of the existing view types, like [dayGrid](https://legacy.fullcalendar.io/v4/daygrid-view.md) or [timeGrid](https://legacy.fullcalendar.io/v4/timegrid-view.md), but display it with a custom duration, like **4-days** instead of the stock 1-week or 1-day, do something like the following:

```js
var calendar = new Calendar(calendarEl, {
  header: {
    center: 'dayGridMonth,timeGridFourDay' // buttons for switching between views
  },
  views: {
    timeGridFourDay: {
      type: 'timeGrid',
      duration: { days: 4 },
      buttonText: '4 day'
    }
  }
});
```

We use the `views` option similar to how [View-Specific Options](https://legacy.fullcalendar.io/v4/view-specific-options.md) work but with the very important addition of the `type` property. Also, a date-range parameter is required, whether it be [duration](https://legacy.fullcalendar.io/v4/duration.md), [visibleRange](https://legacy.fullcalendar.io/v4/visibleRange.md), or [dayCount](https://legacy.fullcalendar.io/v4/dayCount.md).

We have chosen `"timeGridFourDay"` to be the name of our new custom view.

Also, in the above example, `buttonText` has been used to customize the header button's text. Notice how it has been specified as a single string, as opposed to an object hash, the way it is done in the global options.


## A Simpler Approach for One View

When your calendar needs to display a *single* view with custom date range logic, you can use this simplified approach instead. No need to define entries in the `view` object.

```js
var calendar = new Calendar(calendarEl, {
  defaultView: 'timeline', // the name of a generic view
  duration: { days: 3 }
});
```