Assigning getServiceAvailability() slots to datepicker

Ask the community
,
1

I need to assign my “availability.slots” for a chosen event to a datepicker.

I can grab the initial availability slots for the chosen event and i’m just looking at documentation on how to format the data to send to the datePicker.

How to to assign the available dates to the picker and disabled the dates that are not available?

Is there any mechanism that does this all in one go - fo example plugging the datePicker into an event, so it can automatically get the available slots and only make those dates/times available?

2

Hi @sonicswapstu
For assigning dates from getServiceAvailability to the datePicker, you can use enabledDateRanges function.
Here is an example:

let enabledDatesArray = []
let enabledDatesInCalendar = []
let allAvailableslots
wixBookings.getServiceAvailability(serviceId, slotsOptions)
    .then((availability) => {
        allAvailableslots = availability.slots;
        if (allAvailableslots.length != 0) {
            let length = allAvailableslots.length;
            for (let q = 0; q < length; q++) {
                let slot = allAvailableslots[q];
                let slotDate = new Date(slot.startDateTime)
                if (!enabledDatesInCalendar.includes(slotDate.toLocaleDateString("en-US"))) {
                    enabledDatesInCalendar.push(slotDate.toLocaleDateString("en-US"))
                }
            }
            console.log("enabledDatesInCalendar:", enabledDatesInCalendar)
            for (let i=0 ; i < enabledDatesInCalendar.length ; i++) {
                enabledDatesArray.push( {
                    startDate: new Date(new Date(enabledDatesInCalendar[i]).toLocaleDateString("en-US")),
                    endDate: new Date(new Date(enabledDatesInCalendar[i]).toLocaleDateString("en-US"))
                })
            } 
            $w("#calendar").enabledDateRanges = enabledDatesArray
            $w("#calendar").value = new Date(enabledDatesArray[0].startDate)
            $w("#calendar").enable()
        } else {
            console.log("No available slots")
        }     
    })
3

Thank you kindly for your response, I did start going down this route and your reply confirms it’s a good route to go! Appreciate the code example too.

Next I am wondering how to display a calendar (without building one) that is open (like in the prebuilt booking system), and not have the datepicker…

4

@sonicswapstu You cannot use the calendar widget if you intervene the out-of-the-box bookings flow by using a Velo code.
In this case you need to use datePicker and imitate the regular booking flow.
You can use my code example for showing the available dates.
Then, once the date was selected, filter the slots by the selected date.
Then, start your payment and make a book.

5

@sonicswapstu Another option to pursue is to use the https://www.wix.com/velo/reference/wix-bookings-backend/bookings/updatecustomerinfo API.
Once the Bookings is made and you have bookingId, you can update the bookings with the requested info.

6

Hello, not sure if this issue is still open but I’ trying to use this sample code (from first comment) from @jacobg but can’t manage to increase the availability showing to more than 5 days.
I tried the example on the wix-bookings API to pass AvailabilityOptions but it is still retrieving only the first 5 available dates.

Can I get help on this?
Thank you in advance

7

Solved. I was putting the code in the wrong place.