[update] events, internal method, loading_data, configuration, locali…

…zation updated

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

@@ -49,13 +49,12 @@ 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", {
-	cards,
-	cardShape
+	data,
+	// other configuration parameters
 });
 
-// ...
 booking.api.on("confirm-slot", (obj) => {
-	console.log(obj.cardId);
+	console.log("The slot id for which booking was confirmed:", obj.id);
 });
 ~~~
 

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

@@ -20,8 +20,8 @@ description: You can learn about the filter-data event in the documentation of t
 			end: Date | null,
 		},
 		time:[{ 
-			from: number;
-			to: number
+			from: number | string,
+			to: number | string,
 		}]
  }) => void;
 ~~~
@@ -40,16 +40,26 @@ The callback of the **filter-data** event can take an object with the following
 
 ### Example
 
-~~~jsx {7-10}
+The example below demonstrates how to apply filter at the initialization using the [`api.exec()`](/api/internal/booking-exec) method:
+
+~~~jsx
 // create Booking
-const booking = new booking.Booking("#root", {
+const widget = new booking.Booking("#root", {
 	data,
-	cardShape
+	// other configuration parameters
 });
-
-//output the date object for filtered data
-booking.api.on("filter-data", (ev) => {
-   console.log(ev.date);
+widget.api.exec("filter-data", {
+	text: "Allergist",
+	date: {
+		start: new Date,
+		end: new Date(2025, 4, 10),
+	},
+	time: [
+		{
+			from: 12,
+			to: 20,
+		},
+	],
 });
 ~~~
 

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

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

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

@@ -24,15 +24,16 @@ description: You can learn about the select-item-date event in the documentation
 The callback of the **select-item-date** event can take an object with the following parameters:
 
 - `id` - (required) the id of an item
-- `date` - (required) the date set for the selected item
+- `date` - (required) the date that was set for the selected item
 
 
 ### Example
 
-~~~jsx {7-9}
+~~~jsx {7-10}
 // create Booking
 const booking = new booking.Booking("#root", {
-	// initial configuration parameters
+    data,
+    // other configuration parameters
 });
 
 // output the date  

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

@@ -31,8 +31,8 @@ The callback of the **select-slot** event can take an object with the following
 ~~~jsx {7-10}
 // create Booking
 const booking = new booking.Booking("#root", {
-	cards,
-	cardShape
+	data,
+	// other configuration parameters
 });
 
 // output the id of the selected slot

docs/api/internal/booking-exec.md

@@ -32,22 +32,26 @@ The full list of the Booking internal events can be found [**here**](api/booking
 
 ### Example
 
-~~~jsx {7-17}
-// create Booking
-const booking = new booking.Booking("#root", {
-	cards,
-	cardShape
-});
+The example below demonstrates how to apply filter at the initialization:
 
-// ...
-booking.api.exec("set-filter", {
+~~~jsx 
+const widget = new booking.Booking("#root", {
+	data,
+	//other configuration parameters
+});
+widget.api.exec("filter-data", {
 	filterData: {
+		text: "Allergist",
 		date: {
-			start: new Date(),
-			end: new Date(2023, 4, 10),
+			start: new Date,
+			end: new Date(2025, 2, 12),
 		},
-		global: "Allergist",
-		time: [],
+		time: [
+			{
+				from: 12,
+				to: 20,
+			},
+		],
 	},
 });
 ~~~

docs/api/internal/booking-getreactivestate.md

@@ -21,27 +21,33 @@ api.getReactiveState(): object;
 The method returns an object with the following parameters:
 
 ~~~jsx {}
-{
-	cards,
-	cardShape,
-    filteredCards,
-    filterShape,
-	formShape,
-	... TODO
+{	
+	data: [], // an array of cards objects ?
+    cardShape: {}, // an object with settings for cards
+    filteredData: [], // filtered data array
+    filterShape: {}, // an object with filter settings
+    filterValues: {}, // an object with filter values (text, data, time)
+    formShape: [], // an array of objects with settings for the Booking editor dialog
+	infoShape: {}, // an object with settings for the left side of the Booking editor
+    selectedItem: {}, // single data item
+    selectedSlot: {}, // an object with slot id and timestamp in minutes
+    slotGap: number, // slots gap in minutes
+    slotSize: number, // slot size in minutes
 }
-~~~  
+~~~ 
 
 ### Example
 
-~~~jsx {7-8,10-13}
+~~~jsx {7-9,11-14}
 // create Booking
 const booking = new booking.Booking("#root", {
-	cards,
-	cardShape
+	data,
+	//other properties
 });
 
-// get the Reactive State of Booking
+// get the Reactive State of Booking and output it to console
 const state = booking.api.getReactiveState();
+console.log(state);
 
 // subscribe on the cards changes and output the array of cards
 state.cards.subscribe((data) => {

docs/api/internal/booking-getstate.md

@@ -22,32 +22,32 @@ The method returns an object with the following parameters of state:
 
 ~~~jsx {}
 {	
-	data,//an array of cards objects
-    cardShape,//an object with settings for cards
-    filteredData,//filtered data array
-    filterShape,//an object with filter settings
-    filterValues,//an object with filter values (text, data, time)
-    formShape,//an array of objects with settings for the Booking editor dialog
-	infoShape,//an object with settings for the left side of the Booking editor
-    selectedItem,//single data item
-    selectedSlot,//an object with slot id and timestamp in minutes
-    slotGap,//slots gap in minutes
-    slotSize,//slot size in minutes
+	data: [], // an array of cards objects
+    cardShape: {}, // an object with settings for cards
+    filteredData: [], // filtered data array
+    filterShape: {}, // an object with filter settings
+    filterValues: {}, // an object with filter values (text, data, time)
+    formShape: [], // an array of objects with settings for the Booking editor dialog
+	infoShape: {}, // an object with settings for the left side of the Booking editor
+    selectedItem: {}, // single data item
+    selectedSlot: {}, // an object with slot id and timestamp in minutes
+    slotGap: number, // slots gap in minutes
+    slotSize: number, // slot size in minutes
 }
- 
+~~~
 
 ### Example
 
 ~~~jsx {7-11}
 // create Booking
 const booking = new booking.Booking("#root", {
-	cards,
+	data,
 	cardShape
 });
 
-// get the State of Booking
+// get and output the State of Booking to console
 const state = booking.api.getState();
-console.log(state); // 
+console.log(state); 
 ~~~
 
 **Related articles:**

docs/api/internal/booking-intercept.md

@@ -34,13 +34,13 @@ Use the [`api.on()`](/api/internal/js_booking_on) method if you want to listen t
 ~~~jsx {7-11}
 // create Booking
 const booking = new booking.Booking("#root", {
-	cards,
-	cardShape
+	data,
+	// other configuration parameters
 });
 
-// every time the set-filter event is triggered, the time field will contain only the morning time
-booking.api.intercept("set-filter", data => {
-	data.filterData.time = [{ start: 9, end: 12 }];
+// every time the filter-data event is triggered, slots will be shown only for the morning time
+booking.api.intercept("filter-data", data => {
+	data.time = [{ from: 9, to: 12 }];
 	return data;
 });
 ~~~

docs/api/internal/booking-on.md

@@ -31,13 +31,15 @@ Use the `api.on()` method if you want to listen to the actions without modifying
 
 ### Example
 
-~~~jsx {7-8}
+~~~jsx {7-10}
 // create Booking
 const booking = new booking.Booking("#root", {
-	cards,
-	cardShape
+	data,
+	// other configuration parameters
 });
 
-// ...
-booking.api.intercept("event-name", handler);
+// output the selected slot id and time
+booking.api.on("select-slot", (obj) => {
+	console.log("The selected slot", obj.id, "and time", obj.time);
+});
 ~~~

docs/api/internal/booking-setnext.md

@@ -22,24 +22,27 @@ api.setNext(next: any): void;
 
 ### Example
 
-~~~jsx {11}
-const url = "https://some_backend_url";
-const restProvider = new booking.RestDataProvider(url);
+The example below shows how to use the `api.setNext()` method to integrate some custom class into the Event Bus order:
+
+~~~jsx
+const booking = new booking.Booking("#root", { data: [] });
+const server = "https://some-backend-url";
+
+// Assume you have a custom server service class named someServerService
+const someServerService = new ServerDataService(server);
 
 Promise.all([
-	restProvider.getCards(),
-]).then(([cards]) => {
-	const booking = new booking.Booking("#root", {
-		cards,
-		cardShape
-	});
-	booking.api.setNext(restProvider);
+    fetch(server + "/data").then((res) => res.json())
+]).then(([data]) => {
+    booking.setConfig({ data });
+    
+// Integrate the serverDataService into the Event Bus order of widget
+booking.api.setNext(someServerService);
+
 });
 ~~~
 
-:::info
-You need to include **RestDataProvider** into the **Event Bus** order to perform operations with data (**adding**, **deleting** etc.) and send the corresponding requests to the server
-:::
+
 
 **Related articles:**
 - [Working with server](../../../guides/working_with_server)

docs/guides/configuration.md

@@ -329,7 +329,7 @@ const infoShape = {
 new booking.Booking("#root", {
 	data,
 	infoShape,
-	// other parameters
+	//other parameters
 });
 ~~~
 
@@ -364,13 +364,13 @@ Example:
 
 ~~~jsx 
 const filterShape = {
-  date: false,
+    date: false,
 };
 
 new booking.Booking("#root", {
-  data,
-  filterShape,
-	// other parameters
+    data,
+    filterShape,
+    // other parameters
 });
 ~~~
 

docs/guides/loading-data.md

@@ -101,7 +101,7 @@ const data = [
 	];
 ~~~
 
-## Loading data from a local source
+## Loading data 
 
 You can load JSON data into Booking from an external file or the server-side script after the component has been initialized.