Components / Date Inputs / MultiViewCalendar

Getting Started with Kendo UI for Angular MultiViewCalendar

The MultiViewCalendar is an Angular form control that represents a graphical Gregorian calendar with multiple horizontal views.

It supports the selection of and navigation between dates as well as data templates and ranges for scheduling appointments.

Basic Usage

The following example demonstrates the MultiViewCalendar in action.

@Component({
selector: 'my-app',
styles: [ '.k-calendar { margin: 0 auto; }' ],
template: `
<kendo-multiviewcalendar></kendo-multiviewcalendar>
`
})
class AppComponent {}

Functionality and Features

Events

The following example demonstrates basic MultiViewCalendar events.

import { Component, ViewEncapsulation } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'my-app',
  template: `
    <div class="container-fluid">
        <div class="row">
            <kendo-multiviewcalendar
                (blur)="onBlur()"
                (focus)="onFocus()"
                (activeViewChange)="onActiveViewChange($event)"
                (cellEnter)="onCellEnter($event)"
                (cellLeave)="onCellLeave($event)"
                (valueChange)="onChange($event)"
            >
            </kendo-multiviewcalendar>
            <event-log title="Event log" [events]="events">
            </event-log>
        </div>
    </div>
  `
})
export class AppComponent {
  public events: string[] = [];

  constructor(private intl: IntlService) {}

  public onActiveDateChange(value: Date): void {
    this.log('activeDateChange', value);
  }

  public onBlur(): void {
    this.log('blur');
  }

  public onFocus(): void {
    this.log('focus');
  }

  public onCellEnter(value: Date): void {
    this.log('cell entered: ', value);
  }

  public onCellLeave(value: Date): void {
    this.log('cell left: ', value);
  }

  public onChange(value: Date): void {
    this.log('change', value);
  }

  private log(event: string, value?: Date): void {
    this.events = [`${event}${this.formatValue(value)}`].concat(this.events);
  }

  private formatValue(value?: Date): string {
    return value ? ` - ${this.intl.formatDate(value, 'd')}` : '';
  }
}

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';
import { EventLogComponent } from './event-log.component';

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

export class AppModule { }

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

@Component({
  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events">{{ event }}</li>
      </ul>
    </div>
  `
})
export class EventLogComponent {
  @Input() title: string;
  @Input() events: string[];
}

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