filter-data

Description

Fires when filters are applied

Usage

"filter-data": ({
    text: string,
    date:{
        start: Date | null,
        end: Date | null
    },
    time:[{
        from: number | string,
        to: number | string,
        label?: string
    }]
 }) => void;

Parameters

The callback of the filter-data event can take an object with the following parameters:

• text - (optional) the text in the search field
• date - (optional) an object with the start and end date for a slot:
  • start - the slot start date (Date | null)
  • end - the slot end date (Date | null)
• time - (optional) an array of objects containing time options for a slot. For each object, you can specify the following parameters:
  • from - (required) the start time for a slot; it can be a number from 0 to 24 that specifies the time in hours (e.g., 9 means 9:00, 8.5 means 8:30) or a string in the format "h:m" (for example, "8:30")
  • to - (required) the end time for a slot; it can be a number from 0 to 24 that specifies the time in hours (e.g., 9 means 9:00, 8.5 means 8:30) or a string in the format "h:m" (for example, "8:30")
  • label - (optional) placeholder for the time range

Example

The example below demonstrates how to apply a filter at initialization using the api.exec() method:

// create Booking
const widget = new booking.Booking("#root", {
    data,
    // other configuration parameters
});
widget.api.exec("filter-data", {
    text: "Allergist",
    date: {
        start: new Date,
        end: new Date(2025, 4, 10)
    },
    time: [
        {
            from: 12,
            to: 20
        }
    ]
});