All Components

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.

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