linkedin

Frequently Asked Questions

⌘K
  1. Home
  2. /
  3. Docs
  4. /
  5. Frequently Asked Question...
  6. /
  7. Events
  8. /
  9. How do I add a calendar d...

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.

Tags , , , , ,