|
| 1 | +--- |
| 2 | +sidebar_label: infoTemplate |
| 3 | +title: infoTemplate |
| 4 | +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. |
| 5 | +--- |
| 6 | + |
| 7 | +# infoTemplate |
| 8 | + |
| 9 | +### Description |
| 10 | + |
| 11 | +@short: Optional. Allows applying a template to the information block in the Booking dialog |
| 12 | + |
| 13 | +### Usage |
| 14 | + |
| 15 | +~~~jsx {} |
| 16 | +infoTemplate?: ({item: obj, slot: number}) => string; |
| 17 | +~~~ |
| 18 | + |
| 19 | +### Parameters |
| 20 | + |
| 21 | +`infoTemplate` takes the `card` item object and selected `slot` timestamp as input and returns a string of HTML. |
| 22 | + |
| 23 | + |
| 24 | +### Example |
| 25 | + |
| 26 | +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`. |
| 27 | + |
| 28 | +~~~html |
| 29 | +<style> |
| 30 | + .custom-info { |
| 31 | + display: flex; |
| 32 | + flex-direction: column; |
| 33 | + align-items: center; |
| 34 | + width: 100%; |
| 35 | + height: 100%; |
| 36 | + } |
| 37 | +
|
| 38 | + .info-wrapper { |
| 39 | + display: flex; |
| 40 | + flex-direction: column; |
| 41 | + align-items: center; |
| 42 | + gap: 20px; |
| 43 | + padding: 34px; |
| 44 | + background: rgba(128, 128, 155, 0.12); |
| 45 | + border-radius: 8px; |
| 46 | + } |
| 47 | + /* other styles */ |
| 48 | +</style> |
| 49 | + |
| 50 | +<script> |
| 51 | + const { Booking, template } = booking; // import template helper |
| 52 | +
|
| 53 | + function cardInfoTemplate({ |
| 54 | + item, |
| 55 | + slot, |
| 56 | + }) { |
| 57 | + return ` |
| 58 | + <div class="custom-info"> |
| 59 | + <div class="info-wrapper"> |
| 60 | + <div class="photo-wrapper"> |
| 61 | + ${getPhotoElement(item.preview, "info")} |
| 62 | + </div> |
| 63 | + <span class="info-title">${item.title}</span> |
| 64 | + <span class="info-category">${item.category}</span> |
| 65 | + <div class="date" data-action="reset-slot"> |
| 66 | + <i class="icon wxi-calendar"></i> |
| 67 | + <span>${formatDate(slot, { dateFormat, timeFormat })}</span> |
| 68 | + </div> |
| 69 | + </div> |
| 70 | + </div> |
| 71 | + `; |
| 72 | + } |
| 73 | +
|
| 74 | + const widget = new Booking("#root", { |
| 75 | + data, |
| 76 | + infoTemplate: template(item => cardInfoTemplate(item)), // pass the function to the widget configuration |
| 77 | + }); |
| 78 | +</script> |
| 79 | +~~~ |
| 80 | + |
| 81 | +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: |
| 82 | + |
| 83 | +<iframe src="https://snippet.dhtmlx.com/byb94ipu?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe> |
| 84 | + |
| 85 | +:::info |
| 86 | +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. |
| 87 | +::: |
| 88 | + |
| 89 | +**Related articles:** |
| 90 | + |
| 91 | +- [Configuring the Booking dialog](/guides/configuration/#configuring-the-booking-dialog) |
| 92 | +- [`infoShape`](/api/config/booking-infoshape) |
0 commit comments