It’s possible to add a calendar grid to a “Bookable” event whereby clicking a specific slot will automatically select the correct slots in the date and time drop-down lists when the page reloads. The Drive-in Cinema demo is an example of an event which works in this way.
Here are the instructions for how to set this up:
- Navigate to Products > Categories
- Create a unique “Product Category” for the event where you would like a calendar date picker to display
- Navigate to this “Bookable” or other type of event
- Map the event to the category that you created in Step 2
- Add the following shortcode to your event’s “Product short description” field:
Note: “event-category” is the slug of the category that you created in Step 2. Please have a look at the Calendar Shortcodes page for examples of additional attributes that you can use e.g. you can add “defaultDate” if you would like the calendar to start on a specific month.
- Publish or update your event
This will display a calendar grid on your event page which allows the attendee to click on a booking slot, after which that date will automatically be selected in the booking drop-down list.