How To Use Shortcodes To Embed Event Calendars On Your WordPress Site

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:

[fooevents_calendar]

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.

[fooevents_calendar include_cat="featured"]

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.

[fooevents_calendar num=10]

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

[fooevents_calendar timeFormat="H.mm"]

Hide weekends

[fooevents_calendar weekends="false"]

Display modes

The FooEvents calendar includes various display modes and can be set using the defaultView property.

Display list view (day)

[fooevents_calendar defaultView="listDay"]

Display list view (week)

[fooevents_calendar defaultView="listWeek"]

Display list view (month)

[fooevents_calendar defaultView="listMonth"]

Display list view (year)

[fooevents_calendar defaultView="listYear"]

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.

[fooevents_calendar post="123,456"]

Calendar colors

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!

Page builders

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.