All Components

Templates

The Calendar enables you to customize the content of each cell by using cell templates.

To define a cell template, nest an <ng-template> tag with one of the available cell template directives inside the <kendo-calendar> selector. The template context is set to the current Calendar component. To get a reference to the current date, use the let-date directive.

The available cell template directives are:

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

@Component({
  selector: 'my-app',
  template: `
      <style>
        .meeting {
          position: relative;
          color: #00a1e8;
        }

        .meeting:after {
            position: absolute;
            bottom: -2px;
            left: 50%;
            width: 3px;
            height: 3px;
            margin-left: -1.5px;
            content: '';
            border-radius: 50%;
            background-color: #00a1e8;
        }

        .k-state-selected .meeting {
          color: #fff;
        }

        .k-state-selected .meeting:after {
          background-color: #fff;
        }

        .weeknumber-cell {
            color: red;
        }
      </style>
      <kendo-calendar [weekNumber]="true">
        <ng-template kendoCalendarMonthCellTemplate let-date>
            <span [ngClass]="isMeeting(date)">{{date.getDate()}}</span>
        </ng-template>
        <ng-template kendoCalendarYearCellTemplate let-context="cellContext">
            <span [ngClass]="isYearMeeting(context.value)">{{context.formattedValue}}</span>
        </ng-template>
        <ng-template kendoCalendarDecadeCellTemplate let-context="cellContext">
            <span [ngClass]="isDecadeMeeting(context.value)">{{context.formattedValue}}</span>
        </ng-template>
        <ng-template kendoCalendarCenturyCellTemplate let-context="cellContext">
            <span [ngClass]="isCenturyMeeting(context.value)">{{context.formattedValue}}</span>
        </ng-template>
        <ng-template kendoCalendarWeekNumberCellTemplate let-context="cellContext">
            <span class="weeknumber-cell">{{context.formattedValue}}</span>
        </ng-template>
        <ng-template kendoCalendarHeaderTitleTemplate let-title>
            {{title}} !!!
        </ng-template>
        <ng-template kendoCalendarNavigationItemTemplate let-title let-date="date" let-view="activeView">
            {{view === 'month' && date.getMonth() === 0 ? 'Jan' : title}}
        </ng-template>
      </kendo-calendar>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public isMeeting(date: Date) {
        return /10|15|20/.test(date.getDate()) ? 'meeting' : '';
    }
    public isYearMeeting(date: Date) {
        return date.getMonth() % 3 ? 'meeting' : '';
    }
    public isDecadeMeeting(date: Date) {
        return date.getDate() % 2 ? 'meeting' : '';
    }
    public isCenturyMeeting(date: Date) {
        return date.getDate() % 20 ? 'meeting' : '';
    }
}
In this article