Wix Studio Calendar control Staff Filter by Code on Dynamic Page

Ask the community
, , , , ,
1

Question:
I’ve created a dynamic page in wix studio, and on the dynamic page there is a wix booking calendar widget. I would like to set the Staff Filter of the wix booking calendar widget to the specific staff member on the actual dynamic page.
How to access the Staff Filter of the Wix Booking Calendar by Code, and once I get the staff id of the dynamic page item, how to set it on the Staff Filter.

Product:
Wix Studio
Wix Booking Calendar Widget
Staff Filter

What are you trying to achieve:
How to access the Staff Filter of the Wix Booking Calendar by Code, and once I get the staff id of the dynamic page item, how to set it on the Staff Filter.

What have you already tried:
I get the staff name and staff id by the following way:

$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}`);

    } else {
       console.error("Staff name or ID not found. Check the field key in your dataset.");
    }
});

});

My alendar id is: #bookingCalendar

How do I set the Staff Filter to the current staff of the dynamic page?

Additional information:
I tried to look and understand here:

And here:

The calendar is a wix widget.

2

I found a workaround this. Instead of adding a calendar widget on the dynamic page, I created a book now button on the page that would lead to a services page that is filtered out to show the services that the person provides. Upon clicking book now on one of the services, it would lead to the calendar page that would already be pre filtered.

You can check out https://www.goodity.co/our-therapists to see how it works. It was quite an easy fix and not much coding involved. Let me know if you need help making this!

1 Like
3

Hi @Zoltan_Petro , to show the availability of the desired staff member you need to pass the resource query param, You can navigate to the Bookings calendar or show your Booking calendar widget with the following query params:
?resource=<resource_id>