[update] config, info and cardTemplates updated

Author: tbshag2

docs/api/config/booking-cardtemplate.md

@@ -19,7 +19,7 @@ You can also specify which fields to display using the [`cardShape`](/api/config
 ### Usage
 
 ~~~jsx {}
-cardTemplate?: (item: obj) => string;
+cardTemplate?: ({item: obj}) => string;
 ~~~
 
 ### Parameters
@@ -45,10 +45,12 @@ In the example below we create a function that takes the `card` object and retur
         flex-direction: column;
         gap: 4px;
     }
-    // other styles
+    /* other styles */
 </style>
 
 <script>
+    const { Booking, template } = booking; //import template helper
+
     function cardPreviewTemplate({ card }) {
         return `
             <div class="custom-preview" data-action="preview-click">
@@ -69,11 +71,11 @@ In the example below we create a function that takes the `card` object and retur
             `;
     }
 
-const widget = new Booking("#root", {
-	data,
-	cardTemplate: template(card => cardPreviewTemplate(card)),
-});
-// other parameters
+    const widget = new Booking("#root", {
+	    data,
+	    cardTemplate: template(card => cardPreviewTemplate(card)), // pass the function to Booking configuration
+    });
+    // other parameters
 </script>
 ~~~
 

docs/api/config/booking-infotemplate.md

@@ -13,12 +13,12 @@ description: You can learn about the infoTemplate config in the documentation of
 ### Usage
 
 ~~~jsx {}
-infoTemplate?: (item: obj, slot: obj) => string;
+infoTemplate?: ({item: obj, slot: number}) => string;
 ~~~
 
 ### Parameters
 
-`infoTemplate` takes the `card` item object and selected `slot` object as input and returns a string of HTML.
+`infoTemplate` takes the `card` item object and selected `slot` timestamp as input and returns a string of HTML.
 
 
 ### Example
@@ -27,7 +27,6 @@ In the example below, we define the `cardInfoTemplate` function that will genera
 
 ~~~html
 <style>
-	/* custom info */
 	.custom-info {
 		display: flex;
 		flex-direction: column;
@@ -45,10 +44,12 @@ In the example below, we define the `cardInfoTemplate` function that will genera
 		background: rgba(128, 128, 155, 0.12);
 		border-radius: 8px;
 	}
-// other styles
+    /* other styles */
 </style>
 
 <script>
+    const { Booking, template } = booking; // import template helper
+
     function cardInfoTemplate({
         item,
         slot,
@@ -69,6 +70,11 @@ In the example below, we define the `cardInfoTemplate` function that will genera
                 </div>
             `;
         }
+
+    const widget = new Booking("#root", {
+	    data,
+	    infoTemplate: template(item => cardInfoTemplate(item)), // pass the function to the widget configuration
+    });
 </script>
 ~~~
 

docs/guides/configuration.md

@@ -90,10 +90,12 @@ First, create a function that takes a card object and returns a string of HTML.
         flex-direction: column;
         gap: 4px;
     }
-    // other styles
+    /* other styles */
 </style>
 
 <script>
+    const { Booking, template } = booking;
+
     function cardPreviewTemplate({ card }) {
         return `
             <div class="custom-preview" data-action="preview-click">
@@ -116,9 +118,11 @@ First, create a function that takes a card object and returns a string of HTML.
 </script>
 ~~~
 
-Then you need to assign the`cardTemplate` property to your custom template function.
+Then you also need to import the template helper and assign the`cardTemplate` property to your custom template function.
 
 ~~~jsx
+const { Booking, template } = booking;
+
 const widget = new Booking("#root", {
 	data,
 	cardTemplate: template(card => cardPreviewTemplate(card)),
@@ -436,7 +440,6 @@ To apply a template, you need to define the function that will generate the cust
 
 ~~~html
 <style>
-	/* custom info */
 	.custom-info {
 		display: flex;
 		flex-direction: column;
@@ -454,10 +457,12 @@ To apply a template, you need to define the function that will generate the cust
 		background: rgba(128, 128, 155, 0.12);
 		border-radius: 8px;
 	}
-// other styles
+    /* other styles */
 </style>
 
 <script>
+    const { Booking, template } = booking;
+
     function cardInfoTemplate({
         item,
         slot,
@@ -481,14 +486,14 @@ To apply a template, you need to define the function that will generate the cust
 </script>
 ~~~
 
-Then pass the `infoTemplate` function into the Booking configuration as follows:
+Then you also need to import the template helper and pass the `infoTemplate` function into the Booking configuration as follows:
 
 ~~~jsx
+const { Booking, template } = booking;
+
 const widget = new Booking("#root", {
     data,
-    infoTemplate: template(item =>
-	    cardInfoTemplate(item)
-	),
+    infoTemplate: template(item => cardInfoTemplate(item)),
 });
 ~~~