Allow your visitors and clients to easily and quickly schedule appointments on your website with Spurwing's free embeddable widgets like this one:
The Calendar UI itself is provided by pg-calendar and is quite mobile friendly. The HTML code to display the calendar, found under
index.html, is just 4 lines of code:
<div id="disabled-range" class="article"> <div class="disabled-range-calendar"></div> <div class="box">loading ...</div> </div>
js/demo.js. Here's a high level overview of the flow:
- provide Spurwing API details.
- on page ready ➜ init_calendar()
- init_calendar: loads available days based on your Spurwing account and limits the booking range to 2 months (
onSelectHandler(date)function is called whenever a day is selected. It also displays the available slots and submission form.
- finally a click event function is implemented for the submit button.
The full code for this scheduling widget is available here.
The beautiful thing is that you can build or customize your own appointment scheduling widget in under 100 lines of code, without using complex frameworks like React/Vue/Angular unless it fits your project's scope.
At Spurwing we have a dedicated team developing free and open-source appointments and calendar widgets, our GitHub repository. For issues and questions feel free to reach out to us.