Calendar日历

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

何时使用#

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

代码演示

2012
12月
周一周二周三周四周五周六周日
26
27
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-calendar-basic',
  template: `
    <nz-calendar [(ngModel)]="date" [(nzMode)]="mode" (nzPanelChange)="panelChange($event)"></nz-calendar>
  `
})
export class NzDemoCalendarBasicComponent {
  date = new Date(2012, 11, 21);
  mode = 'month';

  panelChange(change: { date: Date; mode: string }): void {
    console.log(change.date, change.mode);
  }
}
2019
5月
周一周二周三周四周五周六周日
29
30
01
02
03
04
05
06
07
08
  • This is warning event.
  • This is usual event.
09
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
01
02
03
04
05
06
07
08
  • This is warning event.
  • This is usual event.
09

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-calendar-notice-calendar',
  template: `
    <nz-calendar>
      <ul *nzDateCell="let date" class="events">
        <ng-container [ngSwitch]="date.getDate()">
          <ng-container *ngSwitchCase="8">
            <li *ngFor="let item of listDataMap.eight">
              <nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge>
            </li>
          </ng-container>
          <ng-container *ngSwitchCase="10">
            <li *ngFor="let item of listDataMap.ten">
              <nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge>
            </li>
          </ng-container>
          <ng-container *ngSwitchCase="11">
            <li *ngFor="let item of listDataMap.eleven">
              <nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge>
            </li>
          </ng-container>
        </ng-container>
      </ul>
      <ng-container *nzMonthCell="let month">
        <div *ngIf="getMonthData(month) as monthData" class="notes-month">
          <section>{{ monthData }}</section>
          <span>Backlog number</span>
        </div>
      </ng-container>
    </nz-calendar>
  `,
  styles: [
    `
      .events {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .events .ant-badge-status {
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
        font-size: 12px;
      }

      .notes-month {
        text-align: center;
        font-size: 28px;
      }

      .notes-month section {
        font-size: 28px;
      }
    `
  ]
})
export class NzDemoCalendarNoticeCalendarComponent {
  listDataMap = {
    eight: [
      { type: 'warning', content: 'This is warning event.' },
      { type: 'success', content: 'This is usual event.' }
    ],
    ten: [
      { type: 'warning', content: 'This is warning event.' },
      { type: 'success', content: 'This is usual event.' },
      { type: 'error', content: 'This is error event.' }
    ],
    eleven: [
      { type: 'warning', content: 'This is warning event' },
      { type: 'success', content: 'This is very long usual event........' },
      { type: 'error', content: 'This is error event 1.' },
      { type: 'error', content: 'This is error event 2.' },
      { type: 'error', content: 'This is error event 3.' },
      { type: 'error', content: 'This is error event 4.' }
    ]
  };

  getMonthData(date: Date): number | null {
    if (date.getMonth() === 8) {
      return 1394;
    }
    return null;
  }
}
2019
5月
周一周二周三周四周五周六周日
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-calendar-card',
  template: `
    <div [ngStyle]="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
      <nz-calendar
        nzCard
        (nzSelectChange)="onValueChange($event)"
        (nzPanelChange)="onPanelChange($event)"
      ></nz-calendar>
    </div>
  `
})
export class NzDemoCalendarCardComponent {
  onValueChange(value: Date): void {
    console.log(`Current value: ${value}`);
  }

  onPanelChange(change: { date: Date; mode: string }): void {
    console.log(`Current value: ${change.date}`);
    console.log(`Current mode: ${change.mode}`);
  }
}
Your selected date: 2017-01-25
2017
1月
周一周二周三周四周五周六周日
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-calendar-select',
  template: `
    <nz-alert nzMessage="Your selected date: {{ selectedValue | date: 'yyyy-MM-dd' }}"></nz-alert>
    <nz-calendar [(ngModel)]="selectedValue" (nzSelectChange)="selectChange($event)"></nz-calendar>
  `
})
export class NzDemoCalendarSelectComponent {
  selectedValue = new Date('2017-01-25');

  selectChange(select: Date): void {
    console.log(`Select value: ${select}`);
  }
}

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>

单独引入此组件#

想要了解更多关于单独引入组件的内容,可以在快速上手页面进行查看。

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

nz-calendar#

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