Skip to content

Commit a9a37e2

Browse files
serhiipylypchuk1991serhiipylypchuk1991
committed
[add] guide related to integration Booking with Svelte
1 parent ebd9634 commit a9a37e2

1 file changed

Lines changed: 300 additions & 0 deletions

File tree

‎docs/guides/integration-with-svelte.md‎

Lines changed: 300 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,300 @@
1+
---
2+
sidebar_label: Integration with Svelte
3+
title: Integration with Svelte
4+
description: You can learn about the integration with Svelte 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+
# Integration with Svelte
8+
9+
:::tip
10+
You should be familiar with the basic concepts and patterns of **Svelte** before reading this documentation. To refresh your knowledge, please refer to the [**Svelte documentation**](https://svelte.dev/).
11+
:::
12+
13+
DHTMLX Booking is compatible with **Svelte**. We have prepared code examples on how to use DHTMLX Booking with **Svelte**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/svelte-booking-demo).
14+
15+
## Creating a project
16+
17+
:::info
18+
Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/).
19+
:::
20+
21+
To create a **Svelte** JS project, run the following command:
22+
23+
~~~json
24+
npm create vite@latest
25+
~~~
26+
27+
Let's name the project as **my-svelte-booking-app**.
28+
29+
### Installation of dependencies
30+
31+
Go to the app directory:
32+
33+
~~~json
34+
cd my-svelte-booking-app
35+
~~~
36+
37+
Install dependencies and start the dev server. For this, use a package manager:
38+
39+
- if you use [**yarn**](https://yarnpkg.com/), run the following commands:
40+
41+
~~~jsx
42+
yarn
43+
yarn start // or yarn dev
44+
~~~
45+
46+
- if you use [**npm**](https://www.npmjs.com/), run the following commands:
47+
48+
~~~json
49+
npm install
50+
npm run dev
51+
~~~
52+
53+
The app should run on a localhost (for instance `http://localhost:3000`).
54+
55+
## Creating Booking
56+
57+
Now you should get the DHTMLX Booking source code. First of all, stop the app and proceed with installing the Booking package.
58+
59+
### Step 1. Package installation
60+
61+
Download the [**trial Booking package**](/how-to-start/#installing-trial-booking-via-npm-and-yarn) and follow steps mentioned in the README file. Note that trial Booking is available 30 days only.
62+
63+
### Step 2. Component creation
64+
65+
Now you need to create a Svelte component, to add Booking into the application. Let's create a new file in the ***src/*** directory and name it ***Booking.svelte***.
66+
67+
#### Import source files
68+
69+
Open the ***Booking.svelte*** file and import Booking source files. Note that:
70+
71+
- if you use PRO version and install the Booking package from a local folder, the import paths look like this:
72+
73+
~~~html title="Booking.svelte"
74+
<script>
75+
import { Booking } from 'dhx-booking-package';
76+
import 'dhx-booking-package/dist/booking.css';
77+
</script>
78+
~~~
79+
80+
Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as ***booking.min.css***.
81+
82+
- if you use the trial version of Booking, specify the following paths:
83+
84+
~~~html title="Booking.svelte"
85+
<script>
86+
import { Booking } from '@dhx/trial-booking';
87+
import '@dhx/trial-booking/dist/booking.css';
88+
</script>
89+
~~~
90+
91+
:::info
92+
In this tutorial you can see how to configure the **trial** version of Booking.
93+
:::
94+
95+
#### Setting the container and adding Booking
96+
97+
To display Booking on the page, you need to create the container for Booking, and initialize this component using the corresponding constructor:
98+
99+
~~~html {3,6,10-11,19} title="Booking.svelte"
100+
<script>
101+
import { onMount, onDestroy } from "svelte";
102+
import { Booking } from "@dhx/trial-booking";
103+
import "@dhx/trial-booking/dist/booking.css";
104+
105+
let container; // initialize container for Booking
106+
let booking;
107+
108+
onMount(() => {
109+
// initialize the Booking component
110+
booking = new Booking(container, {})
111+
});
112+
113+
onDestroy(() => {
114+
booking.destructor(); // destruct Booking
115+
});
116+
</script>
117+
118+
<div bind:this={container} class="widget"></div>
119+
~~~
120+
121+
#### Adding styles
122+
123+
To display Booking correctly, you need to specify important styles for Booking and its container in the main css file of the project:
124+
125+
~~~css title="main.css"
126+
/* specify styles for initial page */
127+
html,
128+
body,
129+
#app { /* make sure that you use the #app root container */
130+
height: 100%;
131+
padding: 0;
132+
margin: 0;
133+
}
134+
135+
/* specify styles for the Booking container */
136+
.widget {
137+
height: 100%;
138+
}
139+
~~~
140+
141+
#### Loading data
142+
143+
To add data into the Booking, we need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it:
144+
145+
~~~jsx title="data.js"
146+
export function getData() {
147+
function getDate(addDays, hoursValue = 0, minutesValue = 0) {
148+
const date = new Date();
149+
const secondsValue = 0; // round to minutes
150+
const msValue = 0;
151+
152+
date.setDate(date.getDate() + addDays);
153+
date.setHours(hoursValue, minutesValue, secondsValue, msValue);
154+
155+
return date.getTime();
156+
}
157+
158+
return [
159+
{
160+
id: "ee828b5d-a034-420c-889b-978840015d6a",
161+
title: "Natalie Tyson",
162+
category: "Therapist",
163+
subtitle: "2 years of experiece",
164+
details: "Cleveland Clinic\n9500 Euclid Ave",
165+
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
166+
price: "$35",
167+
review: {
168+
stars: 4,
169+
count: 120
170+
},
171+
slots: [
172+
{
173+
from: 9,
174+
to: 20,
175+
days: [1, 2, 3, 4, 5]
176+
},
177+
{
178+
from: 10,
179+
to: 18,
180+
days: [6, 0]
181+
}
182+
]
183+
},
184+
{
185+
id: "9b037564-77be-429f-b719-eebbe499027a",
186+
title: "Emma Johnson",
187+
category: "Cardiologist",
188+
subtitle: "2 years of experience",
189+
details: "Stanford Health Care\n1468 Madison Ave",
190+
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/03.jpg",
191+
price: "$25",
192+
review: {
193+
stars: 5,
194+
count: 10
195+
},
196+
slots: [
197+
{
198+
from: 14,
199+
to: 17,
200+
size: 30,
201+
gap: 10
202+
},
203+
{
204+
from: 12,
205+
to: 19,
206+
size: 50,
207+
gap: 20,
208+
days: [2],
209+
dates: [getDate(0)]
210+
},
211+
{
212+
from: "18:30",
213+
to: 20,
214+
size: 20,
215+
gap: 20,
216+
days: [3, 4, 5]
217+
}
218+
],
219+
usedSlots: [getDate(0, 12), getDate(0, 18)]
220+
},
221+
// ...
222+
];
223+
}
224+
~~~
225+
226+
Then open the ***App.svelte*** file, import data, and pass it into the new created `<Booking/>` components as **props**:
227+
228+
~~~html {3,5,8} title="App.svelte"
229+
<script>
230+
import Booking from "./Booking.svelte";
231+
import { getData } from "./data.js";
232+
233+
const dataset = getData();
234+
</script>
235+
236+
<Booking data={dataset} />
237+
~~~
238+
239+
Go to the ***Booking.svelte*** file and apply the passed **props** to the Booking configuration object:
240+
241+
~~~html {6,13} title="Booking.svelte"
242+
<script>
243+
import { onMount, onDestroy } from "svelte";
244+
import { Booking } from "@dhx/trial-booking";
245+
import "@dhx/trial-booking/dist/booking.css";
246+
247+
export let data;
248+
249+
let container;
250+
let booking;
251+
252+
onMount(() => {
253+
booking = new Booking(container, {
254+
data
255+
})
256+
});
257+
258+
onDestroy(() => {
259+
booking.destructor();
260+
});
261+
</script>
262+
263+
<div bind:this={container} class="widget"></div>
264+
~~~
265+
266+
Now the Booking component is ready to use. When the element will be added to the page, it will initialize the Booking with data. You can provide necessary configuration settings as well. Visit our [Booking API docs](/api/overview/booking-properties-overview/) to check the full list of available properties.
267+
268+
#### Handling events
269+
270+
When a user makes some action in the Booking, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](/api/overview/booking-events-overview/).
271+
272+
Open ***Booking.svelte*** and complete the `onMount()` method in the following way:
273+
274+
~~~html {8-11} title="Booking.svelte"
275+
<script>
276+
// ...
277+
let booking;
278+
279+
onMount(() => {
280+
booking = new Booking(container, {})
281+
282+
// output the id of the selected slot
283+
booking.api.on("select-slot", (obj) => {
284+
console.log(obj.id);
285+
});
286+
});
287+
288+
onDestroy(() => {
289+
booking.destructor();
290+
});
291+
</script>
292+
293+
// ...
294+
~~~
295+
296+
After that, you can start the app to see Booking loaded with data on a page.
297+
298+
![Booking initialization](../assets/trial-booking.png)
299+
300+
Now you know how to integrate DHTMLX Booking with Svelte. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/svelte-booking-demo).

0 commit comments

Comments
 (0)