Forms Support

You can use the MultiViewCalendar in Template-driven and Reactive forms.

The component accepts Date values and updates the model each time a selection is changed.

Template-Driven Forms

The template-driven forms enable you to bind the MultiViewCalendar to the model by using the ngModel directive.

The following example demonstrates how to accomplish a two-way binding by using the ngModel directive.

View Source
Edit In Stackblitz  
Change Theme:

Reactive Forms

The FormGroup decorator provides a way to render reactive forms. For more details, refer to the Angular documentation.

The following example demonstrates how to use the MultiViewCalendar in a reactive form.

import {
} from '@angular/forms';

  selector: 'my-app',
  styles: ['.k-invalid { color: red; padding: 5px 0; }'],
  template: `
	<div class="example-config">
        Form value: {{ form.value | json }}

    <form [formGroup]="form">
      <kendo-multiviewcalendar formControlName="date" required></kendo-multiviewcalendar>
      <div [hidden]="isDateValid()" class="k-invalid">Date required. Please select one.</div>
class AppComponent {
    public form: FormGroup;

    constructor() {
        this.form = new FormGroup({
            date: new FormControl(null, Validators.required)

    public isDateValid(): boolean {

FormField Association

The following example demonstrates the usage of the MultiViewCalendar within a FormField with hint and error messages.

In this article

Not finding the help you need?