{"id":315,"date":"2021-11-02T04:44:47","date_gmt":"2021-11-02T09:44:47","guid":{"rendered":"https:\/\/docs.joedolson.com\/my-calendar\/?p=315"},"modified":"2025-12-23T20:01:03","modified_gmt":"2025-12-24T02:01:03","slug":"my-calendar-design-templates","status":"publish","type":"post","link":"https:\/\/docs.joedolson.com\/my-calendar\/my-calendar-design-templates\/","title":{"rendered":"Design – Templates"},"content":{"rendered":"\n

This document is about the legacy My Calendar templates. These have been superseded by custom PHP templates<\/a>, and will not receive any further updates. If you have legacy templates enabled, you can switch to PHP templates and they will render your existing legacy template.<\/p>\n\n\n\n

Templates is located under My Calendar > Design > Templates<\/code>.<\/p>\n\n\n\n

\"The
My Calendar > Design > Templates<\/figcaption><\/figure>\n\n\n\n

Template Editor<\/h2>\n\n\n\n

Core Templates<\/h3>\n\n\n\n
\"List
My Calendar > Design > Templates – Core Templates and Custom Templates<\/figcaption><\/figure>\n\n\n\n

The core templates will display event details and appear in five places:<\/p>\n\n\n\n

grid<\/strong>
The main grid calendar. The content that appears in the popup window.<\/p>\n\n\n\n

list<\/strong>
The list view calendar. <\/p>\n\n\n\n

mini<\/strong>
The mini view calendar. <\/p>\n\n\n\n

details<\/strong> (single event)
The single event view, or details page.<\/p>\n\n\n\n

The core templates<\/strong> 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.<\/p>\n\n\n\n

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\"]<\/code> in your shortcode. <\/p>\n\n\n\n

To enable a core template.<\/strong>
Click the template name. Example:<\/strong><\/em> I clicked the grid<\/strong> 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).<\/p>\n\n\n\n

\"Editing
My Calendar > Design > Templates – enable grid. Edit Template.<\/figcaption><\/figure>\n\n\n\n

After clicking to “Use this template” and clicking the Update Template button. We will be able to see the grid enabled.<\/p>\n\n\n\n

\"List
My Calendar > Design > Templates – enabled grid. <\/figcaption><\/figure>\n\n\n\n

Front end view of the grid popup.<\/strong>
(your before and after grid popup views will likely be different than the examples<\/strong><\/em> I show below.)<\/p>\n\n\n\n

Before enabling grid view:<\/p>\n\n\n\n

\"Example
My Calendar > Design > Templates – before enabling grid template. Frontend view. <\/strong><\/figcaption><\/figure>\n\n\n\n

After enabling grid view:<\/p>\n\n\n\n

\"Example
My Calendar > Design > Templates – after enabling grid template. Frontend view. <\/figcaption><\/figure>\n\n\n\n

It clearly shows the difference between disabled and enabled grid view.<\/p>\n\n\n\n

Core template code<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Core Template: grid<\/code>: used in the details popup in the main calendar view.<\/h4>\n\n\n\n
<span class=\"event-time value-title\">{time}{endtime before=\"<span class='time-separator'> - <\/span><span class='end-time'>\" after=\"<\/span>\"}<\/span>\n{image before=\"<div class='mc-event-image'>\" after=\"<\/div>\"}\n<div class=\"sub-details\">\n\t{hcard before=\"<div class='mc-location'>\" after=\"<\/div>\"}\n\t{excerpt before=\"<div class='mc-excerpt'>\" after=\"<\/div>\"}\n<\/div><\/code><\/pre>\n\n\n\n
Core Template: list<\/code>: used when viewing events in the main calendar list view.<\/h4>\n\n\n\n
<span class=\"event-time value-title\">{time}{endtime before=\"<span class='time-separator'> - <\/span><span class='end-time'>\" after=\"<\/span>\"}<\/span>\n{image before=\"<div class='mc-event-image'>\" after=\"<\/div>\"}\n<div class=\"sub-details\">\n\t{hcard before=\"<div class='mc-location'>\" after=\"<\/div>\"}\n\t{excerpt before=\"<div class='mc-excerpt'>\" after=\"<\/div>\"}\n<\/div><\/code><\/pre>\n\n\n\n
Core Template: mini<\/code>: used in popups for the mini calendar.<\/h4>\n\n\n\n
<span class=\"event-time value-title\">{time}{endtime before=\"<span class='time-separator'> - <\/span><span class='end-time'>\" after=\"<\/span>\"}<\/span>\n{image before=\"<div class='mc-event-image'>\" after=\"<\/div>\"}\n<div class=\"sub-details\">\n\t{hcard before=\"<div class='mc-location'>\" after=\"<\/div>\"}\n\t{excerpt before=\"<div class='mc-excerpt'>\" after=\"<\/div>\"}\n<\/div><\/code><\/pre>\n\n\n\n
Core Template: details<\/code>: used on the single event view.<\/h4>\n\n\n\n
<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>\n{image before=\"<div class='mc-event-image'>\" after=\"<\/div>\"}\n<div class=\"event-data\">\n\t{runtime before=\"<p class='mc-runtime'>\" after=\"<\/p>\"}\n\t{categories before=\"<p class='mc-categories'>\" after=\"<\/p>\"}\n<\/div>\n<div class=\"sub-details\">\n\t{hcard before=\"<div class='mc-location'>\" after=\"<\/div>\"}\n\t{description before=\"<div class='mc-description'>\" after=\"<\/div>\"}\n\t{map before=\"<div class='mc-map'>\" after=\"<\/div>\"}\n<\/div><\/code><\/pre>\n\n\n\n
Custom Templates<\/h3>\n\n\n\n
Click “Add Custom Template” button to create a blank template. We will see this section:<\/p>\n\n\n\n
\"Creating
My Calendar > Design > Templates – Add Custom Template<\/figcaption><\/figure>\n\n\n\n
Add a Template Description and code and click the “Add Template” button.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Using Custom Templates<\/h2>\n\n\n\n
\"List
Custom template list<\/figcaption><\/figure>\n\n\n\n
After creating a custom template, you can use the template key in place of the template anywhere you would normally add a template. You can use the key in shortcodes or in widgets.<\/p>\n\n\n\n
Event Tags and Location Tags<\/h3>\n\n\n\n
See the Template Tag Index documentation<\/a> for a list of various Event, Location and other tags used in My Calendar.<\/p>\n\n\n\n
Below the list of Event and Location tags seen in the Design > Templates screen. A Template preview<\/strong> will display to show the enabled core templates or custom template.<\/p>\n\n\n\n
Here is an example<\/strong><\/em> with the enabled the grid view template.<\/p>\n\n\n\n
\"Template
My Calendar > Design > Templates – Template Preview: Grid<\/figcaption><\/figure>\n\n\n\n
Next: My Calendar > Design > Scripts<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
This document is about the legacy My Calendar templates. These have been superseded by custom PHP templates, and will not receive any further updates. If you have legacy templates enabled, you can switch to PHP templates and they will render your existing legacy template. Templates is located under My Calendar > Design > Templates. Template […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-315","post","type-post","status-publish","format-standard","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/docs.joedolson.com\/my-calendar\/wp-json\/wp\/v2\/posts\/315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.joedolson.com\/my-calendar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.joedolson.com\/my-calendar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.joedolson.com\/my-calendar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.joedolson.com\/my-calendar\/wp-json\/wp\/v2\/comments?post=315"}],"version-history":[{"count":31,"href":"https:\/\/docs.joedolson.com\/my-calendar\/wp-json\/wp\/v2\/posts\/315\/revisions"}],"predecessor-version":[{"id":316,"href":"https:\/\/docs.joedolson.com\/my-calendar\/wp-json\/wp\/v2\/posts\/315\/revisions\/316"}],"wp:attachment":[{"href":"https:\/\/docs.joedolson.com\/my-calendar\/wp-json\/wp\/v2\/media?parent=315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.joedolson.com\/my-calendar\/wp-json\/wp\/v2\/categories?post=315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.joedolson.com\/my-calendar\/wp-json\/wp\/v2\/tags?post=315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}