Rewrite guides using skills

docs/api/config/booking-cardshape.md

@@ -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:** 
 
-- [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,29 +51,29 @@ 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(item => cardPreviewTemplate(item)), // pass the function to Booking configuration
     });
     // other parameters
 </script>
@@ -84,8 +84,7 @@ The snippet below demonstrates how to apply a template to the left block of a ca
 
 <iframe src="https://snippet.dhtmlx.com/k2v01vng" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
-**Related articles:** 
-
-- [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
@@ -63,7 +58,7 @@ For each card object you can specify the following parameters:
 - `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
@@ -77,9 +72,7 @@ Slot parameters specified for dates will override parameters defined for specifi
 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.
 :::
 
-- `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)
+- `availableSlots` - (optional) an array of available slots; each slot is an array `[timestamp, duration]` where the timestamp is in milliseconds (in a local timezone) 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 a local timezone)
 - `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
@@ -98,7 +91,7 @@ const data = [
         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

@@ -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>

docs/api/config/booking-filtershape.md

@@ -33,7 +33,7 @@ filterShape: {
 
 - `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
+  - `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:

docs/api/config/booking-formshape.md

@@ -13,12 +13,12 @@ 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
-};
+}];
 ~~~
 
 ### Parameters
@@ -68,17 +68,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:** 
 
-- [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)

docs/api/config/booking-infotemplate.md

@@ -83,10 +83,10 @@ The snippet below shows how to apply a template to the information block of the
 <iframe src="https://snippet.dhtmlx.com/byb94ipu?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 [`infoShape`](/api/config/booking-infoshape) 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 [`infoShape`](api/config/booking-infoshape.md) property. But if both properties are applied, `infoTemplate` will override the `infoShape` settings.
 :::
 
 **Related articles:** 
 
-- [Configuring the Booking dialog](/guides/configuration/#configuring-the-booking-dialog)
-- [`infoShape`](/api/config/booking-infoshape)
+- [Configuring the Booking dialog](guides/configuration.md#configure-the-booking-dialog)
+- [`infoShape`](api/config/booking-infoshape.md)

docs/api/config/booking-locale.md

@@ -18,22 +18,22 @@ locale?: object;
 
 ### Default config
 
-By default, Booking uses the [English](/guides/localization/#default-locale) locale. You can set it to the custom locale as well.
+By default, Booking uses the [English](guides/localization.md#default-locale) locale. You can set it to the custom locale as well.
 
 :::tip
-To change the current locale dynamically, you can use the [`setLocale()`](/api/methods/booking-setlocale-method) method
+To change the current locale dynamically, you can use the [`setLocale()`](api/methods/booking-setlocale-method.md) method
 :::
 
 ### Example
 
 ~~~jsx
 const { data } = getData();
-const booking = new booking.Booking("#root", {
+const widget = new booking.Booking("#root", {
     data,
-    locale: de
+    locale: booking.locales.de
 });
 ~~~
 
 **Related articles**:
-- [setLocale()](/api/methods/booking-setlocale-method)
-- [Localization](/guides/localization)
+- [setLocale()](api/methods/booking-setlocale-method.md)
+- [Localization](guides/localization.md)

docs/api/config/booking-slotgap.md

@@ -11,7 +11,7 @@ description: You can learn about the slotGap in the documentation of the DHTMLX
 @short: Optional. Defines a gap between booking slots for all cards
 
 :::note
-The value will be applied in case the gap value is not set for the `gap` or `slotGap` parameter inside the [`data`](/api/config/booking-data) property.
+The value will be applied in case the gap value is not set for the `gap` or `slotGap` parameter inside the [`data`](api/config/booking-data.md) property.
 :::
 
 ### Usage
@@ -35,6 +35,6 @@ new booking.Booking("#root", {
 });
 ~~~
 
-The snippet below shows how to set [duration](/api/config/booking-slotsize) and gap for all slots:
+The snippet below shows how to set [duration](api/config/booking-slotsize.md) and gap for all slots:
 
 <iframe src="https://snippet.dhtmlx.com/pw8xsl1p?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

docs/api/config/booking-slotsize.md

@@ -11,7 +11,7 @@ description: You can learn about the slotSize in the documentation of the DHTMLX
 @short: Optional. Defines the duration of a booking slot for all cards
 
 :::note
-This value will be applied in case the size value is not set for the `size` or `slotSize` parameter inside the [`data`](/api/config/booking-data) property.
+This value will be applied in case the size value is not set for the `size` or `slotSize` parameter inside the [`data`](api/config/booking-data.md) property.
 :::
 
 ### Usage
@@ -35,6 +35,6 @@ new booking.Booking("#root", {
 });
 ~~~
 
-The snippet below shows how to set duration and [gap](/api/config/booking-slotgap) for all slots:
+The snippet below shows how to set duration and [gap](api/config/booking-slotgap.md) for all slots:
 
 <iframe src="https://snippet.dhtmlx.com/pw8xsl1p?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

docs/api/config/booking-start.md

@@ -30,6 +30,6 @@ new booking.Booking("#root", {
 });
 ~~~
 
-The snippet below shows how to set the start and [end](/api/config/booking-end) dates:
+The snippet below shows how to set the start and [end](api/config/booking-end.md) dates:
 
 <iframe src="https://snippet.dhtmlx.com/cc28whe7?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

docs/api/events/booking-confirmslot-event.md

@@ -36,8 +36,8 @@ The callback of the **confirm-slot** event can take an object with the following
 - `slot` - (required) an object with the next slot parameters:
     - `id` - (required) the ID of a card for which the booking of a slot is confirmed
     - `time` - (required) an array with the slot start time in milliseconds and the slot duration in minutes (timestamps are in a local timezone)
-- `data` - (required) an abject with the booking screen fields with the following parameters for each field:
-    - `key` - (required) the form field ID (from the [`formShape`](/api/config/booking-formshape)). By default, three fields are added: *name*, *email*, *description*
+- `data` - (required) an object with the booking screen fields with the following parameters for each field:
+    - `key` - (required) the form field ID (from the [`formShape`](api/config/booking-formshape.md)). By default, three fields are added: *name*, *email*, *description*
 - `confirm` - (required) an object with the next parameters:
     - `promise` -  (required) a promise that represents the confirmation status. This is a JavaScript Promise object that represents the asynchronous operation of confirming the slot booking. The promise will be resolved or rejected based on the outcome of the booking process. You can attach `.then` and `.catch` handlers to this promise to handle the success or failure of the booking.
     - `done` - (required) a callback function that should be called when booking is successfully confirmed. Calling this function will resolve the promise, indicating that the booking was successful. You can call this function after receiving a positive response from the server.
@@ -47,14 +47,14 @@ The callback of the **confirm-slot** event can take an object with the following
 
 ~~~jsx {7-10}
 // create Booking
-const booking = new booking.Booking("#root", {
+const widget = new booking.Booking("#root", {
     data,
     // other configuration parameters
 });
 
-booking.api.on("confirm-slot", (obj) => {
-    console.log("The slot id for which booking was confirmed:", obj.id);
+widget.api.on("confirm-slot", (obj) => {
+    console.log("The slot id for which booking was confirmed:", obj.slot.id);
 });
 ~~~
 
-**Related articles:** [`setConfirmHandler`](/api/methods/booking-setconfirmhandler-method) method
+**Related articles:** [`setConfirmHandler`](api/methods/booking-setconfirmhandler-method.md) method

docs/api/events/booking-filterdata-event.md

@@ -40,15 +40,15 @@ The callback of the **filter-data** event can take an object with the following
 
 ### Example
 
-The example below demonstrates how to apply filter at the initialization using the [`api.exec()`](/api/internal/booking-exec) method:
+The example below demonstrates how to apply filter at the initialization using the [`api.exec()`](api/internal/booking-exec.md) method:
 
 ~~~jsx {6-18}
 // create Booking
-const booking = new booking.Booking("#root", {
+const widget = new booking.Booking("#root", {
     data,
     // other configuration parameters
 });
-booking.api.exec("filter-data", {
+widget.api.exec("filter-data", {
     text: "Allergist",
     date: {
         start: new Date,

docs/api/events/booking-selectitem-event.md

@@ -28,13 +28,13 @@ The callback of the **select-item** event can take an object with the following
 
 ~~~jsx {7-10}
 // create Booking
-const booking = new booking.Booking("#root", {
+const widget = new booking.Booking("#root", {
     data, 
     // other configuration parameters
 });
 
 // output the id of the selected item
-booking.api.on("select-item", (ev) => {
+widget.api.on("select-item", (ev) => {
     console.log(ev.id);
 });
 ~~~