Wix Bookings: Setting Availability for Appointments

Ask the community
, ,
1

Hello everybody. This is the code I use to show the slots available for a service. I was wondering if there is a way to filter the results shown on the table with a datePicker, so customers can select the day from the calendar and the time from the table. Thanks for your help.

import wixBookings from 'wix-bookings';
let serviceId = "81bea05c-7e8d-4454-8a7a-9bc15d5d4a66"

let availableSlots;
let slotOptions;
let selectedSlot;
let slotIndex;

export function button45_click(event) {
 let today = new Date();
 let startRange = new Date();
 let endRange = new Date();
 startRange.setDate(today.getDate() + 7);  // Una settimana da adesso
 endRange.setDate(today.getDate() + 14);   // Due settimane da adesso

 let options = {
 startDateTime: startRange,
 endDateTime: endRange
 };

 wixBookings.getServiceAvailability(serviceId, options)
  .then( (availability) => {
    let slots = availability.slots;
    let firstSlot = slots[0];
  } );
 
 wixBookings.getServiceAvailability(serviceId, options)
    .then( (availability) => {
      availableSlots = availability.slots;
      
            slotOptions = availableSlots.map((slot) => {
                let date = slot.startDateTime;
                return {
                    "slotDate": date.toLocaleDateString() + " ora: " + date.toLocaleTimeString(),
                }
            });
   $w('#slotTable').rows = slotOptions;
      
 } );
}
2

Hi @luzipneumatici ,
After you get the slots, you can use the [enabledDateRanges](After you get the slots, you can use the https://www.wix.com/velo/reference/$w/datepicker/enableddateranges) API to populate the datePicker.
Code example:

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"))
    }
   }
    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("#datePicker").enabledDateRanges = enabledDatesArray
            $w("#datePicker").value = new Date(enabledDatesArray[0].startDate)
        } else {
            console.log("PRODUCT | No available slots")
        }
    })