Calendar

Container for displaying data in calendar form.
Import
Source components/calendar
Docs Edit this page

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#

2012Dec
Su Mo Tu We Th Fr Sa
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
Basic

A basic calendar component with Year/Month switch.

      Loading...
2025Oct
Su Mo Tu We Th Fr Sa
28
29
30
1
2
3
4
5
6
7
8
  • This is warning event.
  • This is usual event.
9
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
1
2
3
4
5
6
7
8
  • This is warning event.
  • This is usual event.
Notice Calendar

This component can be rendered by using nzDateCell and nzMonthCell with the data you need.

      Loading...
2025Oct
Su Mo Tu We Th Fr Sa
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
Card

Nested inside a container element for rendering in limited space.

      Loading...
Your selected date: 2017-01-25
2017Jan
Su Mo Tu We Th Fr Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
Selectable Calendar

A basic calendar component with Year/Month switch.

      Loading...

Custom header

Su Mo Tu We Th Fr Sa
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
Customize Header

Customize Calendar header content.

      Loading...

API#

Note: Some of Calendar's locale are coming from Angular i18n, that should be provided in the file app.config.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>

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
[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>-
[nzCustomHeader]Render custom header in panelstring | TemplateRef<void>-
[nzDisabledDate]specify the date that cannot be selected(current: Date) => boolean-
(nzPanelChange)Callback for when panel changesEventEmitter<{ date: Date, mode: 'month' | 'year' }>-
(nzSelectChange)A callback function of selected itemEventEmitter<Date>-