Design – Templates

Templates is located under My Calendar > Design > Templates.

My Calendar > Design > Templates

Template Editor

Core Templates

My Calendar > Design > Templates – Core Templates and Custom Templates

The core templates will display event details and appear in five places:

grid
The main grid calendar. The content that appears in the popup window.

list
The list view calendar.

mini
The mini view calendar.

details (single event)
The single event view, or details page.

The core templates are not in use by default.
These are simplified models of what is possible. If you only want to make a minor change to the default template, you can edit the specific template and enable it to put it into use. If you wish to revert to the original output, turn off the template.

You can place a template file in your theme directory and reference it from the My Calendar shortcode. If you have a template file called “template.txt” in your theme directory, it would be referenced as [my_calendar template="template.txt"] in your shortcode.

To enable a core template.
Click the template name. Example: I clicked the grid template name and the grid template code became visible so that I could modify the code. To use the template I would need to click the checkbox “Use this template” (above the code section) and click the Update Template button (below the code section).

My Calendar > Design > Templates – enable grid. Edit Template.

After clicking to “Use this template” and clicking the Update Template button. We will be able to see the grid enabled.

My Calendar > Design > Templates – enabled grid.

Frontend view of the grid popup.
(your before and after grid popup views will likely be different than the examples I show below.)

Before enabling grid view:

My Calendar > Design > Templates – before enabling grid template. Frontend view.

After enabling grid view:

My Calendar > Design > Templates – after enabling grid template. Frontend view.

It clearly shows the difference between disabled and enabled grid view.

Core template code.

Click the code of each core template and see how these are built. It will make it easier to build your own template if you base it on one of the below core templates.

Core Template: used in the details popup in the main calendar view.

<span class="event-time value-title">{time}{endtime before="<span class='time-separator'> - </span><span class='end-time'>" after="</span>"}</span>
{image before="<div class='mc-event-image'>" after="</div>"}
<div class="sub-details">
	{hcard before="<div class='mc-location'>" after="</div>"}
	{excerpt before="<div class='mc-excerpt'>" after="</div>"}
</div>

Core Template: used when viewing events in the main calendar list view.

<span class="event-time value-title">{time}{endtime before="<span class='time-separator'> - </span><span class='end-time'>" after="</span>"}</span>
{image before="<div class='mc-event-image'>" after="</div>"}
<div class="sub-details">
	{hcard before="<div class='mc-location'>" after="</div>"}
	{excerpt before="<div class='mc-excerpt'>" after="</div>"}
</div>

Core Template: used in popups for the mini calendar.

<span class="event-time value-title">{time}{endtime before="<span class='time-separator'> - </span><span class='end-time'>" after="</span>"}</span>
{image before="<div class='mc-event-image'>" after="</div>"}
<div class="sub-details">
	{hcard before="<div class='mc-location'>" after="</div>"}
	{excerpt before="<div class='mc-excerpt'>" after="</div>"}
</div>

Core Template: used on the single event view.

<span class="event-time value-title" title="{dtstart}">{time}<span class="time-separator"> - </span><span class="end-time value-title" title="{dtend}">{endtime}</span></span>
{image before="<div class='mc-event-image'>" after="</div>"}
<div class="event-data">
	{runtime before="<p class='mc-runtime'>" after="</p>"}
	{categories before="<p class='mc-categories'>" after="</p>"}
</div>
<div class="sub-details">
	{hcard before="<div class='mc-location'>" after="</div>"}
	{description before="<div class='mc-description'>" after="</div>"}
	{map before="<div class='mc-map'>" after="</div>"}
</div>

Custom Templates

Click “Add Custom Template” button to create a blank template. We will see this section:

My Calendar > Design > Templates – Add Custom Template

Add a Template Description and code and click the “Add Template” button.

After saving the custom template we will see it listed with a template key. The template key is used as a reference to this template in almost any template attribute. This is an easier and more flexible way to manage templates used in shortcodes.

Event Tags and Location Tags

See the Template Tag Index documentation for a list of various Event, Location and other tags used in My Calendar.

Below the list of Event and Location tags seen in the Design > Templates screen. A Template preview will display to show the enabled core templates or custom template.

Here is an example with the enabled the grid view template.

My Calendar > Design > Templates – Template Preview: Grid

Next: My Calendar > Design > Scripts.