Calendar App Templates

Each page within the calendar app has its own template to display that page's content.

Where to save template files

Template files will go in a folder that has the same name as the app instance key. For example, if the calendar app instance key is "calendar" then you would put all of your template files within the calendar folder inside the templates folder.

If your theme was called "Custom" then this would be an example folder structure:

  • themes
    • custom
      • theme.json
      • templates
        • home.twig
        • one-column.twig
        • two-column.twig
        • calendar
          • account-event-registration.twig
          • account-event-registrations.twig
          • add-event.twig
          • agenda.twig
          • categories.twig
          • category.twig
          • edit-event.twig
          • event.twig
          • event-registration.twig
          • grid.twig
          • home.twig
          • list.twig
          • search.twig
          • search-results.twig
          • tag.twig
          • tags.twig

Calendar pages and their templates

Below is the list of calendar app pages and the name of the template file that you should create.

Calendar home

The calendar home page often shows the upcoming events for the current month (or whatever the default time range your site is configured for).

Template name: home.twig

Account registrations

This page shows the list of registrations that the logged in account holder has made.

Template name: account-event-registrations.twig

Account registration detail

This page shows the details for an individual event registration for the logged in account holder.

Template name: account-event-registration.twig

Agenda event view

This page shows the events in an agenda view where the events are organized by day. Under each day is a list of events for that day.

There are three types of views for displaying events: agenda, grid, and list. They can be configured under Calendar -> Settings -> Event List Pages

Template: agenda.twig

Categories list

This page shows the list of categories.

Template name: categories.twig

Category detail

This page shows the detail information for an individual category. The events assigned to the category are often shown.

Template name: category.twig

Event detail

This page shows the full details for an individual calendar event.

Template name: event.twig

Add event

This page is used to show a form on the public site that allows visitors to add a new event to the calendar. It can be restricted to only allow logged in users add events. Events added through this form can also be configured to require admin approval before displaying in the list of events.

Template name: add-event.twig

Edit event

This is a public page to allow visitors to edit an individual event. Under Calendar -> Settings you can configure whether or not someone has to be logged in to make changes.

Template: edit-event.twig

Grid event view

This page shows the events in a grid view. This view is used to display events in a typical calendar grid. Useful if there are not too many events for a single day.

There are three types of views for displaying events: agenda, grid, and list. They can be configured under Calendar -> Settings -> Event List Pages

Template: grid.twig

List event view

This page shows the events in a simple chronological list.

There are three types of views for displaying events: agenda, grid, and list. They can be configured under Calendar -> Settings -> Event List Pages

Template: list.twig

Registration

This page shows the registration form for an individual event.

Template: event-registration.twig

Search

The search page can be used to show the form to search for events.

Template name: search.twig

Search results

The search results page can show the results of a calendar search. It can show a paginated list of matching events.

Template name: search-results.twig

Tags list

This page shows the list of tags.

Template name: tags.twig

Tag detail

This page shows the detail information for an individual tag. The events assigned to the tag are often shown.

Template name: tag.twig