Show · Calendar
Calendar component that allows to display corresponding events in day/week/month view


How to import

Day Mode

Day mode. You could toggle the red line of current time using showCurrTime.

Week Mode

Week mode. You could toggle the red line of current time using showCurrTime.

Month Mode

Month Mode.

Set week start day

The day of the week can be set as the first day of the week through weekStartsOn, 0 for Sunday, 1 for Monday, and so on. Default is Sunday.
weekStartsOn is available since v2.18, and takes effect for month view and week view.

Range Mode

Range Mode. range is required which is a left-closed and right-open interval.

Render Events

You could pass in an array of event objects to events to render items. For detailed format, refer to API below.

Custom Render

You could use dateGridRender to render customized date cell or column. Use absolute positioning for elements.

Custom Render Events

Customized Date Cell Style

You could also use dateGridRender to customize date cell style, e.g. backgroundColor. Please notice that in Month View, the date text on the right corner has a z-index of 3. Use a larger z-index if you would like to cover the text as well.

Customized Date Render

You could use renderDateDisplay to customize the display of date

API Reference


dateGridRenderCustom render for date cell or column. Use absolute positioning for elements. v>=1.0.0function(dateString: string, date: Date)-
allDayEventsRenderCustom render for events area at the top of calendar in day/range/week mode.function(events: EventObject[]): ReactNode-
displayValueDisplay dateDatecurrent date
eventsEvents for rendering, refer to event objectEventObject[]-
markWeekendToggle whether to distinguish weekend column with grey background from weekdaysbooleanfalse
minEventHeightThe minimum height of events in daily view, multi-day view and weekly view(>=2.49.0)numberNumber.MIN_SAFE_INTEGER
modeMode, one of day, week, month, range(>=1.5.0)"day" | "week" | "month" | "range"week
onClickCallback invoked when clicking on date, basic unit for day and week mode is 0.5h, for month mode is 1dfunction(e: Event, date: Date)-
onCloseCallback invoked when event display card close in the month modefunction(e: Event)-
renderTimeDisplayCustomize the display of time in day/week modefunction(time: number): ReactNode-
renderDateDisplayCustomize the display of datefunction(date: Date): ReactNode-
rangeDate range to display in range mode, left-closed and right-open v>=1.5.0Date[]-
scrollTopScroll height for displayed content in day and week modenumber400
showCurrTimeToggle whether to show red line of current timebooleantrue
weekStartsOnTake the day of the week as the first day of the week, 0 for Sunday, 1 for Monday, and so on. Support after v2.18number0

Event Object

events is an array of event objects.
By default, when the event is an all day event without start or end time, it will be put into displayValue. If an event is not an all-day event, it must has at least start or end time as a valid input.
Key property is required and must be unique. It is used for events update and re-render.
allDayWhether it is an all-day eventbooleanfalse
childrenDisplayed contentReact.node-
endEnd time of the eventDate-
keyRequired and must be unique. v>=1.0.0string-
startStart time of the eventDate-

Content Guidelines

  • Both 12-hour and 24-hour clocks can be used when the time needs to be displayed
  • If the 12-hour clock is used, it needs to be used together with AM/PM. For details, please refer to Time Specification
  • For the abbreviation rules for month, week and time, please refer to Abbreviation Specification

Design Tokens