{"id":182,"date":"2016-09-12T21:37:08","date_gmt":"2016-09-12T19:37:08","guid":{"rendered":"https:\/\/booking-activities.fr\/fr\/docs\/documentation-utilisateur\/utilisation-avancee-de-booking-activities\/edit-calendars-display\/"},"modified":"2024-01-24T16:49:48","modified_gmt":"2024-01-24T15:49:48","slug":"set-up-calendars-display","status":"publish","type":"docs","link":"https:\/\/booking-activities.fr\/en\/docs\/user-documentation\/get-started-with-display-pack-add-on\/set-up-calendars-display\/","title":{"rendered":"Set up calendars display"},"content":{"rendered":"<p>You can configure the booking method and the calendar appearence of each booking form, in their &#8220;Calendar&#8221; field settings:<\/p>\n<ul>\n<li>Go to Booking Activities > Booking forms > <em>your form<\/em>\n<li>Go to the &#8220;Calendar&#8221; field settings\n<\/ul>\n<h2>Display tab<\/h2>\n<ul>\n<li><strong>Booking method<\/strong>: Choose how to display the events\n<ul>\n<li><strong>Calendar<\/strong>: Display the events on a <a href=\"https:\/\/fullcalendar.io\/\" rel=\"noopener noreferrer\" target=\"_blank\">FullCalendar<\/a> calendar (default)\n<li><strong>Waterfall<\/strong>: Display a <a href=\"https:\/\/jqueryui.com\/\" rel=\"noopener noreferrer\" target=\"_blank\">jQuery UI<\/a> datepicker and an event selectbox instead of the default calendar\n\t<\/ul>\n<li><strong>Datepicker display<\/strong>\n<ul>\n<li><strong>Popup<\/strong>: The customer must click on the field to display the datepicker (default)\n<li><strong>Inline<\/strong>: The datepicker will be directly displayed\n\t<\/ul>\n<li><strong>Hide event selectbox<\/strong>\n<ul>\n<li><strong>Never<\/strong>: Always ask customer to select date AND event (default)\n<li><strong>When only one event is available<\/strong>: The customer will only have to select the date (the event will be automatically selected)\n\t<\/ul>\n<li><strong>Days to hide<\/strong>: Check the days you want to hide. No events will be displayed on those days.\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>Calendar tab<\/h2>\n<p>You need to click on &#8220;<span style=\"color:#52b7e9;text-decoration:underline;\">Show advanced options<\/span>&#8221; to display all the available options.<\/p>\n<h3>Height<\/h3>\n<ul>\n<li><strong>Height<\/strong>: You can set a fixed height in pixel for your whole calendar (including\u00a0header) or leave it blank to use aspect ratio. Set it to &#8216;<strong>auto<\/strong>&#8216; to adjust its size automatically (default and recommended)\n<li><strong>Content Height<\/strong>: Same as Height, but it affect the calendar&#8217;s height only (whithout header)\n<li><strong>Aspect Ratio<\/strong>: Width to Height ratio. If height and content height are empty, the aspect ratio is applied\n<li><strong>Handle windows resize<\/strong>: your calendar size should adapt to window&#8217;s size? The calendar height must be set by aspect ratio for this to work.\n<\/ul>\n<h3>Views<\/h3>\n<ul>\n<li><strong>Initial view<\/strong>: The calendar can be loaded on a specific view according to its width (<a href=\"https:\/\/booking-activities.fr\/en\/blog\/display-pack-1-3-responsive-views\/\" target=\"_blank\" rel=\"noopener noreferrer\">learn more<\/a>)\n<li><strong>Available views<\/strong>:\u00a0Users will be able to switch between the views you pick here\n<li><strong>Flexible views duration<\/strong>: Set the &#8220;Flexible&#8221; views duration in days\n<ul>\n<li><em><strong>Warning:<\/strong> Hidden days will be omitted<\/em>\n\t<\/ul>\n<li><strong>Multiple Months views duration<\/strong>: Set the &#8220;Multiple Months&#8221; views duration in months\n<li><strong>Link Dates<\/strong>: Clicking on a date will take you to the related day view\n<\/ul>\n<h3>Time Grid and Day Grid views<\/h3>\n<p><em>These settings applies to &#8220;Time Grid&#8221; and &#8220;Day Grid&#8221; views only.<\/em><\/p>\n<ul>\n<li><strong>Week number<\/strong>: Whether to display the week number\n<li><strong>Now indicator<\/strong>: Display a marker on calendar indicating current time\n<li><strong>Events overlap<\/strong>: Whether to allow events to\u00a0visually overlap when they are on the same schedule\n<\/ul>\n<h3>Time Grid views<\/h3>\n<p><em>These settings applies to &#8220;Time Grid&#8221; views only.<\/em><\/p>\n<ul>\n<li><strong>Timeslot frequency<\/strong>: Show a timeslot on the left of calendars every X minutes\n<li><strong>Scroll time<\/strong>: If the calendar&#8217;s height is limited a scrollbar appears. You can set the initial scroll with this option\n<\/ul>\n<h3>Day Grid views<\/h3>\n<p><em>These settings applies to &#8220;Day Grid&#8221; views only.<\/em><\/p>\n<ul>\n<li><strong>Event limit<\/strong>: The max number of event to show in Day Grid views. Beyond this limit, a &#8220;View more&#8221; link will be displayed\n<li><strong>Event limit click<\/strong>: Action to perform when users click on the &#8220;View more&#8221; link\n<ul>\n<li><strong>Popup<\/strong>:\u00a0Display a small dialog with the\u00a0full list of events (default)\n<li><strong>Week<\/strong>: Go to the corresponding week view\n<li><strong>Day<\/strong>: Go to the corresponding day view\n\t<\/ul>\n<li><strong>Show prev. \/ next months events.<\/strong>: Whether to render events of previous and next months in &#8220;Day Grid &#8211; Month&#8221; view\n<\/ul>\n<p><\/p>","protected":false},"featured_media":0,"parent":617,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_is_vendor_doc":"0","footnotes":""},"doc_tag":[],"class_list":["post-182","docs","type-docs","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Set up calendars display - Booking Activities<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/parametrer-affichage-des-plannings\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Set up calendars display - Booking Activities\" \/>\n<meta property=\"og:description\" content=\"You can configure the booking method and the calendar appearence of each booking form, in their &#8220;Calendar&#8221; field settings: Go to Booking Activities &gt; Booking forms &gt; your form Go ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/parametrer-affichage-des-plannings\/\" \/>\n<meta property=\"og:site_name\" content=\"Booking Activities\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-24T15:49:48+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/parametrer-affichage-des-plannings\\\/\",\"url\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/parametrer-affichage-des-plannings\\\/\",\"name\":\"Set up calendars display - Booking Activities\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/#website\"},\"datePublished\":\"2016-09-12T19:37:08+00:00\",\"dateModified\":\"2024-01-24T15:49:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/parametrer-affichage-des-plannings\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[[\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/parametrer-affichage-des-plannings\\\/\"]]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/parametrer-affichage-des-plannings\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documentation utilisateur\",\"item\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Display Pack\",\"item\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/docs\\\/documentation-utilisateur\\\/demarrer-avec-le-module-display-pack\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Param\u00e9trer l&#8217;affichage des calendriers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/\",\"name\":\"Booking Activities\",\"description\":\"Booking plugin for Wordpress websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/#organization\",\"name\":\"Booking Activities\",\"url\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/booking-activities.fr\\\/wp-content\\\/uploads\\\/Logo_Booking_Activities_light_bg.png\",\"contentUrl\":\"https:\\\/\\\/booking-activities.fr\\\/wp-content\\\/uploads\\\/Logo_Booking_Activities_light_bg.png\",\"width\":512,\"height\":83,\"caption\":\"Booking Activities\"},\"image\":{\"@id\":\"https:\\\/\\\/booking-activities.fr\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Set up calendars display - Booking Activities","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/parametrer-affichage-des-plannings\/","og_locale":"en_US","og_type":"article","og_title":"Set up calendars display - Booking Activities","og_description":"You can configure the booking method and the calendar appearence of each booking form, in their &#8220;Calendar&#8221; field settings: Go to Booking Activities > Booking forms > your form Go ...","og_url":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/parametrer-affichage-des-plannings\/","og_site_name":"Booking Activities","article_modified_time":"2024-01-24T15:49:48+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/parametrer-affichage-des-plannings\/","url":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/parametrer-affichage-des-plannings\/","name":"Set up calendars display - Booking Activities","isPartOf":{"@id":"https:\/\/booking-activities.fr\/en\/#website"},"datePublished":"2016-09-12T19:37:08+00:00","dateModified":"2024-01-24T15:49:48+00:00","breadcrumb":{"@id":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/parametrer-affichage-des-plannings\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":[["https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/parametrer-affichage-des-plannings\/"]]}]},{"@type":"BreadcrumbList","@id":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/parametrer-affichage-des-plannings\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/booking-activities.fr\/en\/"},{"@type":"ListItem","position":2,"name":"Documentation utilisateur","item":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/"},{"@type":"ListItem","position":3,"name":"Display Pack","item":"https:\/\/booking-activities.fr\/en\/docs\/documentation-utilisateur\/demarrer-avec-le-module-display-pack\/"},{"@type":"ListItem","position":4,"name":"Param\u00e9trer l&#8217;affichage des calendriers"}]},{"@type":"WebSite","@id":"https:\/\/booking-activities.fr\/en\/#website","url":"https:\/\/booking-activities.fr\/en\/","name":"Booking Activities","description":"Booking plugin for Wordpress websites","publisher":{"@id":"https:\/\/booking-activities.fr\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/booking-activities.fr\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/booking-activities.fr\/en\/#organization","name":"Booking Activities","url":"https:\/\/booking-activities.fr\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/booking-activities.fr\/en\/#\/schema\/logo\/image\/","url":"https:\/\/booking-activities.fr\/wp-content\/uploads\/Logo_Booking_Activities_light_bg.png","contentUrl":"https:\/\/booking-activities.fr\/wp-content\/uploads\/Logo_Booking_Activities_light_bg.png","width":512,"height":83,"caption":"Booking Activities"},"image":{"@id":"https:\/\/booking-activities.fr\/en\/#\/schema\/logo\/image\/"}}]}},"comment_count":0,"_links":{"self":[{"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/docs\/182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/comments?post=182"}],"version-history":[{"count":5,"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/docs\/182\/revisions"}],"predecessor-version":[{"id":33739,"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/docs\/182\/revisions\/33739"}],"up":[{"embeddable":true,"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/docs\/617"}],"next":[{"title":"[:fr]Afficher les participants \u00e0 un \u00e9v\u00e8nement sur le frontend[:en]Display the event participants on the frontend[:]","link":"https:\/\/booking-activities.fr\/en\/docs\/user-documentation\/get-started-with-display-pack-add-on\/display-the-event-participants-on-the-frontend\/","href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/docs\/10616"}],"prev":[{"title":"[:fr]Pr\u00e9requis, Installation et Activation de la Licence du module Display Pack[:en]Prerequisite, Installation and License Activation of Display Pack add-on[:]","link":"https:\/\/booking-activities.fr\/en\/docs\/user-documentation\/get-started-with-display-pack-add-on\/prerequisite-installation-license-activation-of-display-pack-add-on\/","href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/docs\/626"}],"wp:attachment":[{"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/media?parent=182"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/booking-activities.fr\/en\/wp-json\/wp\/v2\/doc_tag?post=182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}