Skip to content

Commit ebd9634

Browse files
serhiipylypchuk1991serhiipylypchuk1991
committed
[add] guide related to integration Booking with React
1 parent 8faf046 commit ebd9634

1 file changed

Lines changed: 287 additions & 0 deletions

File tree

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

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

0 commit comments

Comments
 (0)