Configuration
Loading data for cards
To load data, add data to the data
array. See all instructions here: Loading data
.
Defining the structure of cards
You can configure what information all cards will display on their left side using the cardShape
property.
On the left side of a card the following data fields are displayed by default:
- preview: card image
- review: rating information with the number of rating stars (out of five) and the number of reviews
- category: the subtitle of a card
- title: the title of a card which is a specialist's name
- subtitle: the subtitle of a card, for example, experience details
- price: the price of the service
- details: other details of a card
To hide any information block from cards' display, set the appropriate parameter value of the cardShape
property to false.
Example:
const data = [
{
id: "ee828b5d-a034-420c-889b-978840015d6a",
title: "Natalie Tyson",
category: "Allergist",
subtitle: "2 years of experience",
details: "Lexington Avenue 54\nWheatfields, Hungary",
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
price: "27 $",
review: {
stars: 4,
count: 120
},
slots: [
{
from: 9,
to: 21
}
]
}
];
const cardShape = {
details: false
};
new booking.Booking("#root", {
data,
cardShape,
// other parameters
});
Please, see an example in the snippet tool
Filling cards with slots
A slot is a time unit available for booking. Available slots for cards are displayed for the next five days starting from the current day or from the start date from the filter.
Adding slots for booking
To add booking slots to a card, add an object to the slots
array of the data
property.
In the example below, the slots are added for the specified card for Tuesdays and Fridays from 12 a.m. to 6 p.m and each slot duration is 30 minutes with 10-minutes gap between slots.
const data = [
{
id: "5cf364d8-9997-4d8c-9586-48f90f3cb736",
title: "Natalie Tyson",
category: "Therapist",
subtitle: "2 years of experience",
details: "Cleveland Clinic\n9500 Euclid Ave",
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
price: "37 $",
review: {
star: 1,
count: 40
},
slots: [
{
from: 12,
to: 18,
size: 30,
gap: 10,
days: [2, 5]
},
{...}, //other slots
]
}
];
new booking.Booking("#root", {
data,
// other parameters
});
Defining slot rules
Parameters of each object in the slots
array of the data
property allow specifying the next settings:
- slots start and end time
- slot sizes (duration in minutes)
- slot gaps (the length between slot)
- days to which slots should be applied
When applying these rules, you can apply one common rule to all days of the required card or apply different rules (specific rules to selected days or even dates), namely, you can:
- set the same parameters to all days of a specific card, which means you can add slots with the same duration, the same start and end time to all days of the selected card
- set different slot duration and slot gaps to the same card by applying different parameters to days of the week of the same card or specific dates
When applying slot size and gap, you can:
- set specific values to specific slots of the required card(s) using the
size
andgap
parameters in theslots
array of thedata
property (these values have the highest priority and will override the next values in this list) - set specific values to all slots of the selected card using the
slotSize
andslotGap
parameters of thedata
property - set global values to all cards in the widget by using the
slotSize
andslotGap
properties
In case you have common slots parameters and specific parameters for some days, you should be aware of the following:
- Slot parameters defined for specific days will override common parameters defined for all days.
- Slot parameters specified for dates will override parameters defined for specific days and all days.
- If several slots objects are created for the same day, make sure that slots time ranges (from and to) with different size and gap do not overlap, otherwise all slots data for these days will not be applied.
For all slots of the widget, you can also set the end
value that defines the date until which slots are displayed and/or the start
date from which to start showing slots.
Examples of defining slot rules
For example, if you want to add booking slots with the same parameters to all days of the selected card, i.e., add slots with the same duration, the same start and end time to all days of the selected card, you should add one object to the slots
array with the required parameters.
Example:
const data = [
{
id: "5cf364d8-9997-4d8c-9586-48f90f3cb736",
title: "Natalie Tyson",
category: "Therapist",
subtitle: "2 years of experience",
details: "Cleveland Clinic\n9500 Euclid Ave",
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
price: "37 $",
review: {
star: 1,
count: 40
},
slots: [
{
//a common rule for all days
from: 14, //slots start time
to: 17, // slots end time
size: 30, // each slot duration in minutes
gap: 10 // a gap between slots
}
]
}
];
new booking.Booking("#root", {
data,
// other parameters
});
But if you need to add slots with one set of parameters to some days of the week and other parameters to the other days, you need to add several objects to the slots
array and specify days/dates to which these parameters should be applied.
Example:
const data = [
{
id: "5cf364d8-9997-4d8c-9586-48f90f3cb736",
title: "Natalie Tyson",
category: "Therapist",
subtitle: "2 years of experience",
details: "Cleveland Clinic\n9500 Euclid Ave",
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
price: "37 $",
review: {
star: 1,
count: 40
},
slots: [
{
//a common slot rule for all days except those specified for the days and dates below
from: 14,
to: 17,
size: 30,
gap: 10
},
{
//this rule is applied to days 2 and 5 (Tuesdays and Fridays) except
//the Friday from the slot object below
from: 12,
to: 17,
size: 50,
gap: 20,
days: [2, 5]
},
{
//this rule is applied to days 3 and 4 (Wednesdays and Thursdays) and exact date
from: 18,
to: 20,
size: 45,
gap: 20,
days: [3, 4],
dates: [ 1683234000000 ] // exact upcoming date (May 5, 2023, Friday)
}
]
}
];
new booking.Booking("#root", {
data,
// other parameters
});
To see how to set duration and gap for all slots in the widget, open the snippet tool.
Marking slots as used or available
To mark slots as used (booked) and make them not visible for a user, use the usedSlots
parameter of the required card item of the data
property.
Example:
const data = [
{
id: "5cf364d8-9997-4d8c-9586-48f90f3cb736",
title: "Natalie Tyson",
category: "Therapist",
subtitle: "2 years of experience",
details: "Cleveland Clinic\n9500 Euclid Ave",
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
price: "37 $",
review: {
star: 1,
count: 40
},
slots: [
{
//a common rule for all days\
from: 14, //slots start time
to: 17, // slots end time
size: 30, // each slot duration in minutes
gap: 10 // a gap between slots
}
],
usedSlots: [ 1683234000000 ] // an array of timestamps of booked slots in milliseconds
},]
new booking.Booking("#root", {
data,
// other parameters
});
To mark available slots, use the availableSlots
parameter of the data
property.
If available slots are specified here, all slots from the slots
array are ignored (i.e., become unavailable).
Example:
const data = [
{
id: "5cf364d8-9997-4d8c-9586-48f90f3cb736",
title: "Natalie Tyson",
category: "Therapist",
subtitle: "2 years of experience",
details: "Cleveland Clinic\n9500 Euclid Ave",
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
price: "37 $",
review: {
star: 1,
count: 40
},
slots: [
{
//a common rule for all days\
from: 14, //slots start time
to: 17, // slots end time
size: 30, // each slot duration in minutes
gap: 10 // a gap between slots
}
],
availableSlots: [ 1693325145000, 1693584345000 ] // an array of timestamps of available slots in milliseconds
}
];
new booking.Booking("#root", {
data,
// other parameters
});
Configuring the Booking dialog
To configure the fields that should be displayed in the Booking dialog, use the formShape
property.
To add a new field, add a new object to the array. To make a field required for filling, set the required
parameter to true.
const formShape = [
{
type: "text",
key: "name",
label: "Your name"
},
{
type: "text",
key: "contact",
label: "Mobile",
required: true
},
{
type: "textarea",
key: "description",
label: "Details"
}
];
new booking.Booking("#root", {
formShape,
// other parameters
});
Please, see an example in the snippet tool
To manage information that is displayed on the left side of the Booking dialog, apply the infoShape
property. You can hide necessary fields from display by setting values to false.
const infoShape = {
preview: true,
category: true,
title: true,
price: true,
details: false
};
new booking.Booking("#root", {
data,
infoShape,
//other parameters
});
Please, see an example in the snippet tool
Configuring the filter
You can configure filter settings via the filterShape
property. Default configuration is the following:
const defaultTimeRanges = [
{ from: 8, to: 12, label: "Morning" },
{ from: 12, to: 17, label: "Afternoon" },
{ from: 17, to: 20, label: "Evening" }
];
const defaultFilterShape = {
text: [
{ id: "category", label: "speciality", suggest: true },
{ id: "title", label: "specialist", suggest: true },
{ id: "details", label: "location" }
],
date: true,
time: defaultTimeRanges,
autoApply: false
};
Hiding filter input fields
All input fields are displayed by default: text, time, and date. To hide the fields, apply the filterShape
property and set the corresponding parameters to false.
Example:
const filterShape = {
date: false,
};
new booking.Booking("#root", {
data,
filterShape,
// other parameters
});
Configuring filter fields
To enable the auto-complete and show the values that match a user's input text in the text field, set the suggest
parameter of the filterShape
property to true. The values from the data
object will be displayed. To add labels to these fields, apply the label
parameter of the filterShape
property.
Example:
const filterShape = {
text: [
{ id: "category", label: "specialization", suggest: true },
{ id: "title", label: "doctor", suggest: true },
{ id: "details", label: "location", suggest: true }
],
};
new booking.Booking("#root", {
data,
filterShape,
//other parameters
});
To define the time filtering options, for the time
parameter of the filterShape
property specify the start and end slot time values:
from
- 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
- 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")
And you can also add a placeholder to each time range.
Example:
const filterShape = {
time: [
{ from: "8:30", to: "11:50", label: "Morning" },
{ from: "12:30", to: "16:50", label: "Afternoon" },
{ from: "17:00", to: "19:50", label: "Evening" },
{ from: "20:00", to: "22:50", label: "Urgent" }
]
};
new booking.Booking("#root", {
data,
filterShape,
// other parameters
});
Enabling the autoApply mode for the filter
To hide the Search button and make the filter immediately apply a user's input, set the autoApply
parameter of the filterShape
property to true.
Example:
const filterShape = {
autoApply: true,
};
new booking.Booking("#root", {
data,
filterShape,
// other parameters
});
Example
The snippet below demonstrates how to configure the filter: