Calendar

Container for displaying data in calendar form.

When To Use#

When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.

Examples

2012
Dec
SuMoTuWeThFrSa
25
26
27
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12

A basic calendar component with Year/Month switch.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-calendar-basic',
  template: `
    <nz-calendar [(ngModel)]="date" [(nzMode)]="mode" (nzPanelChange)="panelChange($event)"></nz-calendar>
  `
})
export class NzDemoCalendarBasicComponent {
  date = new Date(2012, 11, 21);
  mode = 'month';

  panelChange(change: { date: Date; mode: string }): void {
    console.log(change.date, change.mode);
  }
}
2019
May
SuMoTuWeThFrSa
28
29
30
01
02
03
04
05
06
07
08
  • This is warning event.
  • This is usual event.
09
10
  • This is warning event.
  • This is usual event.
  • This is error event.
11
  • This is warning event
  • This is very long usual event........
  • This is error event 1.
  • This is error event 2.
  • This is error event 3.
  • This is error event 4.
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
07
08
  • This is warning event.
  • This is usual event.

This component can be rendered by using dateCell and monthCell with the data you need.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-calendar-notice-calendar',
  template: `
    <nz-calendar>
      <ul *nzDateCell="let date" class="events">
        <ng-container [ngSwitch]="date.getDate()">
          <ng-container *ngSwitchCase="8">
            <li *ngFor="let item of listDataMap.eight">
              <nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge>
            </li>
          </ng-container>
          <ng-container *ngSwitchCase="10">
            <li *ngFor="let item of listDataMap.ten">
              <nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge>
            </li>
          </ng-container>
          <ng-container *ngSwitchCase="11">
            <li *ngFor="let item of listDataMap.eleven">
              <nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge>
            </li>
          </ng-container>
        </ng-container>
      </ul>
      <ng-container *nzMonthCell="let month">
        <div *ngIf="getMonthData(month) as monthData" class="notes-month">
          <section>{{ monthData }}</section>
          <span>Backlog number</span>
        </div>
      </ng-container>
    </nz-calendar>
  `,
  styles: [
    `
      .events {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .events .ant-badge-status {
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
        font-size: 12px;
      }

      .notes-month {
        text-align: center;
        font-size: 28px;
      }

      .notes-month section {
        font-size: 28px;
      }
    `
  ]
})
export class NzDemoCalendarNoticeCalendarComponent {
  listDataMap = {
    eight: [
      { type: 'warning', content: 'This is warning event.' },
      { type: 'success', content: 'This is usual event.' }
    ],
    ten: [
      { type: 'warning', content: 'This is warning event.' },
      { type: 'success', content: 'This is usual event.' },
      { type: 'error', content: 'This is error event.' }
    ],
    eleven: [
      { type: 'warning', content: 'This is warning event' },
      { type: 'success', content: 'This is very long usual event........' },
      { type: 'error', content: 'This is error event 1.' },
      { type: 'error', content: 'This is error event 2.' },
      { type: 'error', content: 'This is error event 3.' },
      { type: 'error', content: 'This is error event 4.' }
    ]
  };

  getMonthData(date: Date): number | null {
    if (date.getMonth() === 8) {
      return 1394;
    }
    return null;
  }
}
2019
May
SuMoTuWeThFrSa
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
07
08

Nested inside a container element for rendering in limited space.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-calendar-card',
  template: `
    <div [ngStyle]="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
      <nz-calendar
        nzCard
        (nzSelectChange)="onValueChange($event)"
        (nzPanelChange)="onPanelChange($event)"
      ></nz-calendar>
    </div>
  `
})
export class NzDemoCalendarCardComponent {
  onValueChange(value: Date): void {
    console.log(`Current value: ${value}`);
  }

  onPanelChange(change: { date: Date; mode: string }): void {
    console.log(`Current value: ${change.date}`);
    console.log(`Current mode: ${change.mode}`);
  }
}
Your selected date: 2017-01-25
2017
Jan
SuMoTuWeThFrSa
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11

A basic calendar component with Year/Month switch.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-calendar-select',
  template: `
    <nz-alert nzMessage="Your selected date: {{ selectedValue | date: 'yyyy-MM-dd' }}"></nz-alert>
    <nz-calendar [(ngModel)]="selectedValue" (nzSelectChange)="selectChange($event)"></nz-calendar>
  `
})
export class NzDemoCalendarSelectComponent {
  selectedValue = new Date('2017-01-25');

  selectChange(select: Date): void {
    console.log(`Select value: ${select}`);
  }
}

API#

Note: Some of Calendar's locale are coming from Angular i18n, that should be provided in the file of app.module.ts.

For example:

import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
registerLocaleData(en);
<nz-calendar
  [nzDateCell]="dateCellTpl"
  [(ngModel)]="selectedDate"
  [(nzMode)]="mode"
  (nzPanelChange)="panelChange($event)"
  (nzSelectChange)="selectChange($event)">
  <!-- Another method for cell definition -->
  <div *nzDateCell>Foo</div>
</nz-calendar>
<!-- Passing TemplateRef -->
<ng-template #dateCellTpl let-date><span>{{ date | date:'d'}}</span></ng-template>

Import this Component Individually#

You can get more detail here.

import { NzCalendarModule } from 'ng-zorro-antd';

nz-calendar#

PropertyDescriptionTypeDefault
[(ngModel)](Two-way bindable) The current selected dateDatecurrent date
[(nzMode)]The display mode of the calendar (two-way bindable)'month'|'year''month'
[nzFullscreen]Whether to display in full-screenbooleantrue
[nzCard]Whether to not display in full-screenbooleanfalse
[nzDateCell](Contentable) Customize the display of the date cell, the template content will be appended to the cellTemplateRef<Date>-
[nzDateFullCell](Contentable) Customize the display of the date cell, the template content will override the cellTemplateRef<Date>-
[nzMonthCell](Contentable) Customize the display of the month cell, the template content will be appended to the cellTemplateRef<Date>-
[nzMonthFullCell](Contentable) Customize the display of the month cell, the template content will override the cellTemplateRef<Date>-
(nzPanelChange)Callback for when panel changesEventEmitter<{ date: Date, mode: 'month'|'year' }>-