Show · Calendar
Calendar component that allows to display corresponding events in day/week/month view
How to import
Day mode. You could toggle the red line of current time using
Week mode. You could toggle the red line of current time using
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.
weekStartsOnis available since v2.18, and takes effect for month view and week view.
rangeis required which is a left-closed and right-open interval.
You could pass in an array of event objects to
eventsto render items. For detailed format, refer to API below.
You could use
dateGridRenderto render customized date cell or column. Use absolute positioning for elements.
Custom Render Events
Customized Date Cell Style
You could also use
dateGridRenderto 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
renderDateDisplayto customize the display of date
|dateGridRender||Custom render for date cell or column. Use absolute positioning for elements. v>=1.0.0||function(dateString: string, date: Date)||-|
|allDayEventsRender||Custom render for events area at the top of calendar in day/range/week mode.||function(events: EventObject): ReactNode||-|
|displayValue||Display date||Date||current date|
|events||Events for rendering, refer to event object||EventObject||-|
|markWeekend||Toggle whether to distinguish weekend column with grey background from weekdays||boolean||false|
|mode||Mode, one of ||"day" | "week" | "month" | "range"|
|onClick||Callback invoked when clicking on date, basic unit for day and week mode is 0.5h, for month mode is 1d||function(e: Event, date: Date）||-|
|onClose||Callback invoked when event display card close in the month mode||function(e: Event）||-|
|renderTimeDisplay||Customize the display of time in day/week mode||function(time: number): ReactNode||-|
|renderDateDisplay||Customize the display of date||function(date: Date): ReactNode||-|
|range||Date range to display in range mode, left-closed and right-open v>=1.5.0||Date||-|
|scrollTop||Scroll height for displayed content in day and week mode||number||400|
|showCurrTime||Toggle whether to show red line of current time||boolean||true|
|weekStartsOn||Take the day of the week as the first day of the week, 0 for Sunday, 1 for Monday, and so on. Support after v2.18||number||0|
eventsis 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.
|allDay||Whether it is an all-day event||boolean||false|
|end||End time of the event||Date||-|
|key||Required and must be unique. v>=1.0.0||string||-|
|start||Start time of the event||Date||-|