Components / Date Inputs / Calendar

Getting Started with Kendo UI for Angular Calendar

The Calendar is a form component that represents a graphical Gregorian calendar.

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 Calendar in action.

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

Functionality and Features

Events

The following example demonstrates basic Calendar events.

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

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'my-app',
  template: `
    <div class="container-fluid">
        <div class="row">
            <kendo-calendar
                (blur)="onBlur()"
                (focus)="onFocus()"
                (activeViewChange)="onActiveViewChange($event)"
                (activeViewDateChange)="onActiveDateChange($event)"
                (valueChange)="onChange($event)"
            >
            </kendo-calendar>
            <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 onActiveViewChange(view: CalendarView): void {
    this.events = [`activeViewChanged: ${view}`].concat(this.events);
  }

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

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

  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 { CalendarModule } 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, CalendarModule ]
})

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