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

2012
Dec
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.

expand codeexpand code
      Loading...
2025
Jul
Su Mo Tu We Th Fr Sa
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.
9
Notice Calendar

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

expand codeexpand code
      Loading...
2025
Jul
Su Mo Tu We Th Fr Sa
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
9
Card

Nested inside a container element for rendering in limited space.

expand codeexpand code
      Loading...
Your selected date: 2017-01-25
2017
Jan
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.

expand codeexpand code
      Loading...

Custom header

Su Mo Tu We Th Fr Sa
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
9
Customize Header

Customize Calendar header content.

expand codeexpand code
      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>-