The Events Calendar: New User Primer

Welcome! If you’re reading this, it’s probably because you’ve recently downloaded The Events Calendar and Events Calendar PRO and are ready to get started. You’ve come to the right place. The tutorial you’re about to read assumes you know nothing about the Events Calendar and will walk through everything from initial activation to setting up your events. Here’s what we’ll cover, specifically:

If you’re looking for advanced documentation on how to customize the plugin to integrate with your site, this tutorial won’t go into that much depth. You may want to check the documentation and tutorials pages.

I. Installing & Activating The Events Calendar and Events Calendar PRO

To install & activate The Events Calendar and Events Calendar PRO:

  1. Open the backend of your site and navigate to the “Plugins” section. Elect to upload a new plugin (ZIP) folder.
  2. First select The Events Calendar from your computer; it should still be zipped up. Hit the upload button and wait for confirmation that all was successful. Hold off on activating for now, though.
  3. Do the same thing with Events Calendar PRO if you have it — upload it from your machine and await confirmation that the process was successful.
  4. Once the plugins have been successfully uploaded, navigate to your broader plugins list. You’ll see two inactive plugins: The Events Calendar and Events Calendar PRO.
  5. We’re going to want to ‘Activate’ both of these; do The Events Calendar first, THEN Events Calendar PRO. Note that you can run and use The Events Calendar without PRO active; it essentially provides a stripped down version of the code that doesn’t include functionality as recurring events, advanced Views, etc. However — you cannot have PRO active without also running The Events Calendar.
  6. You’ll know the activation was successful by looking for the “Events” section in your admin sidebar.

Note that if you’re using just The Events Calendar alone (without the PRO add-on), the steps above are essentially the same…except instead of uploading/activating two plugins, you’ll just do one.

Back to Top

Migrating from The Events Calendar 2.0 and Events Calendar PRO 2.0 to version 3.x?

Ready to update to The Event Calendar 3.0 and maybe Events Calendar PRO 3.0 too? Awesome. We’ve tried to make the transition as smooth as possible so you can start enjoying the new features as soon as possible. The process for updating both plugins will be more or less the same.

  1. Before you start contemplating 3.0, update the plugin(s) to the last 2.x build, version 2.0.11. You can download The Events Calendar 2.0.11 here. Email us for a .zip file of Events Calendar PRO 2.0.11.
  2. Next, back up your site. All yours events and other data will transition into the new version, but it’s always best to back things up, just in case.
  3. From the WordPress Plugins page or Updates page, initiate an automatic update for the plugin(s). PRO users will need to have a valid license key entered under Events –> Settings in order to have the update option for PRO.
  4. If you were previously using only The Events Calendar, you may have some duplicate venues listed. With version 3.0, you get the previously-premium feature of saved venues and organizers. To merge duplicated venues into one listing, go to Events –> Settings. On the General tab, scroll down to the Miscellaneous Settings. If you have duplicates, you’ll see this button:
    De-duplicater
    Hit the Merge Duplicates button and voila! Your existing content will be organized into single entries, which you can see under the Events heading the main admin sidebar.
    If you were previously using Events Calendar PRO, you can skip this step completely.
  5. Reset your permalinks by hitting save on the WordPress Settings –> Permalinks page. We’ve noticed that a lot of weird issues people have often get resolve with this simple step.
  6. Head over to the Events –> Settings page and check out the new options. Version 3.0 includes lots of new features and options that you’ll want to configure. Settings are discussed at length below.

Back to Top

II. Walking through the Settings panel

You can access the Settings for The Events Calendar and Events Calendar PRO by selecting Events → Settings from your WordPress admin bar. Particularly with PRO enabled, the Settings offer a lot of cool custom settings to get your calendar looking just the way you want it.

Let’s review again what each of the options entail. Note that the details below are specific to Events Calendar PRO; the free counterpart does not include all of the fields we’re about to discuss, as some of them are PRO-exclusive. I’ll try to note those PRO-exclusive features as we see them.

Clicking into Events → Settings will land you on our tabbed settings page. You’ll be on the General tab to start. We’ve detailed each tab (from left to right) below.

General

  • Number of events to show per page: Defines the number of events showing on each page (all Views). Other events are accessible from Previous/Next Events nav links.
  • Use Javascript to control page load: Allows immediate AJAX refresh of content
  • Recurring event instances: When checked, only the next upcoming event in a recurring event sequence will show. This can be useful to unclutter your calendar. When unchecked, all instances will show.
  • Front-end recurring event instances toggle:  Gives a bit more flexibility than the Recurring event instances setting covered above. When enabled, this offers a frontend setting for users to decide whether they want to show an entire recurrence pattern or just the next event in that series.
  • Show Comments: When enabled, this setting adds WordPress’ basic commenting functions to your event listings. If comments are enabled on a whole they can still be disabled as you see fit on a post-by-post basis.
  • Include events in main blog loop: Events will be included on your main page along with regular WordPress posts. They will continue to show in all calendar views.
  • Events URL slug: Determines where on the frontend your events will live; defaults to /events but can be changed to whatever you see fit. The link that appears below the field will take you directly to your events page.
  • Single event URL slug: Similar to the Events URL slug, this determines the URL structure for a single event. Note that while you want this to be similar to the Events URL slug, they cannot be identical — notice how if the Events URL slug defaults to plural “events”, the Single Event URL Slug has to be singular “event.” Keep this in mind as you make changes.
  • End of day cutoff: Let’s say you have an event that runs from 6 pm on Friday until 2 am on Saturday; technically, that’s a Friday & Saturday event — but to readers on the frontend, and for all intents & purposes, it’s a Friday night event that runs long. This is where the end of day cutoff comes into play; if you set the dropdown here to 2:30 a.m., for example, your Friday-Saturday event would only show on Friday in relevant views.
  • Default Currency Symbol: This allows non-US users to change the currency symbol for Event Cost. The symbol can also be changed on an individual post.
  • Enable Google Maps: This checkbox allows Google Maps integration for single event pages and venue pages. You can then turn maps on or off on individual event pages.
  • Map view search distance limit: This sets the distance for the Location search. For example, if set at 20, a Location search for New York City will show all events within 20 miles (or km, depending on the setting below) of New York City.
  • Map view distance unit: Allows you to change the default distance unit to kilometers instead of miles.
  • Google maps default zoom level: Defines how the map looks on Venue and Event pages. A low number will show a zoomed out map, while a high number (max 21) will be completely zoomed in.
  • Duplicate Venues and Organizers: This setting will only show if you add Events Calendar PRO to a site that was previously only using The Events Calendar (2.0.11 or earlier). The Merge Duplicates button will combine all repetitions of Venues and Organizers into single entries. Those will then be saved for using with future events, and accessible under the Events menu.
  • Debug mode: Turn this checkbox on to log debug information. This is probably not worth enabling unless you have the specific intent of checking for errors with the plugin code.

Display

  • Default stylesheet used for events templates: You can choose between three different stylesheets depending on how much default styling you want on your calendar. The last two options may be particularly useful if you are wanting to add your own CSS.
    • Tribe Events Styles – our most comprehensive level of default styling
    • Full Styles – this also adds a lot of styling but leaves more scope for your theme’s own look and feel to shine through
    • Skeleton Styles – this is a very minimal level of styling and is ideal for those who wish to roll their sleeves up and build their own custom set of rules
  • Events template: This dropdown allows you to change the look and feel of the calendar and how it integrates with your site. The plugin comes with two templating options by default (Default Events Template and Default Page Template); your theme will likely include at least one more. Switch between these if you’re finding the calendar does not look as you want it to on the site — while they may not get you 100% where you want to be, you’ll be able to tell right off the bat which templating option is most compatible with your site and can make additional modifications as needed from there.
  • Enable event views: Allows you to choose which Views will be available to users on the front end. You can read more about the different views in Section IV below.
  • Default view: The View selected here will show on your calendar’s initial load. From there users can change to the Views you’ve enabled above.
  • Disable the Event Search Bar: Check this box to return to the classic header from pre-3.0 versions.
  • Hide Location Search: Removes the Location Search option from the Tribe Bar.
  • Add HTML Before/After Calendar: These fields allow you to add extra divs (or other HTML) before or after the calendar as it appears on the frontend of the site. This can also come in handy for adding sub-heads or announcements to your calendar.


Default Content (PRO only)

If you often use the the same information for events (for example, all your events are in the same city, or organized by the same person) then you can use the Default Content options to save time when making new events.

To begin using Default Content, go to Events –> Settings and select the Default Content Tab. Next, check the “Automatically replace empty fields with default values” option. This is basically an on/off switch the the content you’ll enter below.

The first two options are for Default Organizer and Default Venue. You can select any previously used entry. Once saved, these entries will be automatically selected in any new event you make. However, you can still change the Organizer or Venue for an individual event.

If you do not want to use a Default Venue, you can instead use Default Address information such as address, state, country, phone number, etc. Enter as much or as little as you’d like. Whatever you enter will show in the relevant field on your New Event page. Keep in mind that if you have Default Address information set and then set a Default Venue, the chosen Venue will override the Address information.

The last setting on this page is the custom list of countries. If this field is blank, you’ll be able to choose any country for your venue on the New Event page. If you want to narrow the list to certain countries, enter them hear (one per line). This will replace the complete country list with your selected countries. If you want only one country option, you should use the Default Country  instead.

Additional Fields (PRO only)

This is where you add custom event attributes. We’ll cover this in depth below in the adding custom event attributes section.

Licenses

The field(s) where you’ll enter your valid license key(s). Starting with 2.0.5, any events-related add-on you buy from Modern Tribe will require you visit this tab. The more premium plugins you have installed, the more fields will appear. You can add as many or as few as you want at a given time; remember that since none of our plugins require the license to work, you’re merely adding them to access support & future updates. If you’re running a free plugin you can ignore this settings tab.

Help 

We spent a lot of time devising the Help tab so it’d be as valuable as possible to the community. Got an integration question or bug? Go here first. Aside from giving you an overview of our philosophy and how we treat support issues, it’ll direct you to valuable places like our help videos / FAQs / documentation / etc. We built this plugin to serve you and tried to cram as much information that can help you succeed in here as possible (without making it feel like an inundation…we hope).

Back to Top

III. An Overview of Frontend Views

The Events Calendar includes two different view options for your events: Calendar or “Grid” view, and List View. Events Calendar PRO includes those two as well as Week, Day, Photo, and Map View. You can choose which View is default and which others show on the Display tab under Events –> Settings.

Note: examples below show Calendar and List views with PRO enabled. 

Calendar View: Calendar View shows all events in a selected month. Three events are displayed per day, and any additional events can be seen by clicking View All on that day, or clicking the date itself. You can choose which three events are shown on the calendar by checking the Make Sticky in Calendar View option on the event page. Past dates and events are shown faded, with current and upcoming events in bold. Mousing over an event will show the event’s title, date, time, excerpt, and featured image.

NUP_Calendar-view

List View: List View shows upcoming events in chronological order. You can dictate how many events to show per page under Settings. Any events beyond that are accessible with Next Events nav links. Each entry includes basic Event information and an excerpt of the event description. Featured images will display to the left of each entry.

NUP_List-View

Week View: Week View shows the events for a chosen week. The week will start on whatever day is set as first day of the week in your general WordPress settings. Events are displayed to show their duration. Mousing over an event will show the  event’s title, date, time, excerpt, and featured image.

NUP_Week-View

Day View: Day View shows events on a single date. Like List View, it is governed by the Number of Events Per Page setting. Events are ordered and separated by start time. Users can navigate with Previous/Next Day nav links or with the date picker in the Events Bar (upper left). Featured images will show to the left of the event description.

NUP_Day-view

Photo View: Photo View is great when you use a lot of featured images. Events are shown in chronological order with the featured image prominently displayed. The event title, date, time, and excerpt are also shown. Photo View adjusts to accomodate sidebar widgets.

NUP_Photo-view

Map View: Map View shows all upcoming events plotted on a prominently displayed map. Clicking a dropped pin shows the event name and venue address. If the Location Search is used, the map will zoom in on the selected location. Additionally, each event will display with the distance away from your search term. Entries show the event’s title, date, time, venue, address, excerpt, and featured image.

Screen Shot 2013-06-14 at 2.26.16 PM

Back to Top

IV. Finding The Calendar on the Frontend

The video above nicely sums up the process of finding your calendar on the frontend. This process is the same regardless of whether you’re using the free Events Calendar or have upgraded to Events Calendar PRO.

Back to Top

V. Setting Up Your First Event

If you watched the video above, hopefully the process of setting up your first event is a bit clearer. Let’s review it in greater depth.

To set up your first event, regardless of whether you’re a core (free) or PRO user, navigate to the backend of your site and select Events → Add New. You’ll notice that this looks very similar to the page you see when adding a regular post. To create an event:

  1. Title, description (entry body), tags, categories and featured image operate identical to a regular blog post. Assign and configure them accordingly before moving into The Events Calendar section, which appears below the entry body field.
  2. Once you begin configuring event details, the first thing you’ll need to decide is whether or not this will be an all day event. If it is, hit the checkbox; you’ll see the start/end time fields disappear upon doing so. If it isn’t an all-day event, leave this field unchanged.
  3. Select the start date/time; start date will default to today and start time/end time will default to 8 a.m. / 5 p.m. respectively. However — assuming you haven’t set this event as all day — you can change these to whatever fits your event criteria using the dropdowns.
  4. If you’re a PRO user, you’ll also see a dropdown for “Recurrence.” (Core/free users do not offer recurring events at this time). If that’s the case leave “Recurrence” set to “None” for now; we’ll discuss recurring events below (Setting up recurring events).
  5. Event Location Details will determine the venue for your event. You can either use a saved venue from the dropdown or create a new one on the spot. If you do create a new one now, it’ll be saved in the dropdown for use on any future event you create. It’s also worth noting that you can add as many or as few venue details as you see fit; whether it’s a specific address or just a country, the plugin will accommodate your needs. You can also leave these fields entirely blank if you don’t want any venue information to display. However, you will need a full address if you want to make use of the Google Maps options, Map View, and/or Location Search.
  6. If you check the “Show Google Maps Link” box, it will include a nice button that links your readers to view the venue information at maps.google.com. If you check the “Show Google Maps” box, it will embed a map of the venue into the events page directly. You can include one, both or neither of these on an event-by-event basis. Keep in mind these options will only show if you have Enable Google Maps checked in the Settings.
  7. Event Organizer Details are similar to the venue details we added above, only these focus on the person putting the event together. Once again you have the option to pick from existing organizers via the dropdown or to add a new one using the fields available; and once again, you can add as many or as few organizer details as you wish.
  8. Event Website allows you to enter a URL if the event itself has a separate website. Otherwise you can leave it blank.
  9. The Event Cost options allow you to set a cost for the event and change the currency symbol you use. You can set a default currency symbol in the Settings panel, and this option allows you to change it on an individual event. The next field, Cost, is how much your users can expect to pay for the event. If you leave it blank, no cost field will appear. If you enter a “0”, it will say the cost is “Free”. Otherwise just enter the numeric value you deem appropriate.
  10. The last field on the page is “Excerpt.” If you add any text here, it will appear in various views either in list form or tool tips, followed by a link to the full entry. If you leave this field blank the list & grid view will pull their preview directly from the entry body.

Back to Top

VI. Setting Up Recurring Events (PRO only)

Recurring Event settings allows you to create a New Event once and have it recur at a regular interval. It’s really handy for things like meetings, classes, and more. If you want to get in-depth and use the Custom Recurrence options, check out this guide: A Detailed Look at Custom Recurrence.


Back to Top

VII. Adding Events To The Menu

We detailed adding events to the header menu in the video for step V (“Finding The Calendar on the Frontend”), above. This process is the same for both free & PRO users.

Back to Top

VIII. Adding Additional Fields (PRO only)

Remember that additional fields are a PRO-exclusive feature. So, as with recurring events, you can skip this section if you’re using only using The Events Calendar. If you are using PRO, you can read on for a walk through of the process.

To add additional fields to your events:

  1. Navigate to Events –> Settings
  2. Click the “Additional Fields” tab. (Note: you’ll only have this tab if you’re running PRO).
  3. You’ll see three areas to configure: Field Label, Field Type, and Options (one per line).
  4. The Field Label will determine how this attribute appears on the frontend. If you’re aiming to include a “Host” in your events, for example, you’d include the word “Host” here. No need to add the separator colon; the system will throw that in automatically upon publication.
  5. Field Type determines what type of field this will be: a text field (where event admins can enter whatever they want); Radio (where you pre-populate the options and event admins can select one of them); Checkbox (which is similar to Radio except allows event admins to pick multiple selections instead of just one); and Dropdown (in which you pre-populate the list with options and event admins can select one from a dropdown that appears on the event creation screen). Select the Field Type you want for this attribute.
  6. Once you select a Field Type, you’ll be able to fill in the Options are. As the header indicates, you should include one option per line in this text field. You can include as many or as few you as you see fit. You can always edit this list later as needed.
  7. You can add more custom fields by selecting the “Add Another” link that appears on the far right.
  8. Make sure you save your changes before navigating to another tab, or none of your custom attributes you will be available.

Any custom attribute data that is added here on the Settings page will be available to all users for all events that are created going forward; as it stands there is no way to filter these down by user role or event category. If you ever want to remove an attribute from the site (stripping it from any existing events it may be assigned to along the way), just come back to this Settings page and hit the “Remove” link.

Back to Top

IX. Where To Go For Additional Help

Hopefully this primer was an exhaustive (but not exhausting!) overview of what you can do with Events Calendar PRO at the most basic level. Of course, there is a lot more the plugin is capable of — how far you’ll extend it depends on how much time you’re willing to spend and your site’s needs. For those looking to do more, we’re here to help. Here are some great places to start:

  • FAQ: Our frequently asked questions page is probably the best starting point to check whether your question has popped up more than once. The FAQ is broken out into different sections that will hopefully help narrow your search down.
  • Tutorials: With new tutorials coming on a near weekly basis, this is the best place to look for more advanced templating/development tutorials or other functionality that exists outside of what the plugin offers out of the box.
  • Help Videos: Though you’ve probably seen most of our existing help videos in the tutorial above, we’re always adding new ones — and looking for suggestions of what to cover next.
  • Support Forum: The first or last line of defense (depending on how you look at it), our support forum is monitored on a daily basis during the week and is the best place to go for one-off questions or direct support. Please make sure you’ve reviewed the forum guidelines before you begin posting, and don’t forget to do a quick search to see whether your issue has already been addressed before posting a new thread. It is important to note that the forum is limited to just PRO users. We unfortunately don’t have the bandwidth to provide open source users with direct support.

We’re also always building out our documentation page with new information to help customize and otherwise extend the plugin’s functionality. Head there for things like template tags, standard and advanced functions, hooks and filters, configs, hacks, and more!

While not necessarily for the casual user, this documentation should help — and was inspired by requests from — members of the community looking to get more out of this plugin.

Thanks again for reading, and if you’re a paid user, for your purchase of Events Calendar PRO! Feel free to leave any lingering questions in the comments below, or just drop us a note.

Back to Top

Modern Tribe Newsletter

Insight, Discounts & Notices for People Who Kick Ass..