3.3 Calendar Embed Shortcodes

Events Calendar Pro 4.3 introduced the ability to embed full calendar views in places other than the main calendar page. If you have a post or page on your site where shortcodes can be used, you can embed full calendar views there!

The shortcode that powers this functionality is [tribe_events]. In this article, we will cover the usage of this simple but powerful shortcode.

The Default Shortcode

Once you are running The Events Calendar 4.3 and Events Calendar Pro 4.3, you can add the shortcode [tribe_events] to any post or page on your site.

If you do not specify a view for this shortcode, then the calendar view that will display is the default calendar view from your wp-admin’s Events → Settings → Display options panel. On this settings panel, there is an option called Default view. If this is set to Month for example, then any instance of the [tribe_events] shortcode that does not specify some other view will show the Month-view calendar. If the Default view option is set to List, then any basic [tribe_events] shortcode would generate an instance of the List View, and so on.

Specifying Calendar Views

You may want to embed different views in different locations, and indeed one of the most useful things about the shortcode in the first place is the ability to do this—your main /events page could be the Month View grid calendar, but then you can embed List Views and Day Views on other pages as needed.

Specifying views is easy with the [tribe_events] shortcode—you simply use the view attribute.

So if you wanted to embed a List View calendar, you would use the shortcode [tribe_events view="list"]. Here is a full breakdown of the views that come standard with The Events Calendar and Events Calendar Pro:

• Month View → [tribe_events view="month"]
• List View → [tribe_events view="list"]
• Day View → [tribe_events view="day"]
• Photo View → [tribe_events view="photo"]
• Week View → [tribe_events view="week"]
• Map View → [tribe_events view="map"]

Common Shortcode Attributes for All Views

Some attributes for the [tribe_events] shortcode can be used across all event views. These are called “common” attributes. Here’s a look at each one:

category

• This attribute filters the shortcode view to only show events that are in the specified event category.
• Only accepts a single category slug. You can find category slugs by heading to Events → Event Categories in your wp-admin, as shown in this screenshot.
• Example: [tribe_events view="list" category="barbecue"]

featured

• This attribute filters the shortcode view to only show Featured Events.
• Only accepts “true” or “false”. Defaults to “false”.
• Example: [tribe_events view="list" tribe-bar="false" featured="true"]

date

• By default, shortcode views render showing the “current” time—the current month in Month View, the current week in Week View, and so on.
• This attribute makes the shortcode views load the specified date, so that can you show a specific month, week, or day.
• Month View
  • Allowed date formats: yyyy-mm-dd or yyyy-mm
  • Month View will default to the given month if yyyy-mm-dd is used.
  • Example: [tribe_events view="month" date="2016-08"]
• Day View
  • Allowed date formats: yyyy-mm-dd only!
  • If the yyyy-mm format is used, then the first day of the month will be loaded.
  • Specific Date Example: [tribe_events view="day" date="2016-08-21"]
  • Relative Date Example: [tribe_events view="day" date="today"]. “Now” and “Tomorrow” are also accepted values.
• Week View
  • Allowed date formats: yyyy-mm-dd or yyyy-mm
  • The week that contains the supplied date is what will be loaded.
  • If the yyyy-mm format is used, then the week that contains the first day of the month will be loaded.
  • Example: [tribe_events view="week" date="2016-08-21"]
• List View, Photo View, and Map View
  • Allowed date formats: yyyy-mm-dd or yyyy-mm
  • If the yyyy-mm format is used, then the first day of the month will be loaded.
  • Example: [tribe_events view="map" date="2016-08-21"]

tribe-bar

• This attribute turns the “Events Bar” on or off for the generated view. The Events Bar contains the basic search functionality of The Events Calendar views, and the view switcher. Here’s a screenshot for reference.
• Only accepts “true” or “false”. Defaults to “true”, which adds the Events Bar. “False” hides the bar.
• Example: [tribe_events view="list" tribe-bar="false"]

Limitations of the [tribe_events] Shortcode

There are three important limitations to keep in mind when using the [tribe_events] shortcode.

First, there can only be one “main calendar view” per page! This means that you cannot use the [tribe_events] shortcode on the main events page, and you cannot have multiple [tribe_events] shortcodes on a single page.

Second, at this time Filter Bar does not work with the shortcode calendar. If you want to use Filter Bar, you need to do so with the standard generated /events page and not via the shortcode. We’re hoping to add support for Filter Bar with shortcodes in the future.

Lastly, make sure that if you use quotation marks in your shortcodes, they are only “straight quotes” and are not “curly quotes.” If you’re not sure what this means, then the simplest way to see the difference between the quotes is to look at a screenshot like this one:

☝ In this screenshot, the top shortcode has a curly quote for its view attribute. This can cause numerous issues, so make sure that your shortcodes look like the bottom shortcode in the screenshot.

Shortcodes and the WordPress Customizer

By default, the [tribe_events] shortcode does not apply styles from the WordPress Customizer. However you can easily apply these styles by adding the following filter to your theme’s functions.php file:

add_filter( 'tribe_customizer_should_print_shortcode_customizer_styles', '__return_true' );

If you’d like to learn more about the calendar views provided by The Events Calendar and Events Calendar Pro, check out our collection of knowledgebase articles that refer to multiple new calendar views or our legacy calendar views.