### Install Dependencies and Start Dev Server (Yarn)

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-svelte.md

Commands to install project dependencies and start the development server using Yarn.

```bash
yarn 
yarn start // or yarn dev
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-react.md

Install project dependencies and start the development server using npm.

```bash
npm install
npm run dev
```

--------------------------------

### Navigate and Install Dependencies

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-angular.md

Change directory into the newly created project and install necessary dependencies using yarn, then start the development server.

```bash
cd my-angular-booking-app
yarn
yarn start
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-react.md

Install project dependencies and start the development server using Yarn.

```bash
yarn
yarn start
```

--------------------------------

### Install Dependencies

Source: https://github.com/dhtmlx/docs-booking/blob/master/README.md

Install the necessary project dependencies using Yarn. This command should be run after cloning the repository.

```bash
yarn
```

--------------------------------

### Start Date Configuration

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/config/booking-start.md

Optional. Defines the date from which to start showing available slots. Defaults to the current date.

```APIDOC
## start

### Description
Optional. Defines the date from which to start showing available slots.

### Usage
```jsx
start?: Date;
```

### Parameters
- `Date` - (optional) the start date from which to display available slots; the default value is the current date.

### Example
```jsx
new booking.Booking("#root", {
    data,
    start: new Date(2024, 10, 10),
    // other parameters
});
```
```

--------------------------------

### Run Documentation Locally

Source: https://github.com/dhtmlx/docs-booking/blob/master/README.md

Start a local server to view the DHTMLX Booking documentation. Access it through your web browser.

```bash
yarn start
```

--------------------------------

### Create React App

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-react.md

Use npx to create a new React project. Ensure Node.js is installed.

```bash
npx create-react-app my-react-booking-app
```

--------------------------------

### Initialize Booking with Start Date

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/config/booking-start.md

Use this to set a specific start date for displaying available slots. The default is the current date.

```javascript
new booking.Booking("#root", {
    data,
    start: new Date(2024, 10, 10),
    // other parameters
});
```

--------------------------------

### Create Svelte Project with Vite

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-svelte.md

Use this command to initialize a new Svelte project with Vite. Ensure Node.js is installed.

```bash
npm create vite@latest
```

--------------------------------

### Custom Card Template Example

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/config/booking-cardtemplate.md

Provides a complete example of creating a custom HTML template for a card, including CSS styles and JavaScript logic to render card details like preview image, category, title, and price. It demonstrates how to import the 'template' helper and pass the custom function to the Booking configuration.

```html
<style>
    .custom-preview {
        display: flex;
        width: 100%;
        height: 100%;
        gap: 30px;
    }

    .preview-left {
        width: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    /* other styles */
</style>

<script>
    const { Booking, template } = booking; //import template helper

    function cardPreviewTemplate({ card }) {
        return `
            <div class="custom-preview" data-action="preview-click">
                <div class="preview-left">
                    <div
                        style="background-image: url(${card.preview})"
                        class="card-photo"
                    ></div>
                    <!-- <div class="card-photo-empty" /> -->
                    </div>

                    <div class="preview-right">
                    <div class="category">${card.category}</div>
                    <div class="title">${card.title}</div>
                    <div class="price">${card.price}</div>
                </div>
            </div>
            `;
    }

    const widget = new Booking("#root", {
	    data,
	    cardTemplate: template(card => cardPreviewTemplate(card)), // pass the function to Booking configuration
    });
    // other parameters
</script>
```

--------------------------------

### Interactive Example of Custom Styling

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/styling.md

This is an interactive iframe example demonstrating how to apply custom styles to the DHTMLX Booking component.

```html
<iframe src="https://snippet.dhtmlx.com/d7w3jtqz?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
```

--------------------------------

### Handle Events Starting After Booking Start Date

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-eventcalendar.md

This JSON illustrates how to manage recurring events that begin after the Booking start date. Rules with empty time intervals are created for dates preceding the event's start date to simulate removal.

```json
{
  "type": 5,
  "start_date": "2025-03-17T09:00:00Z",
  "end_date": "2025-03-17T17:00:00Z",
  "recurring": true,
  "RRULE": "FREQ=WEEKLY;INTERVAL=1;BYDAY=SU,MO,TU,WE,TH,FR,SA;UNTIL=2027-03-13T23:59:59",
  "STDATE": "2025-03-17T09:00:00Z",
  "DTEND": "2027-03-13T00:00:00Z"
}
```

```json
{
    "id": 5,
    "slotSize":60,
    "slotGap":10,
    "slots": [
        { "from": "09:00", "to": "17:00", "days": [0, 1, 2, 3, 4, 5, 6] },
        { "from": "00:00", "to": "00:00", "dates": [
            1741820400000,  // March 13, 2025
            1741906800000,  // March 14, 2025
            1741993200000,  // March 15, 2025
            1742079600000   // March 16, 2025
        ]}
    ]
}
```

--------------------------------

### Create Vue Project

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-vue.md

Use the official Vue project scaffolding tool to create a new Vue application. Ensure Node.js is installed before running this command.

```bash
npm create vue@latest
```

--------------------------------

### Load data from server

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/saving-reservations.md

Use the native fetch method to get data from the server and configure the booking widget with it.

```jsx
const booking = new booking.Booking("#booking", {data: []});
const server = "https://some-backend-url";

fetch(server + "/data").then((res) => res.json()).then((data) => {
    booking.setConfig({data});
});
```

--------------------------------

### Custom infoShape Configuration Example

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/config/booking-infoshape.md

Demonstrates how to customize the infoShape by setting specific properties to false, thereby hiding the preview image and price from the Booking dialog's information block.

```javascript
const infoShape = {
    preview: false,
    price: false
};

new booking.Booking("#root", {
    data,
    infoShape,
    // other parameters
});
```

--------------------------------

### Custom Card Shape Example

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/config/booking-cardshape.md

Example of customizing the cardShape to hide review, subtitle, and price information when initializing the Booking component.

```javascript
const cardShape = {
    review: false,
    subtitle: false,
    price: false
};

new booking.Booking("#root", {
    cardShape,
    // other parameters
});
```

--------------------------------

### Import Booking PRO Version

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-vue.md

Import source files for the PRO version of DHTMLX Booking when installed from a local folder. Ensure the CSS file path is correct.

```html
<script>
import { Booking } from 'dhx-booking-package';
import 'dhx-booking-package/dist/booking.css';
</script>
```

--------------------------------

### Configure Booking with Data and Card Shape

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/how-to-start.md

Initialize the Booking component with initial data for cards and configure which card data fields to display. This example sets up therapist cards with specific booking slots.

```javascript
const data = [
    {
        id: "ee828b5d-a034-420c-889b-978840015d6a",
        title: "Natalie Tyson",
        category: "Therapist",
        subtitle: "2 years of experience",
        details: "Cleveland Clinic\n9500 Euclid Ave",
        preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
        price: "$35",
        review: {
            stars: 4,
            count: 120
        },
        slots: [
            {
                from: 9,
                to: 20,
                days: [1, 2, 3, 4, 5]
            },
            {
                from: 10,
                to: 18,
                days: [6, 0]
            }
        ]
    },
    {
        id: "5c9b64ad-1830-4e5b-a5f9-8acea10706df",
        title: "James Anderson",
        category: "Allergist",
        subtitle: "3 years of experience",
        details: "UCLA Medical Center\n57 Westwood Plaza",
        preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/11.jpg",
        price: "$30",
        review: {
            stars: 4,
            count: 64
        },
        slotSize: 45,
        slotGap: 10,
        slots: [
            {
                from: "9:15",
                to: 17,
                days: [1, 2, 3, 4, 5]
            }
        ]
    }
];

const cardShape = {
    review: false,
    subtitle: false,
    price: false
};

new booking.Booking("#root", {
    data,
    cardShape,
    // other parameters
});
```

--------------------------------

### Get Reactive State of Booking

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/internal/booking-getreactivestate.md

Initializes the Booking component and then retrieves its reactive state, logging it to the console. It also demonstrates how to subscribe to changes in the 'cards' property of the state.

```javascript
const booking = new booking.Booking("#root", {
    data,
    //other properties
});

// 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) => {
    console.log(data);
});
```

--------------------------------

### Create Angular Project

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-angular.md

Use Angular CLI to create a new Angular project. Ensure Server-Side Rendering (SSR) and Static Site Generation (SSG) are disabled if you intend to follow this guide.

```bash
ng new my-angular-booking-app
```

--------------------------------

### Convert Scheduler Events to Booking Slots

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-scheduler.md

This example demonstrates integrating Booking with Scheduler by converting doctor schedules into booking slots. It highlights the key data endpoints used for this integration, including Scheduler data, generated Booking slots, and reservation data.

```html
<iframe src="https://snippet.dhtmlx.com/d5zbq3g3?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="800"></iframe>
```

--------------------------------

### Apply Custom Styles with CSS Variables

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/styling.md

Apply custom styles to Booking by defining CSS variables within a custom class. This example sets background, font colors, and border styles.

```html
<div id="root" class="demo"></div>
<style>
    .demo {
        --wx-background: #c4c7e0;
        --wx-color-font: rgba(12, 12, 116, 0.9);
        --wx-color-secondary-font: rgba(34, 33, 33, 0.904);
        --wx-icon-color: rgba(149, 179, 223, 0.7);
        --wx-booking-primary-hover: #194e9e;
        --wx-booking-border-color: 1px solid #818080;
        --wx-border: 1px dashed #818080; 
    }
</style>
```

--------------------------------

### Convert Event Calendar Events to Booking Slots

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-eventcalendar.md

This example demonstrates the integration of Booking with the Event Calendar widget by converting doctors' schedules into booking slots. It utilizes server-side processing to generate these slots from Event Calendar data.

```html
<iframe src="https://snippet.dhtmlx.com/c5eu8pdk?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="800"></iframe>
```

--------------------------------

### Initialize Booking Component with Data in Booking.jsx

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-react.md

This component initializes the DHTMLX Booking widget. It uses `useRef` to get a DOM element and `useEffect` to create the Booking instance, passing the data received via props to the configuration.

```jsx
import { useEffect, useRef } from "react";
import { Booking } from "@dhx/trial-booking";
import "@dhx/trial-booking/dist/booking.css";

export default function BookingComponent(props) {
    let container = useRef(); 

    useEffect(() => {
        const booking = new Booking(container.current, {
            data: props.data
            // other configuration properties
        });

        return () => {
            booking.destructor();
        }
    }, []);

    return <div ref={container} className="widget"></div>;
}
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-react.md

Change into the newly created project directory.

```bash
cd my-react-booking-app
```

--------------------------------

### Handle Scheduler Events Starting After Booking Start Date

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-scheduler.md

Simulates dates being removed from a recurrence by creating Booking rules with empty time intervals for dates prior to the Scheduler event's start date.

```json
{
    "doctor_id": 5,
    "start_date": "2025-03-17 09:00:00",
    "end_date": "2027-03-13 00:00:00",
    "rrule": "INTERVAL=1;FREQ=WEEKLY;BYDAY=SU,MO,TU,WE,TH,FR,SA",
    "duration": 28800
}
```

```json
{
    "id": 5,
    "slotSize":60,
    "slotGap":10,
    "slots": [
        { "from": "09:00", "to": "17:00", "days": [0, 1, 2, 3, 4, 5, 6] },
        { "from": "00:00", "to": "00:00", "dates": [
            1741820400000,  
            1741906800000,  
            1741993200000,  
            1742079600000   
        ]}
    ]
}
```

--------------------------------

### Initialize Booking with Local Data

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/loading-data.md

Create a new Booking instance and pass the loaded data to its configuration. This initializes the component with your prepared dataset.

```jsx
const { data } = getData();
const booking = new booking.Booking("#root", { data });
```

--------------------------------

### Initialize Booking with HTML Container

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/how-to-start.md

Create a DIV element to serve as the container for the Booking application and initialize the Booking instance. Ensure the container ID matches the one used in the script.

```html
<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with Booking</title>
        <script src="./dist/booking.js"></script>   
        <link href="./dist/booking.css" rel="stylesheet">  
    </head>
    <body>
        <div id="root"></div>
        <script>
            const booking = new booking.Booking("#root", {
                // configuration properties
            });
        </script>
    </body>
</html>
```

--------------------------------

### select-slot Event

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/events/booking-selectslot-event.md

Fires when a slot is selected. The callback receives an object containing the ID of the card and the start time/duration of the slot.

```APIDOC
## select-slot Event

### Description
Fires when selecting a slot.

### Usage
```jsx
"select-slot": ({
    id: string | number,
    time:[ number, number ] 
}) => void;
```

### Parameters
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 (timestamps are in a local timezone)

### Example
```jsx
// create Booking
const booking = new booking.Booking("#root", {
    data,
    // other configuration parameters
});

// output the id of the selected slot
booking.api.on("select-slot", (obj) => {
    console.log(obj.id);
});
```
```

--------------------------------

### Initialize Booking Component

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/overview/booking-api-overview.md

Instantiate the Booking component by providing the ID of the HTML container and an object of configuration parameters.

```javascript
new booking.Booking("#root", {
    // initial configuration parameters
});
```

--------------------------------

### Listening to select-item-date Event

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/events/booking-selectitemdate-event.md

Attach a listener to the 'select-item-date' event to get the id and date of the selected item. The date is provided in milliseconds.

```javascript
booking.api.on("select-item-date", (ev) => {
    console.log(ev.date);
});
```

--------------------------------

### Initialize and Update Booking Configuration

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/methods/booking-setconfig-method.md

Demonstrates how to initialize the Booking widget with an initial configuration and then update specific configuration parameters using the setConfig() method. This is useful for dynamically changing aspects like card display or filter options.

```javascript
const booking = new booking.Booking("#root", {
    data,
    cardShape: {
        review: false,
        subtitle: false,
        details: false
    },
    filterShape: {
        date: false,
        autoApply: true,
        time: [
            { from: 8, to: 11, label: "Morning" },
            { from: 12, to: 16, label: "Afternoon" },
            { from: 17, to: 20, label: "Evening" }
        ]
    } 
});

//update configuration parameters
booking.setConfig({
    config: {
        cardShape: {
            review: true
        },
        filterShape: {
            date: true,
            autoApply: false,
            time: [
                { from: 9, to: 11, label: "Morning" },
                { from: 13, to: 17, label: "Afternoon" },
                { from: 18, to: 20, label: "Evening" }
            ]
        }
    }
});
```

--------------------------------

### Listen to select-item Event

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/events/booking-selectitem-event.md

Attach an event listener to the 'select-item' event to get the ID of the selected item. This is useful for tracking user selections.

```javascript
const booking = new booking.Booking("#root", {
    data,
    // other configuration parameters
});

// output the id of the selected item
booking.api.on("select-item", (ev) => {
    console.log(ev.id);
});
```

--------------------------------

### Get Booking Data and Configuration

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/loading-data.md

A function to retrieve data and card shape configuration for the Booking component. This is useful for loading data from a local file.

```jsx
function getData() {
    return {
        data,
        cardShape
    };
}

const data = [
    {
        id: "ee828b5d-a034-420c-889b-978840015d6a",
        title: "Natalie Tyson",
        category: "Therapist",
        subtitle: "2 years of experience",
        details: "Cleveland Clinic\n9500 Euclid Ave",
        preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
        price: "$35",
        review: {
            stars: 4,
            count: 120
        },
        slots: [
            {
                from: 9, to: 20,
                days: [1, 2, 3, 4, 5]
            },
            {
                from: 10, to: 18,
                days: [6, 0]
            }
        ]
    },
    //other data
];

const cardShape = {
    preview: true,
    review: true,
    category: true,
    title: true,
    subtitle: true,
    price: true,
    details: true
};
```

--------------------------------

### Import and Use Booking Data in App.js

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-react.md

This file demonstrates how to import the data from data.js and pass it as a prop to the Booking component. Ensure the Booking component is imported correctly.

```jsx
import Booking from "./Booking";
import { getData } from "./data";

function App() {
    const dataset = getData();
    return <Booking data={dataset} />;
}

export default App;
```

--------------------------------

### getState()

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/internal/booking-getstate.md

Gets an object with the StateStore properties of Booking. This method returns an object containing various properties that represent the current state of the booking system.

```APIDOC
## api.getState()

### Description
Gets an object with the StateStore properties of Booking.

### Method
`getState(): object;`

### Returns
The method returns an object with the following parameters of state:
```json
{
    "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
// create Booking
const booking = new booking.Booking("#root", {
    data,
    cardShape
});

// get and output the State of Booking to console
const state = booking.api.getState();
console.log(state);
```
```

--------------------------------

### Import DHTMLX Booking (Trial Version)

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-svelte.md

Import the DHTMLX Booking package and its CSS for the trial version. This is the recommended import path for the trial.

```html
<script>
import { Booking } from '@dhx/trial-booking';
import '@dhx/trial-booking/dist/booking.css';
</script>
```

--------------------------------

### Clone DHTMLX Booking Documentation

Source: https://github.com/dhtmlx/docs-booking/blob/master/README.md

Clone the documentation repository to your local machine using Git. Navigate into the cloned directory afterwards.

```bash
git clone git@github.com:DHTMLX/docs-booking.git
cd docs-booking
```

--------------------------------

### getReactiveState()

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/internal/booking-getreactivestate.md

Gets an object containing the reactive properties of the Booking component. This object includes data related to cards, filters, forms, selections, and slot configurations.

```APIDOC
## api.getReactiveState()

### Description
Gets an object with the reactive properties of Booking.

### Method
`api.getReactiveState(): object;`

### Returns
An object containing the reactive state of the Booking component. The object has the following properties:

- **data** (array) - An array of card objects.
- **cardShape** (object) - An object with settings for cards.
- **filteredData** (array) - A filtered data array.
- **filterShape** (object) - An object with filter settings.
- **filterValues** (object) - An object with filter values (text, data, time).
- **formShape** (array) - An array of objects with settings for the Booking editor dialog.
- **infoShape** (object) - An object with settings for the left side of the Booking editor.
- **selectedItem** (object) - The currently selected data item.
- **selectedSlot** (object) - An object with the slot ID and timestamp in minutes.
- **slotGap** (number) - The gap between slots in minutes.
- **slotSize** (number) - The size of a slot in minutes.

### Example
```jsx
// create Booking
const booking = new booking.Booking("#root", {
    data,
    //other properties
});

// 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) => {
    console.log(data);
});
```
```

--------------------------------

### Booking Constructor

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/overview/booking-api-overview.md

Initializes a new instance of the Booking component. It requires an HTML container ID and an optional configuration object.

```APIDOC
## Booking constructor

```jsx
new booking.Booking("#root", {
    // initial configuration parameters
});
```

**Parameters**:

- an HTML container (the ID of the HTML container)
- an object of the configuration parameters
```

--------------------------------

### Handle select-slot Event

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/events/booking-selectslot-event.md

Listen for the 'select-slot' event to get the ID of the selected slot. The event object contains the slot's ID and time information.

```javascript
booking.api.on("select-slot", (obj) => {
    console.log(obj.id);
});
```

--------------------------------

### Bootstrap AppModule in main.ts

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-angular.md

Use platformBrowserDynamic to bootstrap your AppModule, initiating the Angular application with the Booking module.

```typescript
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
```

--------------------------------

### Apply Filter Data at Initialization

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/events/booking-filterdata-event.md

Demonstrates how to apply filter data when initializing the Booking component using the api.exec() method. This allows setting initial filter criteria.

```javascript
// create Booking
const booking = new booking.Booking("#root", {
    data,
    // other configuration parameters
});
booking.api.exec("filter-data", {
    text: "Allergist",
    date: {
        start: new Date,
        end: new Date(2025, 4, 10)
    },
    time: [
        {
            from: 12,
            to: 20
        }
    ]
});
```

--------------------------------

### Custom filterShape Example

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/config/booking-filtershape.md

Demonstrates how to customize the filterShape for a DHTMLX Booking instance, disabling the date filter and enabling auto-apply. Custom time ranges are also specified.

```javascript
const filterShape = {
    date: false,
    autoApply: true,
    time: [
        { from: 8, to: 11, label: "Morning" },
        { from: 12, to: 18, label: "Afternoon" },
        { from: 18, to: 21, label: "Evening" }
    ]
};

new booking.Booking("#root", {
    data,
    filterShape,
    // other parameters
});
```

--------------------------------

### Get Booking State

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/internal/booking-getstate.md

Call the getState method on the booking API to retrieve an object containing all current state properties. This is useful for debugging or persisting the booking state.

```javascript
const state = booking.api.getState();
console.log(state);
```

--------------------------------

### Initialize Booking Component in Vue

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-vue.md

Create a Vue component to display Booking. Initialize the Booking instance in the `mounted` hook and call `destructor` in the `unmounted` hook to prevent memory leaks.

```html
<script>
import { Booking } from "@dhx/trial-booking";
import "@dhx/trial-booking/dist/booking.css";

export default {
    mounted() {
        // initialize the Booking component
        this.booking = new Booking(this.$refs.container, {});
    },

    unmounted() {
        this.booking.destructor(); // destruct Booking
    }
};
</script>

<template>
    <div ref="container" class="widget"></div>
</template>
```

--------------------------------

### Serialize Booking Data to JSON

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/methods/booking-serialize-method.md

Call the serialize() method on a Booking instance to get the current data as a JSON array. This is useful for saving or transferring booking information.

```javascript
const booking = new booking.Booking("#root", {
    data,
    // configuration parameters
});

console.log(booking.serialize());
```

--------------------------------

### Convert Single Scheduler Event to Booking Slot

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-scheduler.md

Converts a single Scheduler event into a Booking slot by mapping start and end times to the 'slots' array with corresponding dates.

```json
{
   "doctor_id": 1,
   "start_date": "2025-03-18 02:00:00",
   "end_date": "2025-03-18 06:00:00"
}
```

```json
{
   "id": 1,
   "slotSize": 20,
   "slotGap": 5,
   "slots": [
     {
       "from": "02:00",
       "to": "06:00",
       "dates": [
         1742256000000 
       ]
     }
   ]
}
```

--------------------------------

### Initialize Booking Component in App.vue

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-vue.md

This Vue.js script imports the Booking component and the data generation function. It initializes the dataset in the component's data and passes it as a prop to the Booking component.

```html
<script>
import Booking from "./components/Booking.vue";
import { getData } from "./data";

export default {
    components: { Booking },
    data() {
        const dataset = getData();
        return { dataset };
    }
};
</script>

<template>
    <Booking :data="dataset" />
</template>
```

--------------------------------

### Initialize Booking Component in React

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-react.md

Create a React component to initialize and manage the DHTMLX Booking instance. Use `useRef` for the container and `useEffect` for initialization and cleanup.

```jsx
import { useEffect, useRef } from "react";
import { Booking } from "@dhx/trial-booking";
import "@dhx/trial-booking/dist/booking.css"; // include Booking styles

export default function BookingComponent(props) {
    let container = useRef(); // initialize container for Booking

    useEffect(() => {
        // initialize the Booking component
        const booking = new Booking(container.current, {});

        return () => {
            booking.destructor(); // destruct Booking
        };
    }, []);

    return <div ref={container} className="widget"></div>;
}
```

--------------------------------

### Convert Single Event to Booking Slot

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-eventcalendar.md

Converts a single Event Calendar event into a Booking slot by mapping start and end times to the 'slots' array with corresponding dates.

```json
{
  "type": 1, // type is calendar id
  "start_date": "2025-03-18T02:00:00Z", // assume dates in UTC
  "end_date": "2025-03-18T06:00:00Z"
}
```

```json
{
   "id": 1,
   "slotSize": 20,
   "slotGap": 5,
   "slots": [
     {
       "from": "02:00",
       "to": "06:00",
       "dates": [
         1742256000000 // 2025-03-18 00:00:00 (timestamp)
       ]
     }
   ]
}
```

--------------------------------

### Convert Recurring Scheduler Event to Booking Slot

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-scheduler.md

Transforms a recurring Scheduler event with an rrule into a Booking slot, defining a weekly pattern with start and end times for the recurring period.

```json
{
   "doctor_id": 1,
   "start_date": "2025-03-13 09:00:00",
   "end_date": "2027-03-13 00:00:00",
   "rrule": "INTERVAL=1;FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR",
   "duration": 28800
}
```

```json
{
   "id": 1,
   "slotSize": 20,
   "slotGap": 5,
   "slots": [
     {
       "from": "09:00",
       "to": "17:00",
       "days": [1, 2, 3, 4, 5] 
     }
   ]
}
```

--------------------------------

### Initialize Booking Component in Booking.svelte

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-svelte.md

This Svelte component initializes the DHTMLX Booking widget. It imports the necessary library, CSS, and defines props for data. The component mounts the Booking instance in the DOM and handles its destruction.

```html
<script>
import { onMount, onDestroy } from "svelte";
import { Booking } from "@dhx/trial-booking";
import "@dhx/trial-booking/dist/booking.css";

export let data;

let container;
let booking;

onMount(() => {
    booking = new Booking(container, {
        data
    })
});

onDestroy(() => {
    booking.destructor();
});
</script>

<div bind:this={container} class="widget"></div>
```

--------------------------------

### Import Trial Version Booking Package

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-react.md

Import source files for the trial version of DHTMLX Booking. This is used for configuration in this tutorial.

```jsx
import { Booking } from '@dhx/trial-booking';
import "@dhx/trial-booking/dist/booking.css";
```

--------------------------------

### Include Built-in Material Theme from Skins Folder

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/styling.md

Alternatively, include the Material theme by linking the 'material.css' file from the skins folder.

```html
<link type="stylesheet" href="path/to/booking/skins/material.css"/>
```

--------------------------------

### Define Booking Data in data.js

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/integration-with-react.md

This file defines the structure and sample data for the Booking component. It includes a helper function to generate dates and an array of objects, each representing a bookable item with its properties.

```jsx
export function getData() {
    function getDate(addDays, hoursValue = 0, minutesValue = 0) {
        const date = new Date();
        const secondsValue = 0; // round to minutes
        const msValue = 0; 
    
        date.setDate(date.getDate() + addDays);
        date.setHours(hoursValue, minutesValue, secondsValue, msValue);
    
        return date.getTime();
    }

    return [
        {
            id: "ee828b5d-a034-420c-889b-978840015d6a",
            title: "Natalie Tyson",
            category: "Therapist",
            subtitle: "2 years of experiece",
            details: "Cleveland Clinic\n9500 Euclid Ave",
            preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
            price: "$35",
            review: {
                stars: 4,
                count: 120
            },
            slots: [
                {
                    from: 9,
                    to: 20,
                    days: [1, 2, 3, 4, 5]
                },
                {
                    from: 10,
                    to: 18,
                    days: [6, 0]
                }
            ]
        },
        {
            id: "9b037564-77be-429f-b719-eebbe499027a",
            title: "Emma Johnson",
            category: "Cardiologist",
            subtitle: "2 years of experience",
            details: "Stanford Health Care\n1468 Madison Ave",
            preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/03.jpg",
            price: "$25",
            review: {
                stars: 5,
                count: 10
            },
            slots: [
                {
                    from: 14,
                    to: 17,
                    size: 30,
                    gap: 10
                },
                {
                    from: 12,
                    to: 19,
                    size: 50,
                    gap: 20,
                    days: [2],
                    dates: [getDate(0)]
                },
                {
                    from: "18:30",
                    to: 20,
                    size: 20,
                    gap: 20,
                    days: [3, 4, 5]
                }
            ],
            usedSlots: [getDate(0, 12), getDate(0, 18)]
        },
        // ...
    ];
}
```

--------------------------------

### Initialize Booking Component

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/initialization.md

Initialize the DHTMLX Booking component using its constructor. Pass the ID of the HTML container and an object with configuration properties.

```jsx
// create Booking
new booking.Booking("#root", {
    // configuration properties
});
```

--------------------------------

### Default Booking Form Configuration

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/api/config/booking-formshape.md

Provides a default structure for the booking form, including fields for name, email, and description with associated validation rules and error messages. Use this as a starting point for your custom form.

```jsx
const defaultFormShape = [
    {
        comp: "text",
        key: "name",
        label: "Name",
        required: true,
        validation: val => {
            return !!val.replace(/\s/g, "");
        },
        errorMessage: " should not be empty"
    },
    {
        comp: "text",
        key: "email",
        label: "Email",
        required: true,
        validation: val => {
            const regEx = /^\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
            return val && regEx.test(val);
        },
        errorMessage: " should contain valid email address"
    },
    {
        comp: "textarea",
        key: "description",
        label: "Description"
    }
];

```

--------------------------------

### Customize Built-in Material Theme CSS Variables

Source: https://github.com/dhtmlx/docs-booking/blob/master/docs/guides/styling.md

Customize the Material theme by overriding its CSS variables within a style block. This example sets dark color scheme and various font and background properties.

```html
<style>
    .wx-material-theme {
        color-scheme: dark;
        --wx-color-font: rgba(255, 255, 255, 0.9);
        --wx-color-secondary-font: rgba(255, 255, 255, 0.5);
        --wx-icon-color: rgba(255, 255, 255, 0.7);
        --wx-icon-color-hover: rgba(255, 255, 255, 0.2);
        --wx-background: #949393;
        --wx-booking-background: #c0bbbb;
        --wx-background-alt: #a5a3a3;
        --wx-booking-content-background: #a3a1a1;
        --wx-border: 1px solid #818080;
        --wx-border-medium: 1px solid #9e9e9e;
        --wx-input-background: #d6d3d3;
    }
</style>
```