Using it with React, Vue etc.

Booking.js is a framework agnostic UI library that's written in ES5 with few dependencies. This means that it can be integrated into a wide range of frontend environments.

🚧

jQuery is a dependency

The only dependency you need to explicitly import yourself is jQuery. The reason is that we depend on a library called FullCalendar for the calendar UI that requires jQuery.

Using it in React

React is a very popular UI library/framework by Facebook that is widely used across browsers for SPA's.

See this JSFiddle snippet for a minimal React example.

Please note that booking.js has not been tested in a SSR setup, nor with React Native, but it technically should work.

The calendar needs to attach to an existing node, or in other words to an HTML element. Because of the way FullCalendar works (a calendar library that booking.js depends on), the DOM node where booking.js is mounted (#bookingjs by default) needs to be visible to render correctly. This means that you cannot mount it a virtual DOM node and insert it afterwards - it need to attach to a real node in the DOM upon initialization.

Using it in Vue.js

Vue is another popular UI library/framework that focuses on progressive adoption and can be used for both SPA's and drop-in enhancement.

See this JSFiddle snippet for a minimal Vue example.

Please note that booking.js has not been tested in a SSR setup, nor with any mobile platforms (e.g. NativeScript Vue), but it technically should work.