Skip to main content
Skip table of contents

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:

Prop

Description

gm

GoMeddo instance for API calls to salesforce

resourceId

Id of the resource

className

Custom CSS to control how activity are displayed

loadingIcon

Path to custom loading image

startDate

Start of date range

endDate

End of date range

type

Can specify type of activity to fetch

unavailablePlaceholder

Custom placeholder message when a activity is not available

titleFieldName

Custom field name for the title of activity in SalesForce

descriptionFieldName

Custom field name for the description of activity in SalesForce

cityFieldName

Custom field name for the city name of activity in SalesForce

centerFieldName

Custom field name for the center name of activity in SalesForce

imageFieldName

Custom field name for the image of activity in SalesForce

capacityFieldName

Custom field name for the capacity of activity in SalesForce

isSelectedPlaceholder

Custom placeholder message when a activity is selected

handleSelection

Function that is called when a activity is selected

CSS Variables

The activity selector has nine CSS variables:

Name

Description

--activity-card-background-color

Changes the background color of activity card

--activity-time-background-color

Changes the background color of time indicator

--activity-time-text-color

Changes the text color of time indicator

--selected-activity-border-color

Changes the border color of the selected activity button

--selected-activity-background-color

Changes the background color of the selected activity button

--activity-price-background-color

Changes the background color of the price indicator

--activity-price-text-color

Changes the text color of the price indicator

--full-activity-text-color

Changes the text color when a activity is fully booked

--full-activity-background-color

Changes the background color when a activity is fully booked

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

CSS
.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;
}

 

JSX
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}
/>
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.