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 { NzCalendarModule } from 'ng-zorro-antd/calendar';

Examples

2012Dec
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
Basic

A basic calendar component with Year/Month switch.

expand codeexpand code
Loading...
2022May
SuMoTuWeThFrSa
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
                                                        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.
                                                                          Notice Calendar

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

                                                                          expand codeexpand code
                                                                          Loading...
                                                                          2022May
                                                                          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
                                                                          Card

                                                                          Nested inside a container element for rendering in limited space.

                                                                          expand codeexpand code
                                                                          Loading...
                                                                          Your selected date: 2017-01-25
                                                                          2017Jan
                                                                          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
                                                                          Selectable Calendar

                                                                          A basic calendar component with Year/Month switch.

                                                                          expand codeexpand code
                                                                          Loading...

                                                                          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>-
                                                                          [nzDisabledDate]specify the date that cannot be selected(current: Date) => boolean-
                                                                          (nzPanelChange)Callback for when panel changesEventEmitter<{ date: Date, mode: 'month' | 'year' }>-
                                                                          (nzSelectChange)A callback function of selected itemEventEmitter<Date>-