Date Ranges
The DateRange component utilizes the MultiViewCalendar component, which enables the selection of date ranges.
By default, the MultiViewCalendar displays a selection range, but does not update that range on user interaction. To enable this functionality, decorate the calendar with the DateRangeSelection directive. The directive will update the selection range upon user interaction and will toggle the end of the active range.
The following example demonstrates how to define the MultiViewCalendar with a selection range.
Calendar Selection Ranges
The DateRangeSelection directive allows you to set a specific date range selection and listen to any changes of that range.
The following example demonstrates how to always select a whole week on click.
Setting Ranges with a Service
The DateRangeService communicates the changes that are performed by the DateRange components and directives.
The following example demonstrates how to propagate a change in the selection range to all relevant DateRange components.
Controlling the Active Selection End
The DateRangeSelection directive allows you to determine the end of the selection range which will be updated. By default, the directive toggles the active selection end on change.
The following example demonstrates how to enforce updates to the end selection range only.
