Time Slot Selector

The time slot selector is an out of the box component offered by GoMeddo to it’s customers. The time slot selector allows users to select a available time slot for their booking.

The component will fetch TimeSlot for the provided resource and display which TimeSlots are available for which day of the week and the duration for each time slot.

The time slot selector is built using date-fns.

Ensure date-fns package is installed!

The packages can be installed by running the following command through the terminal within your project:

CODE

npm install date-fns

Props

The time slot selector has nine props:

Prop	Description
`gm`	GoMeddo instance for API calls to salesforce
`resourceId`	Id of the selected resource
`selectedDate`	Selected date
`dateFormat`	Custom format of selected date
`interval`	Interval of each fetched TimeSlot
`className`	Custom CSS
`peakHour`	Array of specific time to indicate peak hour
`hideDuration`	Hide indicated duration on the time slot
`handleSelection`	Function that is called when a time slot is selected

If you use a custom date format during the date selection process, make sure to pass the format through the dateFormat prop. Using date-fns the selected date will be parsed into a date object to allow time slots to be fetched from Salesforce. If no date format is passed, the component will default to the 'dd/MM/yyyy' format reference: date-fns format

CSS Variables

The time slot selector has nine CSS variables:

Name	Description
`--day-background-color`	Changes the background color of date card
`--day-border-color`	Changes the border color of date card
`--selected-border-color`	Changes the border of the selected time slot
`--selected-background-color`	Changes the background color of the selected time slot
`--peak-hour-color`	Changes the color of peak hour indicator
`--arrow-background-color`	Changes the background color of the arrow controls
`--arrow-border-color`	Changes the border color of the arrow controls
`--time-background-color`	Changes the background color of the time slot card
`--time-border-color`	Changes the border color of the time slot card

Returned Data

Returned data is a ReservationTimeSlot

Example use case

CSS

.your-custom-class {
  height: 45vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  --day-border-color: cyan;
  --selected-border-color: orange;
  --selected-background-color: white;
  --peak-hour-color: purple;
  --arrow-background-color: blue;
  --arrow-border-color: transparent;
  --time-background-color: yellow;
  --time-border-color: white;
}

JSX

import GoMeddo, {ReservationTimeSlot} from "@gomeddo/sdk";
import TimeSlotSelector from "./components/TimeSlotSelector.tsx";
import '/path/to/your/css';

const gm = new GoMeddo(<Your api key>);

const handleSelection = (data: ReservationTimeSlot | undefined) => {
    console.log(date);
}

<TimeSlotSelector gm={gm}
                  resourceId={'<resource id>'}
                  className={'your-custom-class'}
                  selectedDate={'<selected date string>'}
                  interval={30}
                  dateFormat={'dd/MM/yyyy'}
                  peakHours={[
                      '12:00',
                      '13:00',
                      '16:30'
                  ]}
                  handleSelection={handleSelection}
/>