All Components

Multiple Views

The MultiViewCalendar enables you to control the number of the horizontally rendered views.

To set the view number, use the views property. By default, the MultiViewCalendar renders two views.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        <label>
        Number of rendered views:
        <input type="number" min="1" [value]="views" (change)="updateViews($event)" />
        </label>
    </div>
      <kendo-multiviewcalendar
          [views]="views"
      ></kendo-multiviewcalendar>
  `
})
export class AppComponent {
  public views = 2;
  public updateViews(args: number): void {
    this.views = parseInt(args.target.value, 10);
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MultiViewCalendarModule } from '@progress/kendo-angular-dateinputs';

import { AppComponent } from './app.component';

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

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