In this tutorial, we’ll show you how to add event calendars to your WordPress website using Elementor and FooEvents. The calendars will display multiple events that are displayed in various tabs using different display modes.
Step 1: Install Elementor and FooEvents Calendar plugins
Login to your WordPress admin dashboard and navigate to Plugins > Add New. Then search for Elementor and install the Elementor Website Builder plugin.
Next, search for FooEvents and install the Events Calendar for FooEvents 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 FooEvents Calendar 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.
The second and more sophisticated option is to use the FooEvents for WooCommerce plugin and extensions to add event and ticketing functionality to your WooCommerce products. FooEvents for WooCommerce makes it possible to sell unlimited tickets directly from your website as well as manage check-ins using the free FooEvents Check-ins apps. The FooEvents Bookings plugin can also be used to sell access to bookable time slots which will be illustrated later in this tutorial.
Once you have set up a few test events, please proceed to the next step.
Step 2: Create a new page
Create a new page and set the page title. Then head over to the Elementor page builder by pressing the Edit with Elementor button.
Step 3: Add the Elementor Tabs Element
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.
Step 4: Add a Calendar for All Events
Modify the first tab and change the title to ‘All’, before adding the FooEvents Calendar shortcode to the content section of the tab.
When adding multiple calendars to a page, it’s important to specify a unique ID for each calendar (e.g id=”1″). You can then preview the calendar, which will display all events taking place in the current month.
Step 5: Add a Calendar for Specific Event Categories
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 ‘Conferences’.
[fooevents_calendar id=”2″ include_cat=”activities”]
Step 6: Add Calendars for Specific Time Periods
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.
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.
[fooevents_calendar id=”3″ defaultview=”listDay”]
Step 7: Add a Calendar for Specific Repeat Events
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.
That’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 calendar shortcodes help doc.