merge next into master

docs/api/config/booking-cardshape.md

@@ -8,7 +8,7 @@ description: You can learn about the cardShape config in the documentation of th
 
 ### Description
 
-@short: Optional. An object with settings for managing information displayed on the left side of cards
+@short: Optional. An object with settings for managing information displayed on the left side of each card
 
 ### Usage
 
@@ -26,7 +26,7 @@ cardShape?: {
 
 ### Parameters
 
-To configure the card appearance, 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
 - `details` - (optional) shows/hides details
@@ -65,6 +65,15 @@ new booking.Booking("#root", {
 });
 ~~~
 
-The snippet below demonstrates how to configure what to display on the left side of cards:
+The snippet below demonstrates how to configure what fields to display on the left side of cards:
 
 <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. 
+:::
+
+**Related articles:** 
+
+- [Defining the structure of cards](/guides/configuration/#defining-the-structure-of-cards)
+- [`cardTemplate`](/api/config/booking-cardtemplate)

docs/api/config/booking-cardtemplate.md

@@ -0,0 +1,91 @@
+---
+sidebar_label: cardTemplate
+title: cardTemplate
+description: You can learn about the cardTemplate config in the documentation of the DHTMLX JavaScript Booking library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Booking.
+---
+
+# cardTemplate
+
+### Description
+
+@short: Optional. Allows applying a template to a card's left block
+
+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
+:::
+
+### Usage
+
+~~~jsx {}
+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.
+
+### 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.  
+
+~~~html {}
+<style>
+    .custom-preview {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        gap: 30px;
+    }
+
+    .preview-left {
+        width: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+    /* other styles */
+</style>
+
+<script>
+    const { Booking, template } = booking; //import template helper
+
+    function cardPreviewTemplate({ card }) {
+        return `
+            <div class="custom-preview" data-action="preview-click">
+                <div class="preview-left">
+                    <div
+                        style="background-image: url(${card.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>
+            </div>
+            `;
+    }
+
+    const widget = new Booking("#root", {
+	    data,
+	    cardTemplate: template(card => cardPreviewTemplate(card)), // 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:** 
+
+- [Defining the structure of cards](/guides/configuration/#defining-the-structure-of-cards)
+- [`cardShape`](/api/config/booking-cardshape)
+

docs/api/config/booking-infoshape.md

@@ -62,3 +62,12 @@ new booking.Booking("#root", {
 The snippet below shows how to configure what to display on the left side of the Booking dialog:
 
 <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.
+:::
+
+**Related articles:** 
+
+- [Configuring the Booking dialog](/guides/configuration/#configuring-the-booking-dialog)
+- [`infoTemplate`](/api/config/booking-infotemplate)

docs/api/config/booking-infotemplate.md

@@ -0,0 +1,92 @@
+---
+sidebar_label: infoTemplate
+title: infoTemplate
+description: You can learn about the infoTemplate config in the documentation of the DHTMLX JavaScript Booking library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Booking.
+---
+
+# infoTemplate
+
+### Description
+
+@short: Optional. Allows applying a template to the information block in the Booking dialog
+
+### Usage
+
+~~~jsx {}
+infoTemplate?: ({item: obj, slot: number}) => string;
+~~~
+
+### Parameters
+
+`infoTemplate` takes the `card` item object and selected `slot` timestamp as input and returns a string of HTML.
+
+
+### Example
+
+In the example below, we define the `cardInfoTemplate` function that will generate the custom HTML for the information block. This function will receive the `item` (card object) and `slot` (slot timestamp) as input parameters. The function returns div containers representing the information block for a selected booking item, including an image, category, title, and formatted date. You should also import the **template** helper and assign your custom function to `infoTemplate`.
+
+~~~html
+<style>
+	.custom-info {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	.info-wrapper {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 20px;
+		padding: 34px;
+		background: rgba(128, 128, 155, 0.12);
+		border-radius: 8px;
+	}
+    /* other styles */
+</style>
+
+<script>
+    const { Booking, template } = booking; // import template helper
+
+    function cardInfoTemplate({
+        item,
+        slot,
+    }) {
+            return `
+                <div class="custom-info">
+                    <div class="info-wrapper">
+                        <div class="photo-wrapper">
+                            ${getPhotoElement(item.preview, "info")}
+                        </div>
+                        <span class="info-title">${item.title}</span>
+                        <span class="info-category">${item.category}</span>
+                        <div class="date" data-action="reset-slot">
+                            <i class="icon wxi-calendar"></i>
+                            <span>${formatDate(slot, { dateFormat, timeFormat })}</span>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }
+
+    const widget = new Booking("#root", {
+	    data,
+	    infoTemplate: template(item => cardInfoTemplate(item)), // pass the function to the widget configuration
+    });
+</script>
+~~~
+
+The snippet below shows how to apply a template to the information block of the Booking dialog that appears when a user clicks the time slot button: 
+
+<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.
+:::
+
+**Related articles:** 
+
+- [Configuring the Booking dialog](/guides/configuration/#configuring-the-booking-dialog)
+- [`infoShape`](/api/config/booking-infoshape)

docs/api/config/booking-rendertype.md

@@ -0,0 +1,38 @@
+---
+sidebar_label: renderType
+title: renderType
+description: You can learn about renderType in the documentation of the DHTMLX JavaScript Booking library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Booking.
+---
+
+# renderType
+
+### Description
+
+@short: Optional. Defines how cards are rendered
+
+The property helps optimize performance when working with a large number of cards. 
+
+### Usage
+
+~~~jsx {}
+renderType?: "default" | "lazy";
+~~~
+
+### Parameters
+
+- `default` - renders all cards loaded to the widget (set by default)
+- `lazy` - renders only visible cards
+
+### Example
+
+~~~jsx {}
+new booking.Booking("#root", {
+    data,
+    renderType: "lazy",
+    // other parameters
+});
+~~~
+
+The snippet below shows how to handle rendering large data sets: 
+
+<iframe src="https://snippet.dhtmlx.com/fb9a5a3b?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

docs/api/overview/booking-api-overview.md

@@ -64,10 +64,13 @@ new booking.Booking("#root", {
 | [](../config/booking-data.md)         | @getshort(../config/booking-data.md)               |
 | [](../config/booking-end.md)          | @getshort(../config/booking-end.md)                |
 | [](../config/booking-cardshape.md)    | @getshort(../config/booking-cardshape.md)          |
+| [](../config/booking-cardtemplate.md) | @getshort(../config/booking-cardtemplate.md)       |
 | [](../config/booking-filtershape.md)  | @getshort(../config/booking-filtershape.md)        |
 | [](../config/booking-formshape.md)    | @getshort(../config/booking-formshape.md)          |
 | [](../config/booking-infoshape.md)    | @getshort(../config/booking-infoshape.md)          |
+| [](../config/booking-infotemplate.md) | @getshort(../config/booking-infotemplate.md)       |
 | [](../config/booking-locale.md)       | @getshort(../config/booking-locale.md)             |
+| [](../config/booking-rendertype.md)   | @getshort(../config/booking-rendertype.md)         |
 | [](../config/booking-slotgap.md)      | @getshort(../config/booking-slotgap.md)            |
 | [](../config/booking-slotsize.md)     | @getshort(../config/booking-slotsize.md)           |
 | [](../config/booking-start.md)        | @getshort(../config/booking-start.md)              |

docs/api/overview/booking-properties-overview.md

@@ -11,10 +11,13 @@ description: You can have properties overview of JavaScript Booking in the docum
 | [](../config/booking-data.md)         | @getshort(../config/booking-data.md)               |
 | [](../config/booking-end.md)          | @getshort(../config/booking-end.md)                |
 | [](../config/booking-cardshape.md)    | @getshort(../config/booking-cardshape.md)          |
+| [](../config/booking-cardtemplate.md) | @getshort(../config/booking-cardtemplate.md)       |
 | [](../config/booking-filtershape.md)  | @getshort(../config/booking-filtershape.md)        |
 | [](../config/booking-formshape.md)    | @getshort(../config/booking-formshape.md)          |
 | [](../config/booking-infoshape.md)    | @getshort(../config/booking-infoshape.md)          |
+| [](../config/booking-infotemplate.md) | @getshort(../config/booking-infotemplate.md)       |
 | [](../config/booking-locale.md)       | @getshort(../config/booking-locale.md)             |
+| [](../config/booking-rendertype.md)   | @getshort(../config/booking-rendertype.md)         |
 | [](../config/booking-slotgap.md)      | @getshort(../config/booking-slotgap.md)            |
 | [](../config/booking-slotsize.md)     | @getshort(../config/booking-slotsize.md)           |
 | [](../config/booking-start.md)        | @getshort(../config/booking-start.md)              |