---
title: validRange
---

Limits which dates the user can navigate to and where events can go.

<div class='spec'>

Object

</div>

Dates outside of the valid range will be grayed-out. The user will not be able to drag or resize events into these areas.

The prev/next buttons in the [headerToolbar](headerToolbar) will be grayed out to prevent the user from navigating to an invalid range.

The `validRange` property can have `start` and `end` properties. You may specify one without specifying the other to create an open-ended range.

```js
// constrain to a discrete range
var calendar = new Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  validRange: {
    start: '2017-05-01',
    end: '2017-06-01'
  }
});

// constrain to an open-ended range
var calendar = new Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  validRange: {
    start: '2017-05-01'
  }
});
```

You can also dynamically generate the range via a function. It must return an object in the same format:

```js
var calendar = new Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  validRange: function(todayDate) {
    return {
      start: todayDate,
      end: addMonths(todayDate, 1), // fictional util
    };
  }
});
```

This function receives the calendar's "today" date, which is the start-of-day of the ["now"](now) datetime. It is useful for constraining navigation and events to a window of time in the future.


## When it gets called

When specified as a function, `validRange` will be called multiple times for each view render:

1. to determine the current view's range
2. to determine if the previous view is valid
3. to determine if the next view is valid

Please be prepared for repeated calls to this function.