Search
Calendar

Container for displaying data in calendar form.

Calendar

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.


Basic

A basic calendar component with Year/Month switch.
2022
Feb
SuMoTuWeThFrSa
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
01
02
03
04
05
06
07
08
09
10
11
12

Notice Calendar

This component can be rendered by using dateCellRender and monthCellRender with the data you need.
2022
Feb
SuMoTuWeThFrSa
30
    31
      01
        02
          03
            04
              05
                06
                  07
                    08
                    • Warning event.
                    • Usual event.
                    09
                      10
                      • Warning event.
                      • Usual event.
                      • Error event.
                      11
                        12
                          13
                            14
                              15
                              • Warning event
                              • This is very long usual event。。....
                              • Error event 1.
                              • Error event 2.
                              • Error event 3.
                              • Error event 4.
                              16
                                17
                                  18
                                    19
                                      20
                                        21
                                          22
                                            23
                                              24
                                                25
                                                  26
                                                    27
                                                      28
                                                        01
                                                          02
                                                            03
                                                              04
                                                                05
                                                                  06
                                                                    07
                                                                      08
                                                                      • Warning event.
                                                                      • Usual event.
                                                                      09
                                                                        10
                                                                        • Warning event.
                                                                        • Usual event.
                                                                        • Error event.
                                                                        11
                                                                          12

                                                                            Card

                                                                            Nested inside a container element for rendering in limited space.
                                                                            2022
                                                                            Feb
                                                                            SuMoTuWeThFrSa
                                                                            30
                                                                            31
                                                                            01
                                                                            02
                                                                            03
                                                                            04
                                                                            05
                                                                            06
                                                                            07
                                                                            08
                                                                            09
                                                                            10
                                                                            11
                                                                            12
                                                                            13
                                                                            14
                                                                            15
                                                                            16
                                                                            17
                                                                            18
                                                                            19
                                                                            20
                                                                            21
                                                                            22
                                                                            23
                                                                            24
                                                                            25
                                                                            26
                                                                            27
                                                                            28
                                                                            01
                                                                            02
                                                                            03
                                                                            04
                                                                            05
                                                                            06
                                                                            07
                                                                            08
                                                                            09
                                                                            10
                                                                            11
                                                                            12

                                                                            Selectable Calendar

                                                                            A basic calendar component with Year/Month switch.
                                                                            2017
                                                                            Jan
                                                                            SuMoTuWeThFrSa
                                                                            01
                                                                            02
                                                                            03
                                                                            04
                                                                            05
                                                                            06
                                                                            07
                                                                            08
                                                                            09
                                                                            10
                                                                            11
                                                                            12
                                                                            13
                                                                            14
                                                                            15
                                                                            16
                                                                            17
                                                                            18
                                                                            19
                                                                            20
                                                                            21
                                                                            22
                                                                            23
                                                                            24
                                                                            25
                                                                            26
                                                                            27
                                                                            28
                                                                            29
                                                                            30
                                                                            31
                                                                            01
                                                                            02
                                                                            03
                                                                            04
                                                                            05
                                                                            06
                                                                            07
                                                                            08
                                                                            09
                                                                            10
                                                                            11

                                                                            Customize Header

                                                                            Customize Calendar header content.

                                                                            Custom header

                                                                            2022
                                                                            Feb
                                                                            SuMoTuWeThFrSa
                                                                            30
                                                                            31
                                                                            01
                                                                            02
                                                                            03
                                                                            04
                                                                            05
                                                                            06
                                                                            07
                                                                            08
                                                                            09
                                                                            10
                                                                            11
                                                                            12
                                                                            13
                                                                            14
                                                                            15
                                                                            16
                                                                            17
                                                                            18
                                                                            19
                                                                            20
                                                                            21
                                                                            22
                                                                            23
                                                                            24
                                                                            25
                                                                            26
                                                                            27
                                                                            28
                                                                            01
                                                                            02
                                                                            03
                                                                            04
                                                                            05
                                                                            06
                                                                            07
                                                                            08
                                                                            09
                                                                            10
                                                                            11
                                                                            12

                                                                            API

                                                                            PropertyDescriptionTypeDefault
                                                                            dateCellRender
                                                                            Customize the display of the date cell, the returned content will be appended to the cell
                                                                            function(date: moment): ReactNode
                                                                            -
                                                                            dateFullCellRender
                                                                            Customize the display of the date cell, the returned content will override the cell
                                                                            function(date: moment): ReactNode
                                                                            -
                                                                            defaultValue
                                                                            The date selected by default
                                                                            moment
                                                                            default date
                                                                            disabledDate
                                                                            Function that specifies the dates that cannot be selected
                                                                            (currentDate: moment) => boolean
                                                                            -
                                                                            fullscreen
                                                                            Whether to display in full-screen
                                                                            boolean
                                                                            true
                                                                            locale
                                                                            The calendar's locale
                                                                            object
                                                                            default
                                                                            mode
                                                                            The display mode of the calendar
                                                                            month | year
                                                                            month
                                                                            monthCellRender
                                                                            Customize the display of the month cell, the returned content will be appended to the cell
                                                                            function(date: moment): ReactNode
                                                                            -
                                                                            monthFullCellRender
                                                                            Customize the display of the month cell, the returned content will override the cell
                                                                            function(date: moment): ReactNode
                                                                            -
                                                                            validRange
                                                                            to set valid range
                                                                            [moment, moment]
                                                                            -
                                                                            value
                                                                            The current selected date
                                                                            moment
                                                                            current date
                                                                            onPanelChange
                                                                            Callback for when panel changes
                                                                            function(date: moment, mode: string)
                                                                            -
                                                                            onSelect
                                                                            Callback for when a date is selected
                                                                            function(date: moment）
                                                                            -
                                                                            onChange
                                                                            Callback for when date changes
                                                                            function(date: moment）
                                                                            -
                                                                            headerRender
                                                                            render custom header in panel
                                                                            function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()})
                                                                            -