In WordPress, a shortcode is a small piece of code that allows you to add dynamic content to your pages, posts, and widgets. Shortcodes are represented by square brackets [ ] and are used to embed various types of content such as images, audio, video, forms, and more.
If you’re using FooEvents to manage your events and bookings, you may want to display events as a calendar on your website (see demo). This is easily achieved using the FooEvents Calendar plugin and shortcodes. In this post, we will use the FooEvents Calendar shortcodes to quickly embed WordPress event calendars on posts and pages. These shortcodes can also be used to display calendars using most page builders such as the built-in WordPress Blocks, Elementor, Beaver Builder and Divi.
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 will then add a basic event settings form to the bottom of the page, where you can set the date and time of the event.
The second and more sophisticated option is to use the FooEvents for WooCommerce plugin and extensions to add event, booking and ticketing functionality to your WooCommerce products.
To illustrate how various events will display in the calendar, I have setup the following three events using FooEvents:
- Single-day Conference that takes place on April 28, 2023 from 9 am to 5 pm
- Multi-day Conference that takes place on April 14-16, 2023 from 9 am to 5 pm (see the FooEvents Multi-day plugin)
- Bookable service or event that takes place on various days during April 2023 on three different time slots (see the FooEvents Booking plugin)
Pssst: If you are new to FooEvents and would like to take a look under the hood, request access to an admin demo environment where you can test out all the latest FooEvents plugins from the WordPress dashboard.
Next, I created a new WordPress page (or post) and add a shortcode block with the following shortcode:
After publishing the page, the following calendar will display on the front-end.
Customizing the Event Calendar
Now that we have embedded the calendar, we can customize it based on our preferences and requirements. This is achieved by adding various properties to the shortcode.
Change calendar start day
Set the calendar columns to start on a Monday or Sunday.
[fooevents_calendar firstDay="0"] 0 = Sunday, 1 = Monday etc.
Display particular month
Set the default date the calendar must display when first loading. This is useful if your event only starts at a later date.
[fooevents_calendar defaultDate= "2023-09-01"]
Filter by category
Create calendars for different groups of events. This is only applicable to WooCommerce events. Simply tag the relevant events to a WooCommerce category and specify the category slug using the include_cat property.
Specify number of events to display
Limit the number of events to display on the calendar. By default, all events taking place within the month will display.
Display multiple calendars per page
You can embed multiple calendars per page. To do so, simply ensure that each shortcode specifies an unique calendar ID.
[fooevents_calendar id="cal1"], [fooevents_calendar id="cal2"] etc.
Set the time format
Customize the time format using the supported FullCalendar date formats: https://fullcalendar.io/docs/v1/formatDate
The FooEvents calendar includes various display modes and can be set using the defaultView property.
Display list view (day)
Display list view (week)
Display list view (month)
Display list view (year)
Show specific events
Show multiple events by specifying the ID of the product, post or page. You can display a single event, or multiple events by entering a comma-separated list of ID’s.
You can modify the theme used by your calendar globally by setting the Calendar theme option in the main FooEvents Settings.
- Go to your WordPress admin dashboard > FooEvents Settings
- Click on the Calendar tab
- Select a Calendar theme option (Default, Light, Flat, Minimalist or Dark)
- Save your changes!
WordPress page builders are plugins that allow users to create and design custom layouts for their WordPress pages and posts without any coding or programming knowledge. Since shortcodes are standard WordPress functionality, most WordPress page builders support shortcodes. The following example illustrates how to use Elementor to output the FooEvent Calendar shortcode.
Visit the FooEvents help center Shortcode Guide for a full list of shortcodes and widgets offered by FooEvents.