You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You can also configure the appearance of a card using the [`cardTemplate`](/api/config/booking-cardtemplate) property. If both `cardTemplate` and `cardShape` are applied, `cardTemplate` will override the `cardShape` settings.
73
+
You can also configure the appearance of a card using the [`cardTemplate`](api/config/booking-cardtemplate.md) property. If both `cardTemplate` and `cardShape` are applied, `cardTemplate` will override the `cardShape` settings.
74
74
:::
75
75
76
-
**Related articles:**
76
+
**Related articles**:
77
77
78
-
-[Defining the structure of cards](/guides/configuration/#defining-the-structure-of-cards)
Copy file name to clipboardExpand all lines: docs/api/config/booking-cardtemplate.md
+13-15Lines changed: 13 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,7 +13,7 @@ description: You can learn about the cardTemplate config in the documentation of
13
13
The property specifies the HTML structure and layout of each card's block (the left side of each card). It means you can manage which fields are displayed, how they are arranged, and how they look.
14
14
15
15
:::info
16
-
You can also specify which fields to display using the [`cardShape`](/api/config/booking-cardshape) property
16
+
You can also specify which fields to display using the [`cardShape`](api/config/booking-cardshape.md) property
`cardTemplate` expects a function that takes a `card` object as input and returns a string of HTML that defines how the card should look.
27
+
`cardTemplate` expects a function that takes an `item` (card) object as input and returns a string of HTML that defines how the card should look.
28
28
29
29
### Example
30
30
31
-
In the example below we create a function that takes the `card`object and returns HTML for a card that includes a preview image (card.preview), category (card.category), title (card.title), and price (card.price). You need to create your own HTML template to be applied to a card and import the **template** helper. Then pass the function into the Booking configuration by assigning the function to the `cardTemplate` property.
31
+
In the example below we create a function that takes the `item` (card) object and returns HTML for a card that includes a preview image (item.preview), category (item.category), title (item.title), and price (item.price). You need to create your own HTML template to be applied to a card and import the `template` helper. Then pass the function into the Booking configuration by assigning the function to the `cardTemplate` property.
32
32
33
33
~~~html {}
34
34
<style>
@@ -51,41 +51,39 @@ In the example below we create a function that takes the `card` object and retur
Copy file name to clipboardExpand all lines: docs/api/config/booking-data.md
+16-23Lines changed: 16 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,7 +26,7 @@ data: [
26
26
stars: number,
27
27
count: number
28
28
},
29
-
slots: [
29
+
slots?: [
30
30
{
31
31
from: number | string, // hours from 0 to 24
32
32
to: number | string, // hours from 0 to 24
@@ -36,12 +36,7 @@ data: [
36
36
dates?: array, // exact dates for which rule can be applied, timestamps
37
37
}
38
38
],
39
-
availableSlots?: [
40
-
{
41
-
id: string|number,
42
-
time:[number, number] //timestamp, length in minutes
43
-
},
44
-
],
39
+
availableSlots?: [number, number][], // each slot: [timestamp, slot duration in minutes]
45
40
usedSlots?: number[], //timestamps
46
41
slotSize?: number, //minutes
47
42
slotGap?: number //minutes
@@ -53,34 +48,32 @@ data: [
53
48
54
49
For each card object you can specify the following parameters:
55
50
56
-
-`id` - (required) the ID of a card
51
+
-`id` - (required) the ID of a card
57
52
-`title` - (required) the title of a card (e.g., a specialist's name)
58
53
-`category` - (optional) the category name of a card (e.g., a specialist's job)
59
-
-`subtitle` - (optional) the subtitle of a card
54
+
-`subtitle` - (optional) the subtitle of a card
60
55
-`details` - (optional) other details of a card
61
56
-`preview` - (optional) a card preview which is the link to the card image
62
-
-`price` - (optional) the price of the service
63
-
-`review` - (optional) rating information that includes the following parameters:
64
-
-`stars` - (optional) the number of rating stars (out of five)
57
+
-`price` - (optional) the price of the service
58
+
-`review` - (optional) rating information that includes the following parameters:
59
+
-`stars` - (optional) the number of rating stars (out of five)
65
60
-`count` - (optional) the number of reviews
66
-
-`slots` - (required) an array of objects with the following parameters for each slot object:
61
+
-`slots` - (optional) an array of objects that defines slot rules (either `slots` or `availableSlots` should be provided to display bookable time); each slot object has the following parameters:
67
62
-`from` - (required) a slot start time in hours from 0 to 24
68
63
-`to` - (required) a slot end time in hours from 0 to 24
69
64
-`size` - (optional) the duration of one slot in minutes
70
65
-`gap` - (optional) the gap between slots in minutes; 0 is set by default
71
-
-`days` - (optional) days of the week when a slot is available for booking; possible values: from 0 to 6 where 0 is Sunday and 6 is Saturday; if no days are specified, all days are applied by default; if days are specified, the slot parameters (**to**, **from**, **size**, **gap**) defined for these days will be applied
72
-
-`dates` - (optional) an array of timestamps in milliseconds which are exact dates when a slot is available; the slot parameters (**to**, **from**, **size**, **gap**) for these specified dates will be applied (timestamps are in a local timezone)
66
+
-`days` - (optional) days of the week when a slot is available for booking; possible values: from 0 to 6 where 0 is Sunday and 6 is Saturday; if no days are specified, all days are applied by default; if days are specified, the slot parameters (`to`, `from`, `size`, `gap`) defined for these days will be applied
67
+
-`dates` - (optional) an array of timestamps in milliseconds which are exact dates when a slot is available; the slot parameters (`to`, `from`, `size`, `gap`) for these specified dates will be applied (timestamps are in milliseconds and should represent local wall-clock time)
73
68
74
69
:::note
75
70
Slot parameters specified for days will override common parameters defined for all days.
76
71
Slot parameters specified for dates will override parameters defined for specific days and all days.
77
-
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.
72
+
If several slot objects target the same day with different `size` or `gap`, their time ranges (`from`–`to`) must not overlap. Overlapping ranges make the widget skip all slots for that day.
78
73
:::
79
74
80
-
-`availableSlots` - (optional) an array of timestamps of available slots in milliseconds; if available slots are specified here, all slots from the `slots` array are ignored (i.e., become unavailable); each object in the array has the next parameters:
81
-
-`id` - (required) the id of a slot
82
-
-`time` - (required) an array that includes timestamp and slot duration in minutes (timestamps are in a local timezone)
83
-
-`usedSlots` - (optional) an array of timestamps of booked slots in milliseconds (timestamps are in a local timezone)
75
+
-`availableSlots` - (optional) an array of available slots; each slot is an array `[timestamp, duration]` where the timestamp is in milliseconds (representing local wall-clock time) and the duration is the slot length in minutes; if available slots are specified here, all slots from the `slots` array are ignored (i.e., become unavailable)
76
+
-`usedSlots` - (optional) an array of timestamps of booked slots in milliseconds (timestamps are in milliseconds and should represent local wall-clock time)
84
77
-`slotSize` - (optional) the duration of a slot in minutes; the value will be applied to all slots of this card if other value is not set inside the `slots` object; *60* minutes is set by default
85
78
-`slotGap` - (optional) the gap between slots in minutes that is set for all slots in the current card; this value is applied if any other value is not specified inside the `slots` object; 0 is set by default
86
79
@@ -93,12 +86,12 @@ const data = [
93
86
title:"Debra Weeks",
94
87
category:"Allergist",
95
88
subtitle:"7 years of experience",
96
-
details:
89
+
details:
97
90
"Silverstone Medical Center (Vanderbilt Avenue 13, Chestnut, New Zealand)",
Copy file name to clipboardExpand all lines: docs/api/config/booking-filtershape.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,17 +31,17 @@ filterShape: {
31
31
32
32
### Parameters
33
33
34
-
-`text` - (optional) if **true**, the text input field is displayed (default); if **false**, the text field is hidden
35
-
-`id` - (required) the id of a card
36
-
-`suggest` - (required) if **true**, the auto-complete is enabled and the values (from the [`data`](/api/config/booking-data) object) that match a user's input text will be displayed
34
+
-`text` - (optional) if `true`, the text input field is displayed (default); if `false`, the text field is hidden
35
+
-`id` - (required) the name of a card field to filter by (a `data` property, for example `category` or `title`)
36
+
-`suggest` - (optional) if `true`, the auto-complete is enabled and the values (from the [`data`](api/config/booking-data.md) object) that match a user's input text will be displayed
37
37
-`label` - (optional) the label for the property from the `data` object. See [Default config](#default-config) below.
38
-
-`date` - (optional) shows/hides the date field; **true** is set by default (the field is shown)
39
-
-`time` - (optional) shows/hides the time field. If set to **true**, it takes an array of objects with default time options for a slot. For each object you can specify the following parameters:
38
+
-`date` - (optional) shows/hides the date field; `true` is set by default (the field is shown)
39
+
-`time` - (optional) shows/hides the time field. If set to `true`, it takes an array of objects with default time options for a slot. For each object you can specify the following parameters:
40
40
-`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")
41
41
-`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")
42
42
-`label` - (optional) placeholder for the time field
43
43
If the `time` parameters are not set, the default values are applied: see [Default config](#default-config) below.
44
-
-`autoApply` - (optional) if **true**, the search criteria will be automatically applied (no need to initiate the search by clicking the button); **false** is set by default
44
+
-`autoApply` - (optional) if `true`, the search criteria will be automatically applied (no need to initiate the search by clicking the button); `false` is set by default
45
45
46
46
### Default config
47
47
@@ -84,6 +84,6 @@ new booking.Booking("#root", {
84
84
});
85
85
~~~
86
86
87
-
The snippet below demonstrates how to configure filter:
87
+
The snippet below demonstrates how to configure the filter:
Copy file name to clipboardExpand all lines: docs/api/config/booking-formshape.md
+12-8Lines changed: 12 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,22 +13,26 @@ description: You can learn about the formShape config in the documentation of th
13
13
### Usage
14
14
15
15
~~~jsx {}
16
-
formShape: {
16
+
formShape:[{
17
17
comp:"text"|"textarea",
18
18
key: string,
19
19
label?: string,
20
-
required?: boolean
21
-
};
20
+
required?: boolean,
21
+
validation?: (value:any) => boolean,
22
+
errorMessage?: string
23
+
}];
22
24
~~~
23
25
24
26
### Parameters
25
27
26
28
For each field you can specify the following parameters:
27
29
28
-
-`comp` - (required) the field type (**text** or **textarea**)
30
+
-`comp` - (required) the field type (`text` or `textarea`)
29
31
-`key` - (required) the id of a field
30
32
-`label` - (optional) the field label
31
-
-`required` - (optional) if the value is set to **true**, the field should not be empty and it's required to submit the booking form; if **false**, the field can be empty
33
+
-`required` - (optional) if the value is set to `true`, the field should not be empty and it's required to submit the booking form; if `false`, the field can be empty
34
+
-`validation` - (optional) a function that takes the field value and returns a boolean; the field is considered valid when the function returns `true`
35
+
-`errorMessage` - (optional) the message shown when the value does not pass validation
You can also control which fields to display in the information block of the Booking dialog using the [`infoTemplate`](/api/config/booking-infotemplate) property. But if both properties are applied, `infoTemplate` will override the `infoShape` settings.
67
+
You can also control which fields to display in the information block of the Booking dialog using the [`infoTemplate`](api/config/booking-infotemplate.md) property. But if both properties are applied, `infoTemplate` will override the `infoShape` settings.
68
68
:::
69
69
70
-
**Related articles:**
70
+
**Related articles**:
71
71
72
-
-[Configuring the Booking dialog](/guides/configuration/#configuring-the-booking-dialog)
0 commit comments