Skip to main content

Using Event Calendars

Once you create your events, you can display event calendars on your site. There's various options and ways to insert a calendar into your site, we'll go trough them here.

Calendar Types​

Unless stated, these calendars take up the whole width of their container, meaning that if you add a calendar in your sidebar, it'll take up the whole width of the sidebar, if you add it to a page, it'll take up the whole page width, etc.

Full-Sized Calendars​

Full-Sized calendars display a list of events in a list-style fashion. You can choose how many events to show, and style what each event list item contains in your settings page, which we'll look at further down.

Click here for a demo of this calendar

Small Calendars​

Small calendars are similar to full-sized calendars, but do not contain lists of events within the calendar dates. Each calendar date which has events will be a link to a page showing the list of events that day.

Click here for a demo of this calendar

WP FullCalendar (seperate plugin)​

This is a seperate plugin created by us, which is freely available on the WordPress plugins repo, meaning you can install it straight from your dashboard. Search for "wp fullcalendar".

Click here for a demo of this calendar

FullCalendar is a jQuery script that generates a beautiful AJAX-powered calendar, offering various styling possibilities. This behaves much in the same way as calendars with regards to displaying them with shortcodes, settings, widgets, etc.

Please note that due to the way that FullCalendar works, certain features available in the native calendars may not be the same for FullCalendar and vice-versa.

Calendar Display Options​

All calendar display options are located within the Calendar format panel within the the Events > Settings > Formats/Layouts tab of your admin dashboard. These options will enable you to:

  • Change how/what event information is shown on eventful calendar days.
  • Decide how many events to show within on calendar per day.
  • How to link out to calendar day and event pages from the calendar.

One important option when displaying Small and Full Calendars is Long Events, this just means that events spanning more than one day will be shown on each day it occors. If not enabled, then it'll only be shown on the starting date.

Event Display Styles​

You can control how events appear on each eventful calendar day with the calendar_event_style option. Set it site-wide under Events > Settings > Formats/Layouts > Calendar (the Default event style setting), or override it per calendar via the shortcode, widget, block or PHP. The available styles are:

  • Pills (pill, the default) — each event is shown as a labelled pill/bar with its title.
  • Single dot (dot) — a single coloured dot beneath the date number. No overflow indicator is shown, no matter how many events fall on that day.
  • Multiple dots (dots) — one coloured dot per event, up to the per-day events limit, then a + for any beyond it.
  • Rings (ring) — a coloured ring drawn around the date number.

Dots and rings take their colour from each event's first category colour, falling back to your default category colour. With the dots style, the number of dots (and the + overflow) honours the same per-day events limit as the other calendar styles, which you can set in the calendar settings or per calendar.

These styles work everywhere a calendar is shown: the [events_calendar] shortcode (e.g. calendar_event_style="dots"), the Events Calendar widget (the Event Style and Events per day options), the Events Calendar block (the Event style and Events per day inspector controls), and EM_Calendar::output().

Displaying Calendars On Your Site​

Main Events Page​

If you would like to show the Full Calendar on your main event page, you should go to the Events > Settings > Pages tab in your admin dashboard and then open the Events List/Archives panel. You'll see an option called Display calendar in events page?

If you are using the WP FullCalendar plugin then you'll see a section for FullCalendar in the General Tab, which provides the  Override calendar on events page? option.

Widgets​

There is a calendar widget which you can use to display the Small Calendar in various widget areas of your theme. To add a calendar widget, visit your Appearances > Widgets page in your admin dashboard, and drag the widget called Events Calendar to your desired sidebar.

Shortcode​

You insert one single shortcode into your post and page content to display a calendar, here is an example:

[events_calendar full="0" long_events="1"]

This shortcode would create a calendar exactly like the calendar above, however, depending on where you inserted this it may stretch to fit the full-width. If you want to restrict the size of this calendar (for example, 250 pixels), you can wrap it in a div html element like so:

<div style="width: 250px;">[events_calendar full="0" long_events="1"]</div>

PHP Code​

Requires knowledge of PHP and HTML. You can directly insert calendars using PHP into your theme files. Here's an example equivalent to the sortcode and widget examples in PHP:

echo EM_Calendar::output(array(‘full’=>0, ‘long_events’=>1))

Advanced Customization​

Requires knowledge of PHP and HTML. If you want to make some changes to the structure of the calendar. You can do this by overriding the default calendar templates within your theme. The files you'll want to move are:

  • templates/templates/calendar-full.php - The Full Calendar
  • templates/templates/calendar-small.php - The Small Calendar