No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Calendar
Usage
When data is date or divided by date, such as schedule, class schedule, event calendar, etc.
Basic usage scenarios
  • The calendar component supports month switching and returns to today (current month);
  • Support stretching task adjustment time;
  • The mobile terminal supports sliding to switch months;
  • Internationalization: Chinese and English are supported.
Instructions for use
  • The calendar view of the current month is displayed by default. If defaultDate is set, the view of the corresponding month is displayed;
  • When calculating the task length, the unit is days, and the time below days (hours, minutes) is ignored;
  • When the task has no start time or end time, the length is 1 day.
  • When the start time is greater than the end time, the task is abnormal, an alarm icon appears, the task is displayed in the interface until the start time is unknown, and the length is 1 day.
Examples
When there are no tasks, the calendar looks like this:
Jun 2025
Mon
Tue
Wed
Thu
Fri
Sat
Sun
26
27
28
29
30
31
Jun 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
Jul 1
2
3
4
5
6
Have tasks and allow for stretching
Setting resizable to true allows both ends of the stretch task to adjust the timing:
Jul 2021
Mon
Tue
Wed
Thu
Fri
Sat
Sun
28
29
30
Jul 1
2
3
4
Drink water 🍧
5
6
7
8
9
10
11
Have a meal 🍚
Haha 🙂
Sleep 😴
Study 🙇
Eat skewers 🍡
12
13
14
15
16
17
18
Have a meal 🍚
Study 🙇
Eat skewers 🍡
19
20
21
22
23
24
25
Eat skewers 🍡
26
27
28
29
30
31
Aug 1
Eat skewers 🍡
Custom task style
The task style is defined by listStyle, and the calendar will adapt to the height according to the listStyle height property.
Jul 2021
Mon
Tue
Wed
Thu
Fri
Sat
Sun
28
29
30
Jul 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Have a meal 🍚
Sleep 😴
19
20
21
22
23
24
25
26
27
28
29
30
31
Aug 1
Unusual task warning
When the start time is greater than the end time, the task is abnormal, and an alarm is displayed. The task is displayed in the interface until the start time is unknown, and the length is 1 day.
Jul 2021
Mon
Tue
Wed
Thu
Fri
Sat
Sun
28
29
30
Jul 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Have a meal 🍚
19
20
21
22
23
24
25
26
27
28
29
30
31
Aug 1
API
NameTypeDescriptionDefault
defaultDateDatethe default time, the first time the calendar is opened is the current month
tasksITask[]task list, the data structure is: ITask { id: Id; title: string; startDate: Date; endDate: Date; startDisabled?: boolean, endDisabled?: boolean }
update(id: Id, startDate: Date, endDate: Date) => voidupdate task function
langen / zhinternational configuration
dndany[]Drag and drop component (beta version)
listStyleCSSPropertiestask style
startListStyleCSSPropertiesmark task start time location style
warnTextReactElement<any, string / JSXElementConstructor<any>>alarm information
rowMixCountnumberthe minimum number of display rows in a calendar row
disabledbooleandisable
resizablebooleansupport stretching, allowing to adjust the task time by pulling both ends of the task
moreTextstring-
moveTaskIdstring-
monthPicker(showValue: string) => Element-