We're going to take a look at the Events Calendar widget, also known as the Mini Calendar. We'll cover the basics of adding this PRO-specific widget to a sidebar, how to configure it, and some tips and tricks on how to customize the widget further.
So, let's get started.
Adding the Events Calendar Widget to a Sidebar
The Events Calendar widget is a feature that comes bundled with The Events Calendar PRO. To activate it, you'll need to make sure that The Events Calendar PRO is first installed and activate on your site.
From there, head over to Appearance > Widgets from the WordPress dashboard. You're looking for a widget called Events Calendar. Careful, because this could be easily confused with the Calendar widget, which is packaged with WordPress and not related to The Events Calendar at all.
See the Events Calendar widget? Drag it over to the sidebar widget area of your choice, then save your settings.
There we have it. Now we can go to the front end of our website and see the Mini Calendar in all its mini and mighty glory.
Events Calendar Widget Settings
First thing you might notice when adding the widget to the sidebar is that there are a few options that allow us to customize things a bit. These are the available options:
- Title: This is the heading that sits above the widget on the front end of the site. By default, it is "Events Calendar," but can be changed to anything we'd like.
- Number of Events to Show: This allows you to set the maximum number of events that display in the list below the calendar at any given time. By default, this is set to five, but can be any number between one and ten.
- Add a filter: This option allows you to limit the events that display in the widget to certain categories and tags. Let's say we only want events categorized as Conference to display in the widget. Perfect, add a filter! How about Conferences and Workshops? Add two filters!
Customizing the Events Calendar Widget
You can also override the Events Calendar widget templates to customize things even more. Our Themer's Guide provides a comprehensive overview on theming and this article offers a great example of a specific customization to the widget, but we'll quickly go over the available templates here.
First off, you can find the primary template for the widget at: /plugins/events-calendar-pro/src/views/pro/widgets/mini-calendar-widget.php. To override the template:
- Make a copy of the file
- Make a new folder in your theme directory called tribe-events
- Make a new folder in that one called pro
- Make a new folder in that one called widgets
- Drop your copied file into that last folder
Now that the template is in your theme directory, you can modify it to suit our needs. For example, we can remove the list of events under the widget by deleting the code for it (lines 33-38 at time of writing). Not sure why we'd want to do that, but we can!
The rest of the templates for Events Calendar widget are located in either the mini-calendar or modules folder in the same directory as the primary template:
- mini-calendar/grid.php – this is the calendar view that displays the dates in a grid
- mini-calendar/list.php – this provides the structure for the list of events that display below the calendar grid
- mini-calendar/single-day.php – this is the content for the events that display in the list below the calendar grid
- modules/single-event.php – this is responsible for displaying individual events in the list
Please note that the final template listed above is shared with the advanced events list widget, so modifying this template will impact the appearance of both widgets.
Embedding the Widget
Another awesome thing about the Events Calendar widget is that it can be embedded on any page or post outside of the sidebar. In other words, we can place it anywhere we want!
Embedding the widget can be as easy as pasting this shortcode into any page or post:
There are a slew of other options available for this shortcode which you can read about more fully in this tutorial on the subject.
We hope this provides a thorough overview of the Events Calendar widget including how to add it to a sidebar, configure the settings, and even make some advanced customizations to it.