• Calendar日历
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • nz-calendarcomponent

    Calendar日历

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

    何时使用

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

    单独引入此组件

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

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

    代码演示

    Calendar日历 - 图1

    基本

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

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

    Calendar日历 - 图2

    通知事项日历

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

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

    Calendar日历 - 图3

    卡片模式

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

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

    Calendar日历 - 图4

    选择功能

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

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

    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
    [nzCard]是否不全屏显示booleanfalse
    [nzDateCell]（可作为内容）自定义渲染日期单元格，模版内容会被追加到单元格TemplateRef<Date>-
    [nzDateFullCell]（可作为内容）自定义渲染日期单元格，模版内容覆盖单元格TemplateRef<Date>-
    [nzMonthCell]（可作为内容）自定义渲染月单元格，模版内容会被追加到单元格TemplateRef<Date>-
    [nzMonthFullCell]（可作为内容）自定义渲染月单元格，模版内容覆盖单元格TemplateRef<Date>-
    (nzPanelChange)面板变化的回调EventEmitter<{ date: Date, mode: 'month' | 'year' }>-
    (nzSelectChange)选择日期的回调EventEmitter<Date>-