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.

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

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.

expand codeexpand code
Loading...
2024Apr
Su Mo Tu We Th Fr Sa
31
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
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.
Notice Calendar

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

expand codeexpand code
Loading...
2024Apr
Su Mo Tu We Th Fr Sa
31
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
1
2
3
4
5
6
7
8
9
10
11
Card

Nested inside a container element for rendering in limited space.

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

expand codeexpand code
Loading...

Custom header

Su Mo Tu We Th Fr Sa
31
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
1
2
3
4
5
6
7
8
9
10
11
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 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>

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>-