Skip to main content

All Props

All Props

NameTypeDefaultExplanation
availableTimeslotsAvailableTimeslot[]RequiredTimeslots of available time that events can be scheduled in. Example: If you are available every day from 9am to 5pm, you would pass in an array of AvailableTimeslots with those datetimes
backgroundColorstring"#fff"Background color for theming the component
borderRadiusnumber0Border radius for many of the components
defaultDateDatenew Date()Sets the initially selected date on the calendar if you don't want it to be 'today'.
emptyListContentElReact.ElementType--Element displayed when the start time events list is empty
eventDurationInMinutesnumberRequiredThe number of minutes each event will be scheduled.
eventStartTimeSpreadInMinutesnumber30The length between the next possible event start time. Example: For 30, an event start time will be available 30 minutes after the previous event END time.
format_nextFutureStartTimeAvailableFormatStringstring (date-fns format string)'cccc, LLLL do'Format string for the next future start time that is available see example
format_selectedDateDayTitleFormatStringstring (date-fns format string)'cccc, LLLL do'Format string for the date title see example
format_selectedDateMonthTitleFormatStringstring (date-fns format string)'LLLL yyyy'Format string for the month title see example
format_startTimeFormatStringstring (date-fns format string)'h:mm a'Format string for the start time see example
lang_cancelButtonTextstring"Cancel"Text displayed on the cancel button
lang_confirmButtonTextstring"Confirm"Text displayed on the start time confirm button
lang_emptyListTextstring"No times available"Text displayed when the start time events list is empty (unless emptyListContentEl is used instead)
lang_goToNextAvailableDayTextstring"Next Available"Text displayed on the next available time button
lang_noFutureTimesTextstring"No future times available"Text displayed when there are no future times available
lang_selectedButtonTextstring"Selected:"Text displayed on the start time selected state button
localeLocale (date-fns)undefinedLocale for date-fns to return I18n (Internationalization) strings. see example
onNoFutureTimesAvailable(selectedDate: Date) => void;--Callback for when the selected day has no available times and there are no more times available in the future.
onSelectedDayChange(day: Date) => void;--Callback for when the selected day changes on the calendar
onStartTimeSelect(startTimeEventEmit: StartTimeEventEmit) => void;--Callback for when a start time is clicked
primaryColorstring"#3f5b85"Primary color to use for the component
scheduleMeetingStylesCSSPropertiesundefinedStyles Object for the Schedule Calendar paper container
selectedStartTimeDateundefinedThe selected start time for handling the selectedStartTime. This is an optional prop.
startTimeListStyle"scroll-list" or "grid""grid"The style for the start times container. See the main page example to see the difference