Custom booking calendar

Ask the community
, , ,
1

Question:
I am having issues setting up a Custom Booking Calendar page. I am following the docs at “Velo: Build a custom Booking Calendar page” but get errors. The error comes when I am clicking the “Next” button to go to the booking form page. The error results in either a generic error message being displayed or the wrong booking form being opened.

Errors:

  1. In console logs -
    initializeWidget.ts:39 TypeError: Cannot read properties of undefined (reading ‘locationType’)
    at Wi (service.mapper.ts:275:29)
    at di (service.mapper.ts:123:7)
    at eval (mapNestedSlotToServices.ts:85:23)
    at Array.map ()
    at Ci.formSelectedSlot (mapNestedSlotToServices.ts:73:6)
    at Ci (initialStateFactory.ts:160:9)
    at async Object.eval [as actions.initializeWidget] (initializeWidget.ts:27:13)
    eval @ initializeWidget.ts:39
    await in eval (async)
    (anonymous) @ setPropsManager.ts:70
    (anonymous) @ clientWorker.ts:151
    n @ comlink.ts:312Understand this error
    initializeWidget.ts:69 TypeError: Cannot read properties of undefined (reading ‘numberOfParticipants’)
    at M (biLoggerFactory.ts:141:21)
    at e.update (biLoggerFactory.ts:198:35)
    at eval (controller.ts:115:21)
    at eval (ControlledComponent.ts:79:49)
    at Array.forEach ()
    at i (ControlledComponent.ts:79:27)
    at Object.eval [as actions.initializeWidget] (initializeWidget.ts:42:7)

Product:
Wix Editor

What are you trying to achieve:
I have a custom booking calendar page and based on the user input, redirect them to the relevant booking form. This is for an appointment service.

What have you already tried:
My redirect URL code looks like this:

let queryParams = `?bookings_serviceId=${serviceId}&bookings_resourceId=${selectedSlot.resource._id}&bookings_startDate=${encodeURIComponent(selectedSlot.startDate)}&bookings_endDate=${encodeURIComponent(selectedSlot.endDate)}&bookings_timezone=${selectedTimezone}&bookings_locationId=${selectedSlotLocation._id}&location_type=${selectedSlotLocation.locationType}&bookings_location_type=${selectedSlotLocation.locationType}&locationType=${selectedSlotLocation.locationType}&bookings_locationType=${selectedSlotLocation.locationType}`;
    wixLocation.to("/booking-form" + queryParams);

As per the error, it says the locationType is undefined. I could not find any documentation on passing this as a param but I have still passed a few extra (that are not in the docs). Like bookings_locationId and locationType. These params come from the slot that is selected.

2

Hi,

Thanks for your feedback and for bringing this to our attention. We’re sorry to hear you’re experiencing issues with setting up your Custom Booking Calendar page. To help you out, we have prepared an example that might be useful: Replace Bookings Calendar Page.

Please check it out, and let us know if you continue to encounter any problems.

Best,
Ireen from Bookings