Creating your own Calendar Theme allows you to change the layout of your calendar, and more.

This is a bit more advanced than other modifications, so if you’re not familiar with HTML or CSS, you may want to hire a developer to do it for you.

If you are already familiar with writing WordPress Themes you should have no trouble creating a Calendar Theme. Since 2.0, Timely uses the Twig template engine, a faster and easier way to create templates. Full documentation on Twig can be found here.

If you’ve already created templates in the pre-2.0 style, they should still work fine.

We do not recommend you create your custom theme on a production server. You’ll need to turn on debugging to preview your changes. This will negatively affect the performance of your site while it’s turned on.
Where are the Themes and Views?
  • Core calendar themes are stored under [wp-root]/wp-content/plugins/
    all-in-one-event-calendar/public/themes-ai1ec
    .
  • Templates for the Extended Views Add-on (Posterboard and Stream view) are stored under [wp-root]/wp-content/plugins/
    all-in-one-event-calendar-extended-views/
    public/themes-ai1ec
    .
  • Templates for the Frontend Submissions Add-on are stored under [wp-root]/wp-content/plugins/
    all-in-one-event-calendar-frontend-submissions/
    public/themes-ai1ec
    .
  • Your own custom themes are stored under [wp-root]/wp-content/themes-ai1ec. Any templates you wish to override (even those normally found in an extension) go under your custom theme’s template directory.

Here’s how you do it.

Step 1: Turn on Debug Mode

This will turn off caching and allow you to see the changes as you make them.

Edit [wp-root]/wp-content/plugins/
all-in-one-event-calendar/
app/config/constants.php

Step 2: Create a Child Theme

Timely has prepared a theme that you can use as a starting theme for your child theme. It’s called Gamma.

copy-gamma1

 

Copy the “gamma” folder into a new folder, with the name of your choosing under the directory “themes-ai1ec.”

Step 3: Edit  style.css

Edit style.css to customize the name and description of your theme.

  • Theme Name
  • Theme URI
  • Author
  • Author URI
  • Description
  • Version
  • Tags
Please note: Use of this file to store stylesheet rules is deprecated. Your theme’s custom CSS (and/or LESS) rules belong in css/override.css or less/override.less, as explained below.

Add your custom CSS (or LESS) styles in css/override.css or less/override.less

custom-styles

Step 4: Copy calendar files from Vortex

Vortex, the default calendar theme, has the all the templates you need. Simply copy the files that you want to edit into your new folder.

The minimum files required to build a calendar theme can be found in Gamma. Gamma is the “skeleton” theme we supply with the plugin. Like all custom calendar themes, Gamma is a child theme of Vortex. Vortex is the foundation of all calendar themes, as it provides the base CSS, images, theme option definitions, and template files required for the calendar to function.

Copy only the templates that you want to customize from Vortex (found either in the core plugin or in an add-on) and place into your new custom theme, under the twig subdirectory.

Get-Twig-Templates

Step 5: Edit your templates files.

Timely uses the Twig template engine to make it easier edit your template. Editing a twig template is similar to editing any html document. Full documentation on Twig can be found here.

Optional. Update screenshot.png with a thumbnail screenshot of the theme. This image is shown on the calendar theme selection screen.

Index of all Theme Files

style.css: Where the theme’s metadata is defined in a CSS comment, including:

  • Theme Name
  • Theme URI
  • Author
  • Author URI
  • Description
  • Version
  • Tags

This file must be customized to include the relevant details of your custom theme. Please note: Use of this file to store stylesheet rules is deprecated. Your theme’s custom CSS (and/or LESS) rules belong in css/override.css or less/override.less.

screenshot.png
The image used to represent a thumbnail screenshot of the theme, shown on the calendar theme selection screen.

img/...
The minimum required image files used by all calendar themes. Feel free to replace any contained images with custom versions in your own theme. (Also please refer to Vortex’s img directory to find out what other images you can optionally override in your theme.)

functions.php
For advanced users, a place to insert arbitrary PHP code to run when the page is initialized, and should usually be left untouched. See the WordPress codex article for more information.

index.php
An empty file, not used, but required to be present in all themes by the theme engine.

twig/agenda-buttons.twig
Agenda view extra toolbar buttons

twig/agenda-widget.twig
Upcoming Events widget

twig/agenda.twig
Agenda view

twig/calendar.twig
Container of the calendar toolbars and the active view

twig/categories-select.twig
Front End Submissions Add-on: Category selector for the Post Your Event form

twig/categories.twig
Category filter dropdown

twig/contribution-buttons.twig
Front End Submissions Add-on: Add Your Calendar and Post Your Event buttons

twig/create-event-form.twig
Front End Submissions Add-on: Post Your Event front-end form

twig/create-event-message.twig
Front End Submissions Add-on: Post Your Event message after submission

twig/create-event-modal.twig
Front End Submissions Add-on: Post Your Event modal dialog skeleton

twig/datepicker_link.twig
Datepicker toolbar button

twig/event-excerpt.twig
Event details when displayed as WordPress excerpts

twig/event-map.twig
Google Map section of event details

twig/event-popup.twig
Event popover seen in Month, Week, Day, and Agenda Widget views

twig/event-single-footer.twig
Footer of the event details page

twig/event-single-full.twig
Structured event details when retrieved remotely

twig/event-single.twig
Event details when displayed as a single WordPress page

twig/filter-menu.twig
Calendar toolbar containing filter dropdowns

twig/month.twig
Month view

twig/navigation.twig
Title and navigation toolbar of individual calendar views

twig/oneday.twig
Day view

twig/pagination.twig
Pagination buttons of a calendar view

twig/posterboard.twig
Extended Views Add-on: Posterboard view

twig/recurrence.twig
Recurrence info display on event details page

twig/stream.twig
Extended Views Add-on: Stream view

twig/submit-ics-modal.twig
Front End Submissions Add-on: Add Your Calendar modal dialog and form

twig/subscribe-buttons.twig
Subscribe buttons

twig/tags-select.twig
Front End Submissions Add-on: Tag selector for the Post Your Event form

twig/tags.twig
Tag filter dropdown

twig/views_dropdown.twig
Calendar views dropdown

twig/week.twig
Week view

twig/weekday.base.twig
Base template extended by Week and Day views

twig/widget.twig
Agenda widget wrapper markup

 

Important Note: If you do not see the changes on the front end, please navigate to Dashboard > Events > Theme Options and hit Save Options (this regenerates the CSS).