[update] convert_timestamps added

docs/api/config/booking-data.md

@@ -69,7 +69,7 @@ For each card object you can specify the following parameters:
   - `size` - (optional) the duration of one slot in minutes
   - `gap` - (optional) the gap between slots in minutes; 0 is set by default
   - `days` - (optional) days of the week when a slot is available for booking; possible values: from 0 to 6 where 0 is Sunday and 6 is Saturday; if no days are specified, all days are applied by default; if days are specified, the slot parameters (**to**, **from**, **size**, **gap**) defined for these days will be applied
-  - `dates` - (optional) an array of timestamps in milliseconds which are exact dates when a slot is available; the slot parameters (**to**, **from**, **size**, **gap**) for these specified dates will be applied
+  - `dates` - (optional) an array of timestamps in milliseconds which are exact dates when a slot is available; the slot parameters (**to**, **from**, **size**, **gap**) for these specified dates will be applied (timestamps are in a local timezone)
 
 :::note
 Slot parameters specified for days will override common parameters defined for all days.
@@ -79,8 +79,8 @@ If several slots objects are created for the same day, make sure that slots time
 
 - `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
-- `usedSlots` - (optional) an array of timestamps of booked slots in milliseconds
+  - `time` - (required) an array that includes timestamp and slot duration in minutes (timestamps are in a local timezone)
+- `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
 

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

@@ -35,7 +35,7 @@ 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
+    - `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*
 - `confirm` - (required) an object with the next parameters:

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

@@ -24,7 +24,7 @@ description: You can learn about the select-slot event in the documentation of t
 The callback of the **select-slot** event can take an object with the following parameters:
 
 - `id` - (required) the ID of a card the selected slot belongs to
-- `time` - (required) an array with the slot start time in milliseconds and the slot duration in minutes
+- `time` - (required) an array with the slot start time in milliseconds and the slot duration in minutes (timestamps are in a local timezone)
 
 ### Example
 

docs/guides/saving-reservations.md

@@ -1,13 +1,15 @@
 ---
-sidebar_label: Saving slots reservations to server
-title:  Saving slots reservations to the server
-description: You can learn about  saving slots reservations to server 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.
+sidebar_label: Working with server
+title:  Working with server
+description: You can learn about working with server 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.
 ---
 
-#  Saving slots reservations to the server
+# Working with server
 
 About loading data from the server see here: [Loading data](/guides/loading-data#loading-data-1).  
 
+## Saving slots reservations to the server
+
 To handle slots reservation, you should apply the [`setConfirmHandler`](/api/methods/booking-setconfirmhandler-method) method. 
 
 ~~~jsx {}
@@ -51,6 +53,95 @@ fetch("/server/url")
     });
 ~~~
 
+## Converting timestamps
+
+In case the widget is applied in different timezones, you can convert timestamps when loading data and sending data to the server.
+
+The next example demonstrates how to convert a UTC timestamp into the local timezone during the loading process and how to convert the local time back to UTC when sending data to the server. 
+
+In the example below, the **g2l** function converts a UTC timestamp into the local timezone. During the data loading process, this function is used to convert the times in *usedSlots* and *slots* from UTC to the local time. The **l2g** function converts a local time back to UTC. It's applied during slots reservation, namely, the **l2g** function is used to convert the local time (from slot.time[0]) to UTC before sending it to the server.
+
+~~~jsx
+const serverURL = "https://some-backend-url";
+
+function g2l(v) {
+    const utcDate = new Date(v);
+    return new Date(
+        utcDate.getUTCFullYear(),
+        utcDate.getUTCMonth(),
+        utcDate.getUTCDate(),
+        utcDate.getUTCHours(),
+        utcDate.getUTCMinutes(),
+        utcDate.getUTCSeconds(),
+        utcDate.getUTCMilliseconds(),
+    ).valueOf();
+}
+
+function l2g(v) {
+    const date = new Date(v);
+    return Date.UTC(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+        date.getHours(),
+        date.getMinutes(),
+        date.getSeconds(),
+        date.getMilliseconds(),
+    );
+}
+
+const handleSlotReservation = event => {
+    const { confirm, slot, data } = event;
+
+    const info = {
+        doctor: slot.id,
+        date: l2g(slot.time[0]),
+        form: {
+            name: data.name,
+            email: data.email,
+            details: data.description,
+        },
+    };
+
+    fetch( serverURL + "/doctors/reservations", {
+        method: "POST",
+        body: JSON.stringify(info),
+    }).then(response => {
+        if (response.ok) confirm.done();
+        else confirm.error();
+    });
+};
+
+// widget initialization
+const widget = new booking.Booking("#root", {
+    data: [],
+});
+
+// data loading
+fetch( serverURL + "/units")
+    .then(res => res.json())
+    .then(units => {
+        units.forEach(unit => {
+            if (unit.usedSlots) unit.usedSlots = unit.usedSlots.map(g2l);
+            if (unit.slots) {
+                unit.slots = unit.slots.map(slot => {
+                    if (slot.dates) {
+                        return {
+                            ...slot,
+                            dates: slot.dates.map(g2l)
+                        };
+                    }
+                    return slot;
+                });
+            };
+        });
+
+        widget.setConfig({ data: units });
+        widget.setConfirmHandler(handleSlotReservation);
+    });
+~~~
+
+
 ## Example
 
 <iframe src="https://snippet.dhtmlx.com/dpbmyr8j?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>