Calendar

Container for displaying data in calendar form.

When To Use#

When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.

Import this Component Individually#

You can get more detail here.

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

Examples

2012
Dec
SuMoTuWeThFrSa
25
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

A basic calendar component with Year/Month switch.

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
Nov
SuMoTuWeThFrSa
27
    28
      29
        30
          31
            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
                                                                  1
                                                                    2
                                                                      3
                                                                        4
                                                                          5
                                                                            6
                                                                              7

                                                                                This component can be rendered by using nzDateCell and nzMonthCell with the data you need.

                                                                                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
                                                                                Nov
                                                                                SuMoTuWeThFrSa
                                                                                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
                                                                                1
                                                                                2
                                                                                3
                                                                                4
                                                                                5
                                                                                6
                                                                                7

                                                                                Nested inside a container element for rendering in limited space.

                                                                                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
                                                                                        [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}`);
                                                                                  }
                                                                                }
                                                                                Your selected date: 2017-01-25
                                                                                2017
                                                                                Jan
                                                                                SuMoTuWeThFrSa
                                                                                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
                                                                                8
                                                                                9
                                                                                10
                                                                                11

                                                                                A basic calendar component with Year/Month switch.

                                                                                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#

                                                                                Note: Some of Calendar's locale are coming from Angular i18n, that should be provided in the file of app.module.ts.

                                                                                For example:

                                                                                import { registerLocaleData } from '@angular/common';
                                                                                import en from '@angular/common/locales/en';
                                                                                registerLocaleData(en);
                                                                                <nz-calendar
                                                                                  [nzDateCell]="dateCellTpl"
                                                                                  [(ngModel)]="selectedDate"
                                                                                  [(nzMode)]="mode"
                                                                                  (nzPanelChange)="panelChange($event)"
                                                                                  (nzSelectChange)="selectChange($event)">
                                                                                  <!-- Another method for cell definition -->
                                                                                  <div *nzDateCell>Foo</div>
                                                                                </nz-calendar>
                                                                                <!-- Passing TemplateRef -->
                                                                                <ng-template #dateCellTpl let-date><span>{{ date | date:'d'}}</span></ng-template>

                                                                                nz-calendar#

                                                                                PropertyDescriptionTypeDefault
                                                                                [(ngModel)](Two-way bindable) The current selected dateDatecurrent date
                                                                                [(nzMode)]The display mode of the calendar (two-way bindable)'month' | 'year''month'
                                                                                [nzFullscreen]Whether to display in full-screenbooleantrue
                                                                                [nzDateCell](Contentable) Customize the display of the date cell, the template content will be appended to the cellTemplateRef<Date>-
                                                                                [nzDateFullCell](Contentable) Customize the display of the date cell, the template content will override the cellTemplateRef<Date>-
                                                                                [nzMonthCell](Contentable) Customize the display of the month cell, the template content will be appended to the cellTemplateRef<Date>-
                                                                                [nzMonthFullCell](Contentable) Customize the display of the month cell, the template content will override the cellTemplateRef<Date>-
                                                                                (nzPanelChange)Callback for when panel changesEventEmitter<{ date: Date, mode: 'month' | 'year' }>-