|
1 | 1 | --- |
2 | | -sidebar_label: Saving slots reservations to server |
3 | | -title: Saving slots reservations to the server |
4 | | -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. |
| 2 | +sidebar_label: Working with server |
| 3 | +title: Working with server |
| 4 | +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. |
5 | 5 | --- |
6 | 6 |
|
7 | | -# Saving slots reservations to the server |
| 7 | +# Working with server |
8 | 8 |
|
9 | 9 | About loading data from the server see here: [Loading data](/guides/loading-data#loading-data-1). |
10 | 10 |
|
| 11 | +## Saving slots reservations to the server |
| 12 | + |
11 | 13 | To handle slots reservation, you should apply the [`setConfirmHandler`](/api/methods/booking-setconfirmhandler-method) method. |
12 | 14 |
|
13 | 15 | ~~~jsx {} |
@@ -51,6 +53,95 @@ fetch("/server/url") |
51 | 53 | }); |
52 | 54 | ~~~ |
53 | 55 |
|
| 56 | +## Converting timestamps |
| 57 | + |
| 58 | +In case the widget is applied in different timezones, you can convert timestamps when loading data and sending data to the server. |
| 59 | + |
| 60 | +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. |
| 61 | + |
| 62 | +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. |
| 63 | + |
| 64 | +~~~jsx |
| 65 | +const serverURL = "https://some-backend-url"; |
| 66 | + |
| 67 | +function g2l(v) { |
| 68 | + const utcDate = new Date(v); |
| 69 | + return new Date( |
| 70 | + utcDate.getUTCFullYear(), |
| 71 | + utcDate.getUTCMonth(), |
| 72 | + utcDate.getUTCDate(), |
| 73 | + utcDate.getUTCHours(), |
| 74 | + utcDate.getUTCMinutes(), |
| 75 | + utcDate.getUTCSeconds(), |
| 76 | + utcDate.getUTCMilliseconds(), |
| 77 | + ).valueOf(); |
| 78 | +} |
| 79 | + |
| 80 | +function l2g(v) { |
| 81 | + const date = new Date(v); |
| 82 | + return Date.UTC( |
| 83 | + date.getFullYear(), |
| 84 | + date.getMonth(), |
| 85 | + date.getDate(), |
| 86 | + date.getHours(), |
| 87 | + date.getMinutes(), |
| 88 | + date.getSeconds(), |
| 89 | + date.getMilliseconds(), |
| 90 | + ); |
| 91 | +} |
| 92 | + |
| 93 | +const handleSlotReservation = event => { |
| 94 | + const { confirm, slot, data } = event; |
| 95 | + |
| 96 | + const info = { |
| 97 | + doctor: slot.id, |
| 98 | + date: l2g(slot.time[0]), |
| 99 | + form: { |
| 100 | + name: data.name, |
| 101 | + email: data.email, |
| 102 | + details: data.description, |
| 103 | + }, |
| 104 | + }; |
| 105 | + |
| 106 | + fetch( serverURL + "/doctors/reservations", { |
| 107 | + method: "POST", |
| 108 | + body: JSON.stringify(info), |
| 109 | + }).then(response => { |
| 110 | + if (response.ok) confirm.done(); |
| 111 | + else confirm.error(); |
| 112 | + }); |
| 113 | +}; |
| 114 | + |
| 115 | +// widget initialization |
| 116 | +const widget = new booking.Booking("#root", { |
| 117 | + data: [], |
| 118 | +}); |
| 119 | + |
| 120 | +// data loading |
| 121 | +fetch( serverURL + "/units") |
| 122 | + .then(res => res.json()) |
| 123 | + .then(units => { |
| 124 | + units.forEach(unit => { |
| 125 | + if (unit.usedSlots) unit.usedSlots = unit.usedSlots.map(g2l); |
| 126 | + if (unit.slots) { |
| 127 | + unit.slots = unit.slots.map(slot => { |
| 128 | + if (slot.dates) { |
| 129 | + return { |
| 130 | + ...slot, |
| 131 | + dates: slot.dates.map(g2l) |
| 132 | + }; |
| 133 | + } |
| 134 | + return slot; |
| 135 | + }); |
| 136 | + }; |
| 137 | + }); |
| 138 | + |
| 139 | + widget.setConfig({ data: units }); |
| 140 | + widget.setConfirmHandler(handleSlotReservation); |
| 141 | + }); |
| 142 | +~~~ |
| 143 | + |
| 144 | + |
54 | 145 | ## Example |
55 | 146 |
|
56 | 147 | <iframe src="https://snippet.dhtmlx.com/dpbmyr8j?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe> |
|
0 commit comments