MultiViewCalendar Overview
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
- Disabled calendar
- Focused and selected dates
- Multiple views
- Selected date range
- Active view
- View selection depth
- Templates
- Week number column
- Forms support
- Integration with JSON
- Globalization
- Keyboard navigation
- Accessibility
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);