Booking Calendar: What Is It and How to Expand Its Functionality?

If I have the availability calendar, why would I use the booking calendar? Let’s compare these two elements to understand which should be used for what cases. 

The availability calendar is a simple WordPress booking calendar option for sites that serves as a visual interface for easy checking availability. A simple booking calendar for WordPress is ideal for small businesses that only need to display availability. Usually, it uses colors to distinguish between available and booked dates for intuitive understanding. The availability calendar is generally used to display the service’s availability without allowing bookings or purchases. 

The biggest advantage of the availability calendar is its ease of use for customers. The most logical place for the availability calendar is a single service page, so the site user can see when the required service is available straightaway. 

Additionally, the availability calendar can be synchronized with iCal or Google Calendar in a “read-only” status. 

As you can see, the booking calendar offers more functionality than the availability calendar. The booking calendar is integrated into the booking form, allowing customers to select their desired dates and proceed with the booking. 

Often, it provides two-way synchronization: available dates become blocked promptly after being booked. Additionally, the booking calendar can be integrated with custom meta fields, making the calendar more interactive and user-friendly. 

The booking calendar is also clear for customers. The available dates are usually highlighted. 

The booking calendar can serve multiple purposes on a WordPress site, depending on the type of business. For individual instructors or freelancers, a simple booking calendar WordPress setup can be an elegant way to showcase availability without extra complexity. Let’s have a look at the following examples: 

1. Hotel rooms or apartment reservations — the booking calendar enables property availability management, synchronization with Google Calendar, Airbnb, and Booking.com via iCal, and support for various check-in/check-out rules, seasonal pricing, and additional services.
2. Vehicle or equipment reservations — display available vehicles or tools by day, set minimum/maximum rental periods, and synchronize with external calendars.
3. Events and classes — display available dates for workshops and classes using a WordPress event calendar plugin, allowing users to register directly from the calendar.
4. Campgrounds or meeting rooms — manage availability per location or per unit, using post relations to connect listings to calendars.
5. Tours — display available tour dates and additional services. Allow tour bookings to be submitted promptly via the form and synchronize the calendar with Google Calendar, Airbnb, or Booking.com. 

Even this short list demonstrates that the booking calendar can be tailored to suit almost any business type and reservation scenario. The key is how flexibly the plugin handles Custom Post Types, meta fields, and calendar synchronization — all of which are core strengths of JetBooking, a calendar plugin for WordPress.

iCal, or iCalendar, is a versatile file format for exchanging calendar data. Usually, it is a read-only text file with the .ics extension. This file type is compatible with any modern calendar, including Google Calendar, Outlook, Apple Calendar, and others. 

Synchronization is the process of exchanging data between two calendars. It can be divided into two types: 

• “Pull” synchronization or import means that the calendar on my site obtains data from an external calendar. For instance, I’ve already added events to my Google Calendar, and I’d like to import them into JetBooking’s Booking Calendar. For that, I’d need the URL iCal feed (the link to the .ics file), which JetBooking reads automatically.
• “Push” synchronization or export is the opposite process: the data from my site is sent to the external calendar. So, whether it’s Google Calendar, Apple Calendar, or any other calendar, it “signs” to the .ics file from my site. Each time the system is updated, new bookings are added to the external calendar.

Of course, there is a two-way synchronization — it’s a combination of both described types. So, my site imports bookings from the external calendar while simultaneously exporting data to it. 

💡 You may be wondering if there is any difference between the Google Calendar API and iCal. Let’s clarify it now. 

The Google Calendar API is an advanced way to exchange data between calendars, offering its own unique features. Compared to iCal, the Google Calendar API is more complicated, requiring a Google Cloud project, an API key, and OAuth. 

When the iCal feed is a public link to the .ics file, the Google Calendar API supports programmatic access through its API. Additionally, the Google Calendar API provides wider access to the data, allowing bookings to be created, updated, and deleted.

Another key aspect of the Google Calendar API is the speed of event updates: they are immediate. The iCal update can take up to 60 minutes.

Both synchronization types can be implemented through a WordPress plugin reservation calendar, such as JetBooking, which supports iCal and Google Calendar connections.

To sum up, the iCal feed works well for simple booking systems. The Google Calendar API is a better solution for complex applications or enterprise integrations. 

The JetBooking plugin works seamlessly with iCal feeds, supporting all three types of synchronization:

• Follow the How to Set Two-Way Booking and Google Calendar iCal Synchronization guide for a step-by-step setup.
• You can integrate your JetBooking calendar with Airbnb using this dedicated article on their website.
• You can also synchronize your WordPress booking calendar with Booking.com by following their guide.

As I mentioned earlier, the booking calendar covers both visual and functional purposes. At the same time, the booking calendar is within the form and cannot be seen until the date field is clicked. 

You can keep it like that, but if you need to show the calendar by itself, without clicking any buttons, you can add the Booking Availability Calendar widget alongside the JetFormBuilder’s form and connect them.

Thus, when the single service page is opened, the user can immediately see the available dates, select the desired ones, and they will be passed to the form where the reservation can be made. If your site doesn’t require advanced logic, a simple WordPress booking calendar layout can be embedded as a standalone block next to the booking form.

With the Booking Availability Calendar widget, you can easily customize the appearance of the calendar. The settings for inactive, today, and start and end dates are available in the Style tab of the widget. 

Of course, you can achieve that with custom CSS, but why reinvent the wheel when a ready-made solution already exists? 

A couple of settings help to make the calendar much easier to understand at first glance.  You can highlight the current date, mark unavailable dates in gray or red, and vice versa for available dates — so you are free to customize colors however you like.

Let’s go further and customize the calendar even more. Sure, you’ve seen the travel Google Calendars, where you can see the prices for each day while searching for travel paths. Let’s see how to achieve this on a WordPress site with the JetBooking plugin. 

First, navigate to the WordPress Dashboard > Bookings > Settings > Configuration, and enable the Show price in calendar toggle.

Thus, on the front end, we can see the prices for each day inside the Booking Availability Calendar. 

In case you need to change the currency shown in the calendar, add the following code to your site’s functions.php file or to the Code Snippets plugin or any similar plugin: 

add_filter( 'jet-booking/assets/config', function ( $locolized_data ) {
    $locolized_data['calendar_currency_sign'] = 'GBP';

    return $locolized_data;
} );

Instead of the “GBP,” use the needed currency.

Here is an example of the custom CSS I added to customize the calendar’s look. It should be added to Appearance > Customize > Additional CSS. You can change it according to your needs:

.jet-booking-calendar__container .date-picker-wrapper .month-wrapper {
    border: solid;
    border-width: 2px;
    border-color: #3498db;
    border-radius: 5px;
}

.select-wrapper {
    width: 70px;
    border: 2px solid #007BFF;
    border-radius: 5px;
    background-color: #F8F9FA;
    padding: 5px;
    padding-left: 1px;
    padding-right: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.select-wrapper select {
    width: 100%;
    border: none;
    background: none;
    font-size: 15px;
    color: #333;
    appearance: none;
    outline: none;
}

.select-wrapper:after {
    content: " ▼ ";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
    color: #333;
}