Calendar日历

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

基本

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

import { NzCalendarMode } from 'ng-zorro-antd/calendar';
@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);
  panelChange(change: { date: Date; mode: string }): void {
    console.log(change.date, change.mode);
  }
}

通知事项日历

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

卡片模式

import { Component } from '@angular/core';
@Component({
  template: `
    <div [ngStyle]="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
      <nz-calendar [nzFullscreen]="false" (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}`);
  }
}

选择功能

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

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

import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';