{"id":132951,"date":"2022-02-22T17:02:25","date_gmt":"2022-02-23T00:02:25","guid":{"rendered":"https:\/\/help.fooevents.com\/docs\/frequently-asked-questions\/events\/how-do-i-add-a-calendar-date-picker-to-my-bookable-event\/"},"modified":"2022-10-27T14:16:33","modified_gmt":"2022-10-27T20:16:33","slug":"jak-pridam-do-udalosti-kterou-lze-rezervovat-nastroj-pro-vyber-data-v-kalendari","status":"publish","type":"docs","link":"https:\/\/help.fooevents.com\/cs\/docs\/frequently-asked-questions\/events\/how-do-i-add-a-calendar-date-picker-to-my-bookable-event\/","title":{"rendered":"Jak p\u0159id\u00e1m do ud\u00e1losti, kterou lze rezervovat, n\u00e1stroj pro v\u00fdb\u011br data v kalend\u00e1\u0159i?"},"content":{"rendered":"

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<\/a> is an example of an event which works in this way.<\/p>\n

Here are the instructions for how to set this up:<\/p>\n

Method 1<\/strong><\/p>\n

    \n
  1. Navigate to Products<\/b><\/li>\n
  2. Edit your event<\/li>\n
  3. Add the following shortcode to your event’s “Product short description” field:\n
    [fooevents_calendar post=\"123\"]\r\n<\/pre>\n
    Note: remember to change “123” to the specific event’s post ID.<\/li>\n
  4. Publish or update your event<\/li>\n<\/ol>\n
    Method 2<\/strong><\/p>\n
      \n
    1. Navigate to Products<\/b> > Categories<\/b><\/li>\n
    2. Create a unique “Product Category” for the event where you would like a calendar date picker to display<\/li>\n
    3. Navigate to this “Bookable” or other type of event<\/li>\n
    4. Map the event to the category that you created in Step 2<\/li>\n
    5. Add the following shortcode to your event’s “Product short description” field:\n
      [fooevents_calendar include_cat=\"event-category\"]\r\n<\/pre>\n
      Note: “event-category” is the slug of the category that you created in Step 2. Please have a look at the Calendar Shortcodes page<\/a> 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.<\/li>\n
    6. Publish or update your event<\/li>\n<\/ol>\n
      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.<\/p>\n","protected":false},"featured_media":0,"parent":158,"menu_order":11,"comment_status":"open","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_tag":[439,376,336,438,375,377],"class_list":["post-132951","docs","type-docs","status-publish","hentry","doc_tag-bookable","doc_tag-booking","doc_tag-calendar","doc_tag-date-picker","doc_tag-fooevents-bookings","doc_tag-slot"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/help.fooevents.com\/cs\/wp-json\/wp\/v2\/docs\/132951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.fooevents.com\/cs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.fooevents.com\/cs\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/help.fooevents.com\/cs\/wp-json\/wp\/v2\/comments?post=132951"}],"version-history":[{"count":0,"href":"https:\/\/help.fooevents.com\/cs\/wp-json\/wp\/v2\/docs\/132951\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/help.fooevents.com\/cs\/wp-json\/wp\/v2\/docs\/158"}],"next":[{"title":"Pro\u010d se m\u016fj kalend\u00e1\u0159 zobrazuje spr\u00e1vn\u011b v aplikaci Elementor, ale na m\u00e9m webu se rozbije?","link":"https:\/\/help.fooevents.com\/cs\/docs\/frequently-asked-questions\/events\/why-does-my-calendar-display-correctly-in-elementor-but-breaks-on-my-site\/","href":"https:\/\/help.fooevents.com\/cs\/wp-json\/wp\/v2\/docs\/133344"}],"prev":[{"title":"Jak omez\u00edm p\u0159\u00edstup k obsahu webu pro ka\u017edou ud\u00e1lost?","link":"https:\/\/help.fooevents.com\/cs\/docs\/frequently-asked-questions\/events\/how-do-i-restrict-access-to-website-content-for-each-event\/","href":"https:\/\/help.fooevents.com\/cs\/wp-json\/wp\/v2\/docs\/2678"}],"wp:attachment":[{"href":"https:\/\/help.fooevents.com\/cs\/wp-json\/wp\/v2\/media?parent=132951"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.fooevents.com\/cs\/wp-json\/wp\/v2\/doc_tag?post=132951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}