Calendar日历

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

何时使用

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

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

代码演示

Calendar日历 - 图1

基本

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-calendar-basic',
  4. template: `
  5. <nz-calendar [(ngModel)]="date" [(nzMode)]="mode" (nzPanelChange)="panelChange($event)"></nz-calendar>
  6. `
  7. })
  8. export class NzDemoCalendarBasicComponent {
  9. date = new Date(2012, 11, 21);
  10. mode = 'month';
  11. panelChange(change: { date: Date; mode: string }): void {
  12. console.log(change.date, change.mode);
  13. }
  14. }

Calendar日历 - 图2

通知事项日历

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-calendar-notice-calendar',
  4. template: `
  5. <nz-calendar>
  6. <ul *nzDateCell="let date" class="events">
  7. <ng-container [ngSwitch]="date.getDate()">
  8. <ng-container *ngSwitchCase="8">
  9. <li *ngFor="let item of listDataMap.eight">
  10. <nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge>
  11. </li>
  12. </ng-container>
  13. <ng-container *ngSwitchCase="10">
  14. <li *ngFor="let item of listDataMap.ten">
  15. <nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge>
  16. </li>
  17. </ng-container>
  18. <ng-container *ngSwitchCase="11">
  19. <li *ngFor="let item of listDataMap.eleven">
  20. <nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge>
  21. </li>
  22. </ng-container>
  23. </ng-container>
  24. </ul>
  25. <ng-container *nzMonthCell="let month">
  26. <div *ngIf="getMonthData(month) as monthData" class="notes-month">
  27. <section>{{ monthData }}</section>
  28. <span>Backlog number</span>
  29. </div>
  30. </ng-container>
  31. </nz-calendar>
  32. `,
  33. styles: [
  34. `
  35. .events {
  36. list-style: none;
  37. margin: 0;
  38. padding: 0;
  39. }
  40. .events .ant-badge-status {
  41. overflow: hidden;
  42. white-space: nowrap;
  43. width: 100%;
  44. text-overflow: ellipsis;
  45. font-size: 12px;
  46. }
  47. .notes-month {
  48. text-align: center;
  49. font-size: 28px;
  50. }
  51. .notes-month section {
  52. font-size: 28px;
  53. }
  54. `
  55. ]
  56. })
  57. export class NzDemoCalendarNoticeCalendarComponent {
  58. listDataMap = {
  59. eight: [
  60. { type: 'warning', content: 'This is warning event.' },
  61. { type: 'success', content: 'This is usual event.' }
  62. ],
  63. ten: [
  64. { type: 'warning', content: 'This is warning event.' },
  65. { type: 'success', content: 'This is usual event.' },
  66. { type: 'error', content: 'This is error event.' }
  67. ],
  68. eleven: [
  69. { type: 'warning', content: 'This is warning event' },
  70. { type: 'success', content: 'This is very long usual event........' },
  71. { type: 'error', content: 'This is error event 1.' },
  72. { type: 'error', content: 'This is error event 2.' },
  73. { type: 'error', content: 'This is error event 3.' },
  74. { type: 'error', content: 'This is error event 4.' }
  75. ]
  76. };
  77. getMonthData(date: Date): number | null {
  78. if (date.getMonth() === 8) {
  79. return 1394;
  80. }
  81. return null;
  82. }
  83. }

Calendar日历 - 图3

卡片模式

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-calendar-card',
  4. template: `
  5. <div [ngStyle]="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
  6. <nz-calendar [nzFullscreen]="false" (nzSelectChange)="onValueChange($event)" (nzPanelChange)="onPanelChange($event)"></nz-calendar>
  7. </div>
  8. `
  9. })
  10. export class NzDemoCalendarCardComponent {
  11. onValueChange(value: Date): void {
  12. console.log(`Current value: ${value}`);
  13. }
  14. onPanelChange(change: { date: Date; mode: string }): void {
  15. console.log(`Current value: ${change.date}`);
  16. console.log(`Current mode: ${change.mode}`);
  17. }
  18. }

Calendar日历 - 图4

选择功能

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-calendar-select',
  4. template: `
  5. <nz-alert nzMessage="Your selected date: {{ selectedValue | date: 'yyyy-MM-dd' }}"></nz-alert>
  6. <nz-calendar [(ngModel)]="selectedValue" (nzSelectChange)="selectChange($event)"></nz-calendar>
  7. `
  8. })
  9. export class NzDemoCalendarSelectComponent {
  10. selectedValue = new Date('2017-01-25');
  11. selectChange(select: Date): void {
  12. console.log(`Select value: ${select}`);
  13. }
  14. }

API

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

例如:

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

nz-calendarcomponent

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