Calendar日历

按照日历形式展示数据的容器。

何时使用#

当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。

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

代码演示

2012 12月
一 二 三 四 五 六 日
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
6
基本

一个通用的日历面板，支持年/月切换。

expand codeexpand code
      加载中
2024 11月
一 二 三 四 五 六 日
28
29
30
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.
通知事项日历

一个复杂的应用示例，用 nzDateCell 和 nzMonthCell 模版来自定义需要渲染的数据。

expand codeexpand code
      加载中
2024 11月
一 二 三 四 五 六 日
28
29
30
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
卡片模式

用于嵌套在空间有限的容器中。

expand codeexpand code
      加载中
Your selected date: 2017-01-25
2017 1月
一 二 三 四 五 六 日
26
27
28
29
30
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
31
1
2
3
4
5
选择功能

一个通用的日历面板，支持年/月切换。

expand codeexpand code
      加载中

Custom header

一 二 三 四 五 六 日
28
29
30
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
自定义头部

自定义日历头部内容。

expand codeexpand code
      加载中

API#

**注意：**Calendar 的部分 locale 来自于 Angular 自身的国际化支持，需要在 app.module.ts 文件中 引入相应的 Angular 语言包。

例如：

import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);
<nz-calendar
  [nzDateCell]="dateCellTpl"
  [(ngModel)]="selectedDate"
  [(nzMode)]="mode"
  (nzPanelChange)="panelChange($event)"
  (nzSelectChange)="selectChange($event)"
>
  <!-- 定义 Cell 的另一种方式 -->
  <div *dateCell>Foo</div>
</nz-calendar>
<!-- 传入 TemplateRef 的方式 -->
<ng-template #dateCellTpl let-date><span>{{ date | date:'d'}}</span></ng-template>

nz-calendar#

参数说明类型默认值
[(ngModel)]（可双向绑定）展示日期Date当前日期
[(nzMode)]（可双向绑定）显示模式'month' | 'year''month'
[nzFullscreen]是否全屏显示booleantrue
[nzDateCell]（可作为内容）自定义渲染日期单元格，模版内容会被追加到单元格TemplateRef<Date>-
[nzDateFullCell]（可作为内容）自定义渲染日期单元格，模版内容覆盖单元格TemplateRef<Date>-
[nzMonthCell]（可作为内容）自定义渲染月单元格，模版内容会被追加到单元格TemplateRef<Date>-
[nzMonthFullCell]（可作为内容）自定义渲染月单元格，模版内容覆盖单元格TemplateRef<Date>-
[nzCustomHeader]自定义头部内容string | TemplateRef<void>-
[nzDisabledDate]不可选择的日期(current: Date) => boolean-
(nzPanelChange)面板变化的回调EventEmitter<{ date: Date, mode: 'month' | 'year' }>-
(nzSelectChange)选择日期的回调EventEmitter<Date>-