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

Demos

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

>=1.5.0
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 alos 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.

API Reference

Calendar

PropertiesInstructionstypeDefault
dateGridRenderCustom render for date cell or column. Use absolute positioning for elements. v>=1.0.0function(dateString: string, date: Date)-
displayValueDisplay dateDatecurrent date
eventsEvents for rendering, refer to event objectEventObject[]-
headerHeaderReact.Node-
heightHeightstring|number600
markWeekendToggle whether to distinguish weekend column with grey background from weekdaysbooleanfalse
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-
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
widthWidthstring|number-
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.
Attention
Key property is required and must be unique. It is used for events update and re-render.
PropertiesInstructionstypeDefault
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

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED