Date Ranges

The MultiViewCalendar enables you to display a start-end date period as a selection range.

To set the selection range, use the selectionRange property.

For an automated range selection, refer to DateRangeSelectionDirective.

  selector: 'my-app',
  template: `
    <div class="example-config">
            Start: <kendo-dateinput [(value)]="range.start"></kendo-dateinput>
            End: <kendo-dateinput [(value)]="range.end"></kendo-dateinput>
        [focusedDate]="range.start || range.end"
class AppComponent {
    public range = {
        start: new Date(2018, 10, 10),
        end: new Date(2018, 10, 20)

In this article