JavaScript Booking Calendar

I created an easy to use and heavily customizable booking calendar.

https://github.com/svschannak/js-booking-calendar

For a new fun side project (more infos coming soon…) i needed a framework-independent way to display the booking schedule for properties. It was important that it gives you a quick overview of all bookings and that it is possible to directly edit and create bookings in the overview.

And because i am working with no JS framework (the project is actually based on Livewire and Laravel — so AlpineJS is included by default but not really used by me) i needed a solution that was easy to integrate into a vanilla js project.

But, unfortunately, i could not find anything that suits what i needed. So i forked a project that was pretty close to the things i needed, but had a different purpose originally. I took the great work from [frappe] and started with their gantt chart project.

New features

The first feature was to make it possible to add multiple tasks in one row (one row = one property). I also added a option to define specify a start and end date that is displayed.

The progress bar in a task was also something that i don’t really needed and just lead to some bugs, so i removed the feature. Because there should also be a way to control the data in the calendar from the outside i needed a way to deactivate the animations or everything would always reanimate after every outside change.

As the last feature it was also important that it is possible to add a booking on the property row if you click on a free column for a property. This is possible with the function on_date_added which gives you the date and the property you clicked on, so you can add a new date from the outside. (Unfortunately the architecture of the base script made it really hard to let the calendar add data to itself, so it had to be done by a change from the outside).

This lead to some other problems, that were needed to be fixed. For example it is possible to scroll on the x-axis of the calendar to dates in the future. And if you change or add some booking data that is not in the initial viewport, the added data will lead to a re-render, which will set the viewport to the start again and not show the point where the user added/updated the date.

The fast solution for this problem: The callback functions for on_date_change and on_date_added also give the last position on the x-axis. This position can be added as an option to the constructor of the calendar as init_scroll_position.

In the end, the calendar is now completely controllable from the outside.

There are some other features that i want to add in the future, but for now it works pretty well.

You can get the calendar and use it however you like at https://github.com/svschannak/js-booking-calendar