Calendar日历

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

何时使用#

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

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

代码演示

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
加载中
20243月
26
    27
      28
        29
          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

                                                                                一个复杂的应用示例,用 nzDateCellnzMonthCell 模版来自定义需要渲染的数据。

                                                                                expand codeexpand code
                                                                                加载中
                                                                                20243月
                                                                                26
                                                                                27
                                                                                28
                                                                                29
                                                                                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

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

                                                                                expand codeexpand code
                                                                                加载中
                                                                                Your selected date: 2017-01-25
                                                                                20171月
                                                                                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

                                                                                26
                                                                                27
                                                                                28
                                                                                29
                                                                                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

                                                                                自定义日历头部内容。

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