Lightweight Yearly Booking Calendar In JavaScript – Booking Calendars

Booking Calendars is a tiny JavaScript library for displaying reservation calendars on your site or web app. Useful for businesses that rely on online reservations, such as hotels, restaurants, or event venues.

The JavaScript library generates a full-year calendar to display booked dates or reservation availability on the page. This allows your customers to easily identify availability and make informed decisions.

How to use t:

1. Download the package and include the Booking_Calendars.min.js and Booking_Calendars.min.css files from the dist folder in your project.

<link rel="stylesheet" href="Booking_Calendars.min.css">
<script src="Booking_Calendars.min.js"></script>

2. Create a container element in your HTML where the calendar will be displayed:

<div id="Booking_Calendars_Container"></div>

3. Define an array in JavaScript to specify the booked dates:

const bookedDates = [
  { date_start: '2024-05-01', date_end: '2024-05-08' },
  { date_start: '2024-06-01', date_end: '2024-06-05' },
  { date_start: '2024-07-15', date_end: '2024-07-23' },
  // ...
];

4. Initialize the Booking Calendars on the container element and pass the desired options. You can set the month and day names, specify a date range, set the year, and include your bookedDates array.

Booking_calendars(document.getElementById('Booking_Calendars_Container'), {
  names_months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  names_days: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
  months_range: [5,7] // false = the whole year
  year: '2024',
  booked_dates: bookedDates, 
});

Changelog:

v3.0.0 (05/13/2024)

• Update