All Components

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 the 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.

Basic Usage

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

@Component({
selector: 'my-app',
template: `
<div class="example-config">
    Selected range: {{ range | json }}
</div>
<kendo-multiviewcalendar
    kendoDateRangeSelection
    [(selectionRange)]="range"
></kendo-multiviewcalendar>
`
})
class AppComponent {
    public range = { start: null, end: null };
}

Calendar Selection Ranges

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

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

import { Component } from '@angular/core';
import { SelectionRange } from '@progress/kendo-angular-dateinputs';
import { Day, prevDayOfWeek, nextDayOfWeek } from '@progress/kendo-date-math';

@Component({
selector: 'my-app',
template: `
<div class="example-config">
    Selected range: {{ range | json }}
</div>

<i>Select a whole week.</i><br/>
<kendo-multiviewcalendar
    kendoDateRangeSelection
    [selectionRange]="range"
    (selectionRangeChange)="handleSelectionRange($event)"
></kendo-multiviewcalendar>
`
})
export class AppComponent {
    public range = {
        start: new Date(2018, 10, 4),
        end: new Date(2018, 10, 10)
    };

    public rangeLength = 7;

    public handleSelectionRange(range: SelectionRange): void {
        const firstWeekDay = prevDayOfWeek(range.start, Day.Sunday);
        const lastWeekDay = nextDayOfWeek(firstWeekDay, Day.Saturday);

        this.range = { start: firstWeekDay, end: lastWeekDay };
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, DateInputsModule ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Setting Ranges with 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.

import { Component, ViewChild } from '@angular/core';
import { DateRangeService, SelectionRange } from '@progress/kendo-angular-dateinputs';

@Component({
selector: 'my-app',
template: `
<div class="example-config">
    Selected range: {{ range | json }}
</div>
<div class="example-config">
    <button (click)="setNewRange()">Set a new range</button>
</div>
<kendo-daterange #daterange>
    <kendo-dateinput
        kendoDateRangeStartInput
        [(value)]="range.start"
    ></kendo-dateinput>
    <kendo-dateinput
        kendoDateRangeEndInput
        [(value)]="range.end"
    ></kendo-dateinput>
</kendo-daterange>

`
})
export class AppComponent {
    @ViewChild('daterange', { read: DateRangeService }) public service: DateRangeService;

    public range = { start: new Date(2018, 10, 4), end: new Date(2018, 10, 10) };

    public setNewRange(): void {
        this.service.setRange({
            start: new Date(2000, 9, 10),
            end: new Date(2000, 10, 10)
        });
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, DateInputsModule ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.


import { Component } from '@angular/core';
import { SelectionRangeEnd } from '@progress/kendo-angular-dateinputs';

@Component({
selector: 'my-app',
template: `
<div class="example-config">
    Selected range: {{ range | json }}
</div>
<i>Update only the end part of the selection range.</i><br/>
<kendo-multiviewcalendar
    kendoDateRangeSelection
    [(selectionRange)]="range"
    [activeRangeEnd]="activeRange"
    (activeRangeEndChange)="handleActiveRangeEnd($event)"
></kendo-multiviewcalendar>
`
})
export class AppComponent {
    public activeRange: SelectionRangeEnd = 'end';
    public range = {
        start: new Date(2018, 10, 10),
        end: new Date(2018, 10, 20)
    };

    public handleActiveRangeEnd(activeRange: SelectionRangeEnd): void {
        this.activeRange = activeRange;
        setTimeout(() => this.activeRange = 'end'); // enfore an `end` active range
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, DateInputsModule ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article