Using the WP Booking Calendar plugin you can insert a calendar in each property page from where your customers can check the availability of the property. This functionality is available with the free version of WP Booking Calendar.
Install WP Booking Calendar
In WordPress, you can install plugins directly from the admin area.
- On your left sidebar navigate to Plugins > Add new
- Search for WP Booking Calendar
- Click on Install Now
Once you installed the plugin, click on Activate.
Add The Houzez Style To WP Booking Calendar
We pre-configured a CSS file that needs to be added to WP Booking Calendar. Let’s see how to.
- Find the main folder you downloaded from ThemeForest. Inside the folder, you will find a folder called “3. Houzez Calendar Skin“
- Inside the folder 3. Houzez Calendar Skin find the houzez.css file
- Via FTP upload the houzez.css file into wp-content > plugins > booking > css > skins
Important: Please note, if you will make an upgrade of the plugin to the new update, all plugin files is overwriting. It means that your custom calendar skin also will be overwriting. That’s why please backup your custom calendar skin before the update and then restore it after update process.
Since new update 5.4 you do not need to backup/restore your custom calendar skins anymore. Just put your custom calendar skin to the special folder. Please save your own custom calendar skin to the /wp-content/uploads/wpbc_skins/ folder. You need to create this folder /wpbc_skins/ inside of your /wp-content/uploads/ folder, because this folder has not created automatically. Its will save your custom calendar skin, if you will make upgrade of plugin to new plugin update.
Once you have your file houzez.css on the right place, on your left sidebar navigate to Booking > Settings, select Houzez at the general booking settings page and save settings.
WP Booking Calendar Settings
To know more about WP Booking Calendar option and available settings please check the plugin documentation at this page.
Add WP Booking Calendar To a Property
Step 1 – To add the calendar on a property detail page, be sure that you have enabled it. To check if the calendar is enabled, navigate to Theme options > Property Details Page > Layout Manager and drag the Availability Calendar module in the Enabled column. Find more information about Property Layout Manager.
Step 2 – Once your Availability Calendar module is enabled, edit or create a new property. Click the Insert Booking Calendar button on your text editor as displayed in the image below.
By clicking on Insert Booking Calendar, it will open the dialog box you see here below.
- Select the Calendar tab
- Setup how many Visible Months you wish to display
- Select the Start Month of the calendar
- Copy the calendar shortcode you see at the bottom. In this case [bookingcalendar nummonths=2]
- Click on Close
Step 3 – On the same page, scroll to the bottom and find the Rental Details tab. Paste the calendar shortcode [bookingcalendar nummonths=2] in there.