Activity Selector

The activity selector is an out of the box component offered by GoMeddo to it’s customers. The Activity selector allows users to sign up to an available activity (e.g Yoga, Rave).

The component will fetch activities that belong to the provided resource id within the provided date range.

Props

The activity selector has ten props:

CSS Variables

The activity selector has nine CSS variables:

Step-by-Step Guide to Setting Up The Example

1. Set Up Resources and Resource Types:

   • Define the hierarchical structure for your resources:

     • Organization > Country > City > Activity.

   • Example:

     • Organization: Your Organization

     • Country: Netherlands

     • City: Amsterdam

     • Activity: Yoga

     • Room: Entry Level Room

   • Note: There can be multiple Resources of the type "Room", "City" and "activity".

2. Create Reservation Types:

   • Define a Reservation Type for each class type (e.g., Pilates, Yoga).

   • Create a custom image field for each class type and add an image representing the class.

3. Create Custom Fields Under the Reservation Object:

   • Add the following custom fields to provide detailed information about each activity:

     • Room_Capacity__c (Formula Number Field)

     • City_Location__c (Formula Text Field)

     • Center_Name__c (Formula Text Field)

     • Reservation_type_image__c (Custom Image Field)

4. Create Reservations:

   • Create Reservations for the activities you want to display.

   • Ensure each Reservation is linked to the appropriate Reservation Types, and other Custom Fields.

Note:

• Ensure that each resource in GoMeddo is marked as 'isActive' and 'Api Visible' to be displayed and available through the API.

• Ensure that Resources, Resources Types and Reservation Types are set up in GoMeddo. For the booking system to accurately display available activitys, each activity must be created as a reservation within GoMeddo. This step is vital as the SDK relies on these existing Reservations to present customers with real-time availability and booking options.

Returned Data

Returned data is a Reservation

Example use case

.your-custom-class {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  gap: 0.5rem;

  --activity-card-background-color: transparent;
  --activity-time-background-color: blue;
  --activity-time-text-color: white;
  --selected-activity-border-color: purple;
  --selected-activity-background-color: purple;
  --book-button-border-color: cyan;
  --book-button-hover-background-color: cyan;
  --book-button-hover-text-color: white;
  --disabled-book-button-text-color: white;
  --disabled-book-button-background-color: black;
  --activity-price-background-color: gray;
  --activity-price-text-color: white;
}

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

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

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

<ActivitySelector gm={gm}
                 resourceId={<'Selected resource ID'>}
                 className={'your-custom-class'}
                 startDate={new Date(2025,4, 13)}
                 endDate={new Date(2025,4, 17)}
                 handleSelection={handleSelection}
/>