{"id":170652,"date":"2024-01-01T06:45:08","date_gmt":"2024-01-01T14:45:08","guid":{"rendered":"https:\/\/www.fooevents.com\/?p=170652"},"modified":"2024-08-29T03:42:30","modified_gmt":"2024-08-29T10:42:30","slug":"creer-des-calendriers-devenements-en-utilisant-elementor-et-fooevents","status":"publish","type":"post","link":"https:\/\/www.fooevents.com\/fr\/create-event-calendars-using-elementor-and-fooevents\/","title":{"rendered":"Cr\u00e9er un calendrier d'\u00e9v\u00e9nements Elementor en utilisant FooEvents (2024)"},"content":{"rendered":"<div class=\"ast-oembed-container \" style=\"height: 100%;\"><iframe title=\"How to create event calendars using Elementor and FooEvents\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/GNH1N6MrSxQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<p class=\"box-highlight\">In this tutorial, we&#8217;ll show you how to add an event calendar Elementor using FooEvents\u00a0in 2024. The calendars will display multiple events that are displayed in various tabs using different display modes.<\/p>\n<h3>Step 1: Install Elementor and FooEvents Calendar plugins<\/h3>\n<p>First you will need to make sure that you have the <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a> plugin installed. It can be found on <a href=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noopener\">wordpress.org<\/a> and installed directly from the plugins section on your website.<\/p>\n<p>Login to your WordPress admin dashboard and navigate to <strong>Plugins<\/strong> &gt; <strong>Add New<\/strong>. Then search for <strong>Elementor<\/strong> and install the\u00a0<strong>Elementor Website Builder<\/strong> plugin.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-170653 size-full\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-17-at-11.09.48.png\" alt=\"event calendar elementor\" width=\"557\" height=\"305\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-17-at-11.09.48.png 557w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-17-at-11.09.48-300x164.png 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-17-at-11.09.48-512x280.png 512w\" sizes=\"(max-width: 557px) 100vw, 557px\" \/><\/p>\n<p>Next, search for <strong>FooEvents<\/strong> and install the <a href=\"https:\/\/wordpress.org\/plugins\/fooevents-calendar\/\" target=\"_blank\" rel=\"noopener\"><strong>Events Calendar for FooEvents<\/strong><\/a> plugin. FooEvents provides two ways to create events on your WordPress site. The first option is to add event details to a standard WordPress post or page using the\u00a0<a title=\"FooEvents Event Calendar\" href=\"https:\/\/www.fooevents.com\/products\/fooevents-calendar\/\" target=\"_blank\" rel=\"noopener\">FooEvents Calendar<\/a> plugin. This is done when editing the post or page. The FooEvents Calendar plugin adds a basic event settings form to the bottom of the post, pages and custom post types. Using this form, you can set the date and time of the event. Once set, they will display in calendars generated by the FooEvents calendar plugin.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-170171\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-13.54.17-1.png\" alt=\"Screenshot of the FooEvents Calendar post and page event settings\" width=\"985\" height=\"885\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-13.54.17-1.png 985w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-13.54.17-1-300x270.png 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-13.54.17-1-768x690.png 768w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-05-at-13.54.17-1-512x460.png 512w\" sizes=\"(max-width: 985px) 100vw, 985px\" \/><\/p>\n<p>The second and more sophisticated option is to use the\u00a0<a title=\"FooEvents WooCommerce Tickets\" href=\"https:\/\/www.fooevents.com\/products\/fooevents-for-woocommerce\/\" target=\"_blank\" rel=\"noopener\">FooEvents for WooCommerce<\/a> plugin and extensions to add event and ticketing functionality to your WooCommerce products. <span style=\"font-size: 16px;\">FooEvents for WooCommerce makes it possible to sell unlimited tickets directly from your website as well as manage check-ins using the free <a href=\"https:\/\/www.fooevents.com\/features\/apps\/\">FooEvents Check-ins apps.<\/a> The <a href=\"https:\/\/www.fooevents.com\/products\/fooevents-bookings\/\">FooEvents Bookings<\/a> plugin can also be used to sell access to bookable time slots which will be illustrated later in this tutorial.<\/span><\/p>\n<p>Once you have set up a few test events, please proceed to the next step.<\/p>\n<h3>Step 2: Create a new page<\/h3>\n<p>Create a new page and set the page title. Then head over to the Elementor page builder by pressing the <strong>Edit with Elementor<\/strong>\u00a0button.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-170657\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-17-at-16.02.07.png\" alt=\"Screenshot show a page title being set\" width=\"677\" height=\"241\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-17-at-16.02.07.png 677w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-17-at-16.02.07-300x107.png 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-17-at-16.02.07-512x182.png 512w\" sizes=\"(max-width: 677px) 100vw, 677px\" \/><\/p>\n<h3>Step 3: Add the Elementor Tabs Element<\/h3>\n<p>Once the page loads, add a Tabs element to the main section of the page. By default, Elementor will create two sample tabs. Remove the second tab and expand the edit options of the first tab.<\/p>\n<h3>Step 4: Add a Elementor Event Calendar using FooEvents<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-170682 size-full\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.25.27.png\" alt=\"Screenshot of Elementor being used to add a calendar to the Tab element (Elementor Event Calendar)\" width=\"1506\" height=\"821\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.25.27.png 1506w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.25.27-300x164.png 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.25.27-1024x558.png 1024w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.25.27-768x419.png 768w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.25.27-512x279.png 512w\" sizes=\"(max-width: 1506px) 100vw, 1506px\" \/><\/p>\n<p>Modify the first tab and change the title to \u2018All\u2019, before adding the <a href=\"https:\/\/help.fooevents.com\/docs\/topics\/events\/shortcodes\" rel=\"nofollow noopener\" target=\"_blank\">FooEvents Calendar shortcode<\/a> to the content section of the tab.<\/p>\n<pre>[fooevents_calendar id=\"1\"]<\/pre>\n<p>When adding multiple calendars to a page, it\u2019s important to specify a unique ID for each calendar (e.g id=&#8221;1&#8243;). You can then preview the calendar, which will display all events taking place in the current month.<\/p>\n<h3>Step 5: Add a Calendar for Specific Event Categories<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-170683\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.26.11.png\" alt=\"Screenshot of Elementor being used to add a calendar to the Tab element that displays activities\" width=\"1506\" height=\"822\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.26.11.png 1506w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.26.11-300x164.png 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.26.11-1024x559.png 1024w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.26.11-768x419.png 768w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.26.11-512x279.png 512w\" sizes=\"(max-width: 1506px) 100vw, 1506px\" \/><\/p>\n<p>Next, duplicate the tab we just created and change the title to activities. This calendar then needs to display all events that are activities. When creating events using the FooEvents for WooCommerce plugin, you can organize the events using the WooCommerce categories feature. For this demo, we have added the Bus Tour tour to the activities category. Using the include_cat shortcode parameter, we can then filter the calendar to only show events that have been categorized as activities. We can also duplicate this process for events that have been categorized as \u2018Conferences\u2019.<\/p>\n<p>[fooevents_calendar id=&#8221;2&#8243; include_cat=&#8221;activities&#8221;]<\/p>\n<h3>Step 6: Add Calendars for Specific Time Periods<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-170684\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.27.07.png\" alt=\"Screenshot of Elementor being used to add a calendar to the Tab element that displays all events taking place in the current week\" width=\"1506\" height=\"819\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.27.07.png 1506w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.27.07-300x163.png 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.27.07-1024x557.png 1024w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.27.07-768x418.png 768w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.27.07-512x278.png 512w\" sizes=\"(max-width: 1506px) 100vw, 1506px\" \/><\/p>\n<p>Create a calendar that only displays events taking place on the current calendar day using the defaultview parameter with the value set as listday. You can also use this parameter in combination with other parameters such as the include_cat parameter if needed. Follow the same process and create a Week view tab where we specify the defaultview as listWeek. This view will then display all events that are taking place in the current week.<\/p>\n<p>Create a month view tab that displays all events taking place in the current calendar month using listMonth and the defaultdate parameter to specify which month to display. Create a tab to display all events taking place in the current year using the listYear value.<\/p>\n<p>[fooevents_calendar id=&#8221;3&#8243; defaultview=&#8221;listDay&#8221;]<\/p>\n<h3>Step 7: Add a Calendar for Specific Repeat Events<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-170685\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.39.51.png\" alt=\"Screenshot of Elementor being used to add a calendar to the Tab element that displays all occurrences of the Bus tour bookings\" width=\"1491\" height=\"843\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.39.51.png 1491w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.39.51-300x170.png 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.39.51-1024x579.png 1024w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.39.51-768x434.png 768w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-at-10.39.51-512x289.png 512w\" sizes=\"(max-width: 1491px) 100vw, 1491px\" \/><\/p>\n<p>Create a calendar for specific repeat events. For example, the Bus tour uses the FooEvents bookings plugin and repeats at various date and time slots. You can create a calendar that only displays these slots by specifying the ID of the product. All you will need to do is get the ID, create a tab called Bus Tour and set the ID of the product for the post parameter. The calendar will then only show bookings for this event.<\/p>\n<p>That&#8217;s it! You now know how to use FooEvents and Elementor to add event calendars to your website that display multiple events in various tabs using various display modes. Each of these calendars can be further filtered using a number of shortcode parameters. You can read more about these by visiting the FooEvents help center and navigating to the <a href=\"https:\/\/help.fooevents.com\/docs\/topics\/events\/shortcodes\" rel=\"nofollow noopener\" target=\"_blank\">calendar shortcodes help doc<\/a>.<\/p>\n<p>You might also be interested in this content from our partner <a title=\"FooSales WooCommerce POS\" href=\"https:\/\/www.foosales.com\/\" target=\"_blank\" rel=\"noopener\">FooSales WooCommerce POS<\/a>:<\/p>\n<ul>\n<li><a title=\"Free POS\" href=\"https:\/\/www.foosales.com\/10-reasons-why-a-free-pos-should-be-avoided\/\" target=\"_blank\" rel=\"noopener\">10 Reasons Why a Free POS Should be Avoided<\/a><\/li>\n<li><a title=\"WooCommerce vs Shopify\" href=\"https:\/\/www.foosales.com\/woocommerce-vs-shopify\/\" target=\"_blank\" rel=\"noopener\">WooCommerce vs Shopify: Which is the best e-commerce platform<\/a><\/li>\n<li><a title=\"Restaurant Ordering System\" href=\"https:\/\/www.foosales.com\/how-to-create-a-restaurant-ordering-system\/\" target=\"_blank\" rel=\"noopener\">How to create a restaurant ordering system for online and in-house orders<\/a><\/li>\n<li><a title=\"Can I use WooCommerce as a POS?\" href=\"https:\/\/www.foosales.com\/can-i-use-woocommerce-as-a-pos\/\" target=\"_blank\" rel=\"noopener\">Can I use WooCommerce as a POS?<\/a><\/li>\n<li><a title=\"WooCommerce Custom Order Status\" href=\"https:\/\/www.foosales.com\/top-5-woocommerce-custom-order-status-plugins-free-and-premium\/\" target=\"_blank\" rel=\"noopener\">Top 5 WooCommerce Custom Order Status Plugins<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we&#8217;ll show you how to add an event calendar Elementor using FooEvents\u00a0in 2024. The calendars will display multiple events that are displayed in various tabs using different display modes. Step 1: Install Elementor and FooEvents Calendar plugins First you will need to make sure that you have the Elementor plugin installed. It [&hellip;]<\/p>\n","protected":false},"author":1138,"featured_media":170689,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","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":""},"categories":[53,435,436],"tags":[105,358,465,73,61,403,387,62,76],"class_list":["post-170652","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-howto","category-marketing","category-updates","tag-check-ins","tag-elementor","tag-event-calendars","tag-events","tag-fooevents","tag-shortcode","tag-ticketing","tag-woocommerce","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/posts\/170652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/users\/1138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/comments?post=170652"}],"version-history":[{"count":0,"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/posts\/170652\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/media\/170689"}],"wp:attachment":[{"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/media?parent=170652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/categories?post=170652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fooevents.com\/fr\/wp-json\/wp\/v2\/tags?post=170652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}