Обзор DHTMLX Booking

Обзор

JavaScript Booking — это готовый компонент, предназначенный для простого встраивания в ваше приложение. Он предоставляет конечным пользователям функциональность для онлайн-записи на приём и широкие возможности фильтрации. Виджет адаптивен и оптимизирован для мобильных устройств.

Структура Booking

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

Список карточек

Все карточки отображаются в виде списка. Левая часть каждой карточки показывает следующие элементы информации:

• preview: изображение карточки
• review: информация о рейтинге с количеством звёзд (из пяти) и числом отзывов
• category: название категории карточки (например, специализация специалиста)
• title: заголовок карточки (например, имя специалиста)
• subtitle: подзаголовок карточки (например, сведения об опыте)
• price: стоимость услуги
• details: прочие сведения о карточке

Слоты

Правая часть каждой карточки содержит кликабельные слоты, доступные для бронирования. Слоты отображаются на следующие шесть дней (четыре на узких экранах), начиная с текущей даты или даты начала, выбранной в фильтре.

Просмотр отдельной карточки

Чтобы открыть просмотр отдельной карточки, кликните по левой части карточки. В диалоге одиночной карточки отображаются заголовок карточки, календарь и доступные слоты для выбранной в календаре даты.

Диалог бронирования

Диалог бронирования позволяет забронировать слот выбранной карточки. Чтобы открыть его, кликните по кнопке временного слота.

Инструкции по бронированию см. в разделе Запись на приём.

Фильтрация данных

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

• from: 8, to: 12 (Morning)
• from: 12, to: 17 (Afternoon)
• from: 17, to: 20 (Evening)

Настроить параметры фильтра можно через API: Настройка фильтра

Запись на приём

Чтобы записаться на приём, кликните по кнопке временного слота нужной карточки, в диалоге Booking заполните поля и нажмите Make an appointment.

Также можно записаться через просмотр отдельной карточки:

1. Кликните по левой части карточки.
2. В открывшемся просмотре одиночной карточки выберите нужную дату и время.
3. Рядом с выбранным временем нажмите Confirm.
4. В появившемся диалоге Booking заполните поля и нажмите Make an appointment.

Что дальше

Теперь вы можете приступить к созданию простого виджета Booking на своей странице.