While templates and includes dictate the HTML of items around your calendar, you’ll edit your calendar’s components to tweak the appearance and functionality of individual pieces of the calendar, like the event view, day view, date selector, and more.

If you copy/edit any of the following to /_ingredients/themes/global/components/calendar/, they will override the defaults from the core theme. (For some clients, we’ve copied them already to /_ingredients/themes/global/components/move_to_calendar_to_customize/ as a courtesy.)

Components

View Components

Optional View Components

Note: Your calendar installation might not support or have styling for the above optional views. Feel free to get in touch if you’re interested in enabling the home, featured, or feed_builder views.

UI Components

Calendar Component Variables

When editing the above components, you can start off by rearranging the options provided in the core component. You’ll see variables being added in double-curly brackets:

{{ title_link }}

As well as some simple JavaScript logic using curly-and-square brackets, where variables are prefixed with obj. :

{[ if (obj.is_repeating) { ]}
        Repeats {{ repeats }} {{ until }}
{[ } ]}

Note: In LiveWhale 2.0+, variables inside of {[ ]} must be prefixed with obj. in order to be included in your event results. This is due to performance optimizations that provide the event list and event details views with only the variables you are using in your component. 

Following are the variables available when customizing the Event List (lw_cal_event.html) and Event Details (lw_cal_event_detail.html) components.

Event Basics

Date and Time

Date and Time  (Advanced)

Image

When using {{ image }} in your Event Details component, the image or slideshow that’s provided (depending on if the event has one or multiple images attached) is provided by the default gallery in LiveWhale 2.0+.

You can fully customize the default gallery to change the way that {{ image }} appears, or you can override certain settings just for the calendar in your calendar widget settings.

Location

Online Events

Tags

Categories / Event Types

If you’d like to format the event types using your own markup, you can use code like this to loop over the array:

{[ _.each(obj.categories, function(category) { ]}
    <span class="event_type">{{ category }}</strong>
{[ }); ]}

{[ _.each(obj.categories, function(category) { ]}
    <a href="/all/categories/{{ category }}" class="lw_cal_app_link">{{ category }}</a>
{[ }); ]}