Позвольте вашим посетителям и клиентам легко и быстро назначать встречи на вашем веб-сайте с помощью бесплатных встраиваемых виджетов Spurwing, таких как этот:
В этом посте я проведу вас через разработку и настройку простых инструментов планирования встреч и виджетов, которые вы можете легко разместить на своем веб-сайте. Все это требует возможности добавления кода HTML, CSS и JavaScript, что обычно возможно даже с популярными веб-сайтами CMS, такими как Wordpress и другие.
Сам интерфейс календаря предоставляется pg-calendar и вполне удобен для мобильных устройств. HTML-код для отображения календаря, расположенный под index.html, состоит всего из 4 строк кода:
<div id="disabled-range" class="article">
<div class="disabled-range-calendar"></div>
<div class="box">loading ...</div>
</div>Код JavaScript (с библиотекой jQuery) для логики планирования встреч находится в разделе js/demo.js. Вот общий обзор потока:
- предоставить информацию об API Spurwing.
- страница готова ➜ init_calendar()
- init_calendar: загружает доступные дни на основе вашей учетной записи Spurwing и ограничивает диапазон бронирования до 2 месяцев (переменная
show_months). - функция
onSelectHandler(date)вызывается всякий раз, когда выбран день. Он также отображает доступные слоты и форму отправки. - наконец, реализована функция события клика для кнопки отправки.
Полный код этого виджета расписания доступен здесь.
Прелесть заключается в том, что вы можете создать или настроить свой собственный виджет планирования встреч, написав менее 100 строк кода, без использования сложных фреймворков, таких как React/Vue/Angular, если только они не соответствуют масштабу вашего проекта.
Мы также используем библиотеку JavaScript Spurwing API для обработки всех необходимых запросов API, которая загружается в index.html:
<script type="text/javascript" src="https://spurwing.github.io/Spurwing-API-Javascript-Library/spurwing.js"></script>В Spurwing у нас есть специальная команда, разрабатывающая бесплатные виджеты встреч и календарей с открытым исходным кодом, наш репозиторий GitHub. По вопросам и проблемам не стесняйтесь обращаться к нам.
