visibleRange 3.3.0
Sets the exact date range that is visible in a view.
Object or Function
If your calendar has only one view, you can set the visible range explicitly:
$('#calendar').fullCalendar({
defaultView: 'agenda',
visibleRange: {
start: '2017-03-22',
end: '2017-03-25'
}
});
The visibleRange
object must have start
/end
properties that resolve to Moment values. The end
moment is exclusive, just like all other places in the API.
You can also specify a function that dynamically generates a range from the current date marker. The following example renders one day before the current date, and two days after:
$('#calendar').fullCalendar({
defaultView: 'agenda',
visibleRange: function(currentDate) {
return {
start: currentDate.clone().subtract(1, 'days'),
end: currentDate.clone().add(3, 'days') // exclusive end, so 3
};
}
});
The above examples can be written as explicit Custom Views as well:
$('#calendar').fullCalendar({
defaultView: 'pastAndFutureView',
views: {
pastAndFutureView: {
visibleRange: function(currentDate) {
return {
start: currentDate.clone().subtract(1, 'days'),
end: currentDate.clone().add(3, 'days') // exclusive end, so 3
};
}
}
}
});
If you need to change the visibleRange
after initialization, you can do that using the standard technique for setting options dynamically:
$('#calendar').fullCalendar('option', 'visibleRange', {
start: '2017-04-01',
end: '2017-04-05'
});
When it gets called
When specified as a function, visibleRange
will be called multiple times for each view render:
- to determine the current view’s range
- to determine if the previous view is valid
- to determine if the next view is valid
Please generate your date range based on the received currentDate
. Do not use the Calendar’s getDate()
.