I've created a dynamic page in wix studio, and on the dynamic page there is a booking calendar widget. I would like to set the Staff Filter of the booking calendar widget to the specific staff member on the actual dynamic page

Ask the community
, , , , ,
1

Question:
I’ve created a dynamic page in wix studio, and on the dynamic page there is a booking calendar widget. I would like to set the Staff Filter of the booking calendar widget to the specific staff member on the actual dynamic page.

Product:
Wix Studio
Booking Calendar Widget
Staff Filter

What are you trying to achieve:
I’ve created a dynamic page in wix studio, and on the dynamic page there is a booking calendar widget. I would like to set the Staff Filter of the booking calendar widget to the specific staff member on the actual dynamic page. How can I do it with Velo code.
Is it possible? Is there a workaround?
I could achieve to retrieve the staffName and staffId of the Dynamic Page.
It could be found in the dropdown list of the Staff Filter in the wix booking calendar widget. So I would like to select only the one checkbox which has the same name next to it, or it referenced to the same ID.
In this way, the booking calendar always shows the booking calendar of the staff which page I’m looking at on the live site. This way the client wouldn’t need to set it, because it is already selected.
Currently the client need to set manually the filter for the specific staff member which dynamic page is on.

What have you already tried:
I have tried many ways with wix velo, the last one is here:

import wixData from ‘wix-data’;

$w.onReady(function () {
const dynamicDataset = $w(‘#dynamicDataset’);

dynamicDataset.onReady(() => {
    const itemData = dynamicDataset.getCurrentItem();
    console.log("Item data from dataset:", itemData);

    const staffName = itemData.title;
    const staffId = itemData._id;

    if (staffName && staffId) {
        console.log(`Setting up booking for: ${staffName}`);
        console.log(`id: ${staffId}`);

        // Call the function to select the staff checkbox
        selectStaffCheckbox(staffId);
    } else {
        console.error("Staff name or ID not found. Check the field key in your dataset.");
    }
});

});

// Function to select the staff checkbox based on the staff ID
function selectStaffCheckbox(staffId) {
const dropdown = $w(“#staffDropdown”);

// Set the dropdown value to the staff ID
dropdown.value = staffId; 
dropdown.expand(); // Open the dropdown list

// Simulate a click on the checkbox with the matching staff ID
$w(`#${staffId}`).checked = true;

console.log("Staff checkbox selected:", staffId);

}

Additional information:
I use wix booking calendar widget in wix studio.
How can I retrieve the element ID of the staff filter of the calendar widget, do you know a method to do it? In the properties I just see the ID #bookingCalendar , but I cannot click on the Staff Filter to see the ID of the Staff Filter.