How do I add a calendar date picker to my “Bookable” event?

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:

Method 1

1. Navigate to Products
2. Edit your event
3. Add the following shortcode to your event’s “Product short description” field:

   [fooevents_calendar post="123"]
   

   Note: remember to change “123” to the specific event’s post ID.

4. Publish or update your event

Method 2

1. Navigate to Products > Categories
2. Create a unique “Product Category” for the event where you would like a calendar date picker to display
3. Navigate to this “Bookable” or other type of event
4. Map the event to the category that you created in Step 2
5. Add the following shortcode to your event’s “Product short description” field:

   [fooevents_calendar include_cat="event-category"]
   

   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.

6. 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.