New to Kendo UI for AngularStart a free 30-day trial

Date Ranges

The DateRange component utilizes the MultiViewCalendar component, which enables the selection of date ranges.

To enable the MultiViewCalendar range selection, set the selection input property to range. This configuration will update the selection range upon user interaction.

The following example demonstrates how to define the MultiViewCalendar with a selection range.

Change Theme
Theme
Loading ...

Calendar Selection Ranges

The DateRangeSelection directive allows you to set a specific date range selection and listen to any changes of that range.

The DateRangeSelection directive will be deprecated in a future version. We recommend using the MultiViewCalendar range selection.

The following example demonstrates how to always select a whole week on click.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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 DateRangeSelection directive will be deprecated in a future version. We recommend using the MultiViewCalendar range selection.

The following example demonstrates how to enforce updates to the end selection range only.

Change Theme
Theme
Loading ...