availableTimeslots | AvailableTimeslot[] | Required | Timeslots 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 |
backgroundColor | string | "#fff" | Background color for theming the component |
borderRadius | number | 0 | Border radius for many of the components |
defaultDate | Date | new Date() | Sets the initially selected date on the calendar if you don't want it to be 'today'. |
emptyListContentEl | React.ElementType | -- | Element displayed when the start time events list is empty |
eventDurationInMinutes | number | Required | The number of minutes each event will be scheduled. |
eventStartTimeSpreadInMinutes | number | 30 | The 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_nextFutureStartTimeAvailableFormatString | string (date-fns format string) | 'cccc, LLLL do' | Format string for the next future start time that is available see example |
format_selectedDateDayTitleFormatString | string (date-fns format string) | 'cccc, LLLL do' | Format string for the date title see example |
format_selectedDateMonthTitleFormatString | string (date-fns format string) | 'LLLL yyyy' | Format string for the month title see example |
format_startTimeFormatString | string (date-fns format string) | 'h:mm a' | Format string for the start time see example |
lang_cancelButtonText | string | "Cancel" | Text displayed on the cancel button |
lang_confirmButtonText | string | "Confirm" | Text displayed on the start time confirm button |
lang_emptyListText | string | "No times available" | Text displayed when the start time events list is empty (unless emptyListContentEl is used instead) |
lang_goToNextAvailableDayText | string | "Next Available" | Text displayed on the next available time button |
lang_noFutureTimesText | string | "No future times available" | Text displayed when there are no future times available |
lang_selectedButtonText | string | "Selected:" | Text displayed on the start time selected state button |
locale | Locale (date-fns) | undefined | Locale 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 |
primaryColor | string | "#3f5b85" | Primary color to use for the component |
scheduleMeetingStyles | CSSProperties | undefined | Styles Object for the Schedule Calendar paper container |
selectedStartTime | Date | undefined | The 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 |