Adding a Calendar and a Form to a Page
By Add Calendar Button
Note: The Add Calendar button might not appear if you are using Gutenberg editor. To add a calendar to the post/page you can use the shortcode or the Gutenberg Module as described lower on this page.
You can add an existing calendar to any post or page by using the Add Calendar button from your WordPress WYSIWYG editor. The button is located next to the Add Media button.
Clicking the Add Calendar button will open a pop-up with all customizable settings for the calendar and the form. Make sure the selected tab at the top of the pop-up is Insert Calendar.
You can customize the following settings:
- Calendar – select the calendar you wish to be displayed in the page
- Display Calendar Title – select whether to display the calendar’s title or not
- Display Legend – select whether to display the calendar’s color legend or not
- Legend Position – select the position where the legend should be displayed in relation to the calendar
- Months To Display – select how many months you wish to appear
- Start Year – select the year from which you wish the calendar to start
- Start Month – select the month from which you wish the calendar to start
- Language – select the language of the calendar
- Week Starts Day – select the name of the day you wish your calendar to start from
- Display Selection Dropdown – select whether to display the calendar’s monthly selection dropdown
- Use Jump Switch – select whether to change the calendar by one month or by the number of months displayed
- Show History – select how to handle the display of past dates
- Display Tooltips – select whether to show the data you have added for each individual day as a tooltip when a user hovers over the calendar days in the page
- Highlight Today – whether to show the current day with a different color
- Show Week Numbers – select whether to display the numbers of each week in the calendar
- Form– select the form you wish to be displayed in the page
- Auto Accept Bookings – select whether to automatically mark the selected days as booked or not
- Selection Type – select the selection type, allows user to select multiple dates in the calendar or just a single date
- Selection Style – select the selection style, normal (full days are selected) or split (first and last day are selected as changeover days)
- Minimum Days – select the minimum number of days that can be booked
- Maximum Days – select the maximum number of days that can be booked
- Booking Start Day – select the day of the week the booking must start on
- Booking End Day – select the day of the week the booking must end on
By clicking the Insert Calendar button a shortcode will be added to the editor for you with all the information you have selected in the pop-up.
When this shortcode is inserted into your page or post (in the admin panel) it will generate the calendar with ID ‘1’ and form ID ‘1’ on the front-end, with all the above settings applied.
Here’s the meaning of every setting from the shortcode:
- id – (number) – the ID of the calendar, which can be found under WP Booking System > Calendars
- title – (yes/no) – show the calendar title (yes) or hide it (no)
- legend – (yes/no) – show the legend of the calendar (yes) or hide it (no)
- legend_position – (top/side/bottom) – the position of the legend in correlation with the calendar
- dropdown – (yes/no) – show the months dropdown (yes) or hide it (no)
- jump – (yes/no) – switch all months to new ones (yes) or switch 1 month at a time (no) when clicking on the [>] button
- history – (1/2/3) – show all booking history (1), replace history with the default legend item (2) or grey-out history (3)
- start – (1/2/3/4/5/6/7) – the start day of the week, monday (1), tuesday (2) …and so on… sunday (7)
- display – (1/2/3/…) – the number of months to show
- language – (auto/en/fr/etc.) – the language of the calendar, ‘auto’ will detect the language automatically
- month – (0/1/2/…/12) – the start month of the calendar, 0 means the current month, 1 means January, and so on
- year (0/2017/2018/…) – the start year of the calendar, 0 means the current year, 2017 means 2017, and so on
- tooltip – (1/2/3) – don’t show tooltips (1), show tooltips (2) or show tooltips with a red indicator (3)
- weeknumbers – (yes/no) – show week numbers (yes) or hide them (no)
- highlighttoday – (yes/no) – highlight the current day (yes) or not (no)
- form_id – (number) – the ID of the form, which can be found under WP Booking System > Forms
- auto_pending – (yes/no) – enable auto accept booking (yes) or don’t (no)
- selection_type – (multiple/single) – allow the user to select multiple dates in the calendar (multiple) or just one date (single)
- selection_style – (normal/split) – select entire days (normal) or mark the first and last date of the selection as changeover days (split)
- mimimum_days – (number) – the minimum number of days that must be booked
- maximum_days- (number) – the maximum number of days that must be booked
- booking_start_day- (0/1/2/../7) – (0) to disable this option, (1/2/…/7) for the day of the week, 1 for Monday, 2 for Tuesday, etc..
- booking_end_day- (0/1/2/../7) – (0) to disable this option, (1/2/…/7) for the day of the week, 1 for Monday, 2 for Tuesday, etc..
By Gutenberg Module
You can add an existing calendar to any post or page by clicking the + icon to add a new module, and click on the Single Calendar module in the WP Booking System tab.
After adding the module, the Please select a calendar to display. message will appear. Click on the module and the options should appear in the sidebar.
Select a Calendar and a Form, then configure the options as per the instructions above.
If you are using Elementor
Click here for instructions
Was this article helpful? Yes (6) No
We're sorry to see this article wasn't as helpful as we hoped it would be. Please let us know what you were looking for so that we can improve this documentation page.