Перейти к основному содержимому

Начало работы

Это руководство проведёт вас через шаги, необходимые для создания полноценного приложения Booking на странице.

Полнофункциональное приложение DHTMLX Booking на веб-странице

Шаг 1. Скачивание и установка пакетов​

Скачайте пакет и распакуйте его в папку вашего проекта.

Вы можете импортировать JavaScript Booking в свой проект с помощью менеджера пакетов yarn или npm.

Установка ознакомительной версии Booking через npm или yarn​

к сведению

Если вы хотите использовать ознакомительную версию Booking, скачайте пробный пакет booking и следуйте инструкциям из файла README. Обратите внимание, что пробная версия Booking доступна только в течение 30 дней.

Установка PRO-версии Booking через npm или yarn​

к сведению

Вы можете получить доступ к приватному npm DHTMLX непосредственно в Личном кабинете клиента, сгенерировав логин и пароль для npm. Там же доступно подробное руководство по установке. Обратите внимание, что доступ к приватному npm предоставляется только при наличии активной лицензии на Booking.

Шаг 2. Подключение исходных файлов​

Начните с создания HTML-файла и назовите его index.html. Затем подключите исходные файлы Booking в созданный файл.

Необходимы два файла:

  • JS-файл booking
  • CSS-файл booking
index.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>
        <script>
        // ваш код будет здесь
        </script>
    </body>
</html>
подсказка

Если вы хотите интегрировать JavaScript Booking в проекты на React, Angular или Vue, обратитесь к соответствующим примерам на CodeSandbox для получения дополнительной информации.

Шаг 3. Создание booking​

Теперь вы готовы добавить booking на страницу. Для начала создадим DIV-контейнер для Booking.

index.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 widget = new booking.Booking("#root", {
                // свойства конфигурации
            });
        </script>
    </body>
</html>

Шаг 4. Настройка Booking​

Чтобы начать работу с Booking, сначала необходимо предоставить начальные данные, а затем добавить другие свойства конфигурации, которые должны применяться при инициализации. Пример ниже создаёт Booking с двумя карточками:

  • свойство 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]
            }
        ]
    },
    {
        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,
    // другие параметры
});

Что дальше​

Это всё, что нужно для создания простого Booking на странице. Далее изучите АПИ Booking:

  • страницы руководств содержат инструкции по установке, загрузке данных, настройке стилей и другие полезные советы по конфигурации Booking
  • справочник АПИ описывает функциональность Booking
Need more help?Contact Support