Next

docs/api/config/booking-cardshape.md

@@ -26,9 +26,9 @@ cardShape?: {
 
 ### Parameters
 
-In the **cardShape** object you can specify the following parameters (fields):
+In the `cardShape` object you can specify the following parameters (fields):
 
-- `category` - (optional) shows/hides a card's name
+- `category` - (optional) shows/hides a category name
 - `details` - (optional) shows/hides details
 - `preview` - (optional) shows/hides a preview image
 - `price` - (optional) shows/hides price
@@ -45,7 +45,7 @@ const defaultCardShape = {
     preview: true,
     price: true,
     review: true,
-    subtitle: false,
+    subtitle: true,
     title: true
 };
 ~~~
@@ -70,10 +70,10 @@ The snippet below demonstrates how to configure what fields to display on the le
 <iframe src="https://snippet.dhtmlx.com/6mxd7918?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
 :::info
-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. 
+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.
 :::
 
-**Related articles:** 
+**Related articles**:
 
-- [Defining the structure of cards](/guides/configuration/#defining-the-structure-of-cards)
-- [`cardTemplate`](/api/config/booking-cardtemplate)
+- [Defining the structure of cards](guides/configuration.md#define-the-structure-of-cards)
+- [`cardTemplate`](api/config/booking-cardtemplate.md)

docs/api/config/booking-cardtemplate.md

@@ -13,7 +13,7 @@ description: You can learn about the cardTemplate config in the documentation of
 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.
 
 :::info
-You can also specify which fields to display using the [`cardShape`](/api/config/booking-cardshape) property
+You can also specify which fields to display using the [`cardShape`](api/config/booking-cardshape.md) property
 :::
 
 ### Usage
@@ -24,11 +24,11 @@ cardTemplate?: ({item: obj}) => string;
 
 ### Parameters
 
-`cardTemplate` expects a function that takes a `card` object as input and returns a string of HTML that defines how the card should look.
+`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.
 
 ### Example
 
-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.  
+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.
 
 ~~~html {}
 <style>
@@ -51,41 +51,39 @@ In the example below we create a function that takes the `card` object and retur
 <script>
     const { Booking, template } = booking; //import template helper
 
-    function cardPreviewTemplate({ card }) {
+    function cardPreviewTemplate({ item }) {
         return `
             <div class="custom-preview" data-action="preview-click">
                 <div class="preview-left">
                     <div
-                        style="background-image: url(${card.preview})"
+                        style="background-image: url(${item.preview})"
                         class="card-photo"
                     ></div>
                     <!-- <div class="card-photo-empty" /> -->
                     </div>
 
                     <div class="preview-right">
-                    <div class="category">${card.category}</div>
-                    <div class="title">${card.title}</div>
-                    <div class="price">${card.price}</div>
+                    <div class="category">${item.category}</div>
+                    <div class="title">${item.title}</div>
+                    <div class="price">${item.price}</div>
                 </div>
             </div>
             `;
     }
 
     const widget = new Booking("#root", {
 	    data,
-	    cardTemplate: template(card => cardPreviewTemplate(card)), // pass the function to Booking configuration
+	    cardTemplate: template(cardPreviewTemplate), // pass the function to Booking configuration
     });
     // other parameters
 </script>
 ~~~
 
-
 The snippet below demonstrates how to apply a template to the left block of a card:
 
-<iframe src="https://snippet.dhtmlx.com/k2v01vng" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
-
-**Related articles:** 
+<iframe src="https://snippet.dhtmlx.com/k2v01vng?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
-- [Defining the structure of cards](/guides/configuration/#defining-the-structure-of-cards)
-- [`cardShape`](/api/config/booking-cardshape)
+**Related articles**:
 
+- [Defining the structure of cards](guides/configuration.md#define-the-structure-of-cards)
+- [`cardShape`](api/config/booking-cardshape.md)

docs/api/config/booking-data.md

@@ -26,7 +26,7 @@ data: [
             stars: number,
             count: number
         },
-        slots: [
+        slots?: [
             {
                 from: number | string, // hours from 0 to 24
                 to: number | string, // hours from 0 to 24
@@ -36,12 +36,7 @@ data: [
                 dates?: array, // exact dates for which rule can be applied, timestamps
             }
         ],
-        availableSlots?: [
-            {
-                id: string|number,
-                time:[number, number] //timestamp, length in minutes
-            },
-        ],
+        availableSlots?: [number, number][], // each slot: [timestamp, slot duration in minutes]
         usedSlots?: number[], //timestamps
         slotSize?: number, //minutes
         slotGap?: number //minutes
@@ -53,34 +48,32 @@ data: [
 
 For each card object you can specify the following parameters:
 
-- `id` - (required) the ID of a card  
+- `id` - (required) the ID of a card
 - `title` - (required) the title of a card (e.g., a specialist's name)
 - `category` - (optional) the category name of a card (e.g., a specialist's job)
-- `subtitle` - (optional) the subtitle of a card  
+- `subtitle` - (optional) the subtitle of a card
 - `details` - (optional) other details of a card
 - `preview` - (optional) a card preview which is the link to the card image
-- `price` - (optional) the price of the service  
-- `review` - (optional) rating information that includes the following parameters:  
-  - `stars` - (optional) the number of rating stars (out of five)  
+- `price` - (optional) the price of the service
+- `review` - (optional) rating information that includes the following parameters:
+  - `stars` - (optional) the number of rating stars (out of five)
   - `count` - (optional) the number of reviews
-- `slots` - (required) an array of objects with the following parameters for each slot object:
+- `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:
   - `from` - (required) a slot start time in hours from 0 to 24
   - `to` - (required) a slot end time in hours from 0 to 24
   - `size` - (optional) the duration of one slot in minutes
   - `gap` - (optional) the gap between slots in minutes; 0 is set by default
-  - `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
-  - `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)
+  - `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
+  - `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)
 
 :::note
 Slot parameters specified for 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.
+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.
 :::
 
-- `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:
-  - `id` - (required) the id of a slot
-  - `time` - (required) an array that includes timestamp and slot duration in minutes (timestamps are in a local timezone)
-- `usedSlots` - (optional) an array of timestamps of booked slots in milliseconds (timestamps are in a local timezone)
+- `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)
+- `usedSlots` - (optional) an array of timestamps of booked slots in milliseconds (timestamps are in milliseconds and should represent local wall-clock time)
 - `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
 - `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
 
@@ -93,12 +86,12 @@ const data = [
         title: "Debra Weeks",
         category: "Allergist",
         subtitle: "7 years of experience",
-        details: 
+        details:
                 "Silverstone Medical Center (Vanderbilt Avenue 13, Chestnut, New Zealand)",
         preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
         price: "37 $",
         review: {
-            star: 1,
+            stars: 1,
             count: 40
         },
         slots: [
@@ -137,4 +130,4 @@ new booking.Booking("#root", {
 });
 ~~~
 
-**Related articles:** [Defining slot rules](/guides/configuration#defining-slot-rules)
+**Related articles**: [Defining slot rules](guides/configuration.md#define-slot-rules)

docs/api/config/booking-end.md

@@ -18,7 +18,7 @@ end?: Date;
 
 ### Parameters
 
-- `Date` - the end date until which to display available slots; the default value is one year from the current date.
+- `end` - (optional) the end date until which to display available slots; the default value is one year from the current date.
 
 ### Example
 
@@ -30,6 +30,6 @@ new booking.Booking("#root", {
 });
 ~~~
 
-The snippet below shows how to set the [start](/api/config/booking-start) and end dates:
+The snippet below shows how to set the [start](api/config/booking-start.md) and end dates:
 
-<iframe src="https://snippet.dhtmlx.com/cc28whe7?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
+<iframe src="https://snippet.dhtmlx.com/cc28whe7?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

docs/api/config/booking-filtershape.md

@@ -31,17 +31,17 @@ filterShape: {
 
 ### Parameters
 
-- `text` - (optional) if **true**, the text input field is displayed (default); if **false**, the text field is hidden
-  - `id` - (required) the id of a card
-  - `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
+- `text` - (optional) if `true`, the text input field is displayed (default); if `false`, the text field is hidden
+  - `id` - (required) the name of a card field to filter by (a `data` property, for example `category` or `title`)
+  - `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
   - `label` - (optional) the label for the property from the `data` object. See [Default config](#default-config) below.
-- `date` - (optional) shows/hides the date field; **true** is set by default (the field is shown)
-- `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:
+- `date` - (optional) shows/hides the date field; `true` is set by default (the field is shown)
+- `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:
   - `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 field
 If the `time` parameters are not set, the default values are applied: see [Default config](#default-config) below.
-- `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
+- `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
 
 ### Default config
 
@@ -84,6 +84,6 @@ new booking.Booking("#root", {
 });
 ~~~
 
-The snippet below demonstrates how to configure filter: 
+The snippet below demonstrates how to configure the filter:
 
 <iframe src="https://snippet.dhtmlx.com/b5uj78bs?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

docs/api/config/booking-formshape.md

@@ -13,22 +13,26 @@ description: You can learn about the formShape config in the documentation of th
 ### Usage
 
 ~~~jsx {}
-formShape: {
+formShape: [{
     comp: "text" | "textarea",
     key: string,
     label?: string,
-    required?: boolean
-};
+    required?: boolean,
+    validation?: (value: any) => boolean,
+    errorMessage?: string
+}];
 ~~~
 
 ### Parameters
 
 For each field you can specify the following parameters:
 
-- `comp` - (required) the field type (**text** or **textarea**)
+- `comp` - (required) the field type (`text` or `textarea`)
 - `key` - (required) the id of a field
 - `label` - (optional) the field label
-- `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
+- `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
+- `validation` - (optional) a function that takes the field value and returns a boolean; the field is considered valid when the function returns `true`
+- `errorMessage` - (optional) the message shown when the value does not pass validation
 
 ### Default config
 
@@ -68,17 +72,17 @@ const defaultFormShape = [
 ~~~jsx {1-17,21}
 const formShape = [
     {
-        type: "text",
+        comp: "text",
         key: "name",
         label: "Name"
     },
     {
-        type: "text",
+        comp: "text",
         key: "contact",
         label: "Mobile"
     },
     {
-        type: "textarea",
+        comp: "textarea",
         key: "description",
         label: "Details"
     },

docs/api/config/booking-infoshape.md

@@ -64,10 +64,10 @@ The snippet below shows how to configure what to display on the left side of the
 <iframe src="https://snippet.dhtmlx.com/pd6wp1xc?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
 :::info
-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.
+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.
 :::
 
-**Related articles:** 
+**Related articles**:
 
-- [Configuring the Booking dialog](/guides/configuration/#configuring-the-booking-dialog)
-- [`infoTemplate`](/api/config/booking-infotemplate)
+- [Configuring the Booking dialog](guides/configuration.md#configure-the-booking-dialog)
+- [`infoTemplate`](api/config/booking-infotemplate.md)