Download The Events Calendar Edit Widget

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 isLong 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.

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 calledDisplay 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 theOverride 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:

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

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: