On this page

Calendar Components

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.)


View Components

Component Description
lw_cal_all.html The “all upcoming events” view
lw_cal_day.html The “day” view
lw_cal_event.html An individual event listing in the day/week/all views
lw_cal_event_detail.html An individual event page
lw_cal_month.html The “month” view
lw_cal_month_day.html An individual day in the month view
lw_cal_week.html The “week” view
lw_cal_list.html A list of events (used in week/all views)

Optional View Components

Component Description
lw_cal_feature.html Featured event listing <div id="lw_cal_feature"></div>
lw_cal_feature_item.html An individual event in the featured listing
lw_cal_feature_top.html The first event in the featured listing
lw_cal_feed_builder.html Tool for building subscription feeds ( view/feed_builder )
lw_cal_feed_selector.html Individual selector in the feed_builder tool
lw_cal_home.html The “home” view ( view/home )
lw_cal_home_event.html An individual event listing in the home view

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

Component Description
lw_cal_calendars.html “Calendar:” drop-down navigation pointing to all your group calendars
lw_cal_categories.html “Show Only:” checkbox menu for filtering by Event Type
lw_cal_categories_audience.html “Show Only:” checkbox menu for filtering by Event Type: Audience
lw_cal_categories_campus.html “Show Only:” checkbox menu for filtering by Event Type: Campus
lw_cal_date_selector.html Drop-down navigation for jumping to a nearby date or date range
lw_cal_event_images.html Image, caption, and credit for all event images
lw_cal_event_related_content.html Links to all content related to an event
lw_cal_event_share_icons.html Social media sharing icons
lw_cal_groups.html “Calendar:” checkbox navigation for filtering by group
lw_cal_header.html Header containing scroll_link, date_selector, header text, and “currently showing” text
lw_cal_locations.html “Location:” checkbox menu for filtering by location
lw_cal_mini_cal.html Mini calendar
lw_cal_no_results.html Text that appears when no events are found
lw_cal_scroll_link.html Previous/next arrows
lw_cal_search.html Search header and input
lw_cal_subscribe.html Subscribe button
lw_cal_subscription_menu.html Subcribe button pop-up
lw_cal_tags.html Menu for filtering by tags
lw_cal_timezone_menu.html Pop-up menu to change your timezone
lw_cal_view_selector.html Menu for day/week/month/all views

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

Variable Name Description Example
id Event ID 123456
href Details URL /event/123456-my-event-title
title Title My Event Title
title_link Event List Only: Title wrapped in link to event details <a href="/event/123456-my-event-title">My Event Title</a>
summary Summary <p>This is my event summary.</p>
group_title Public name of the event’s group
(use group_fullname to get the system name)
Department of Biology
add_to_google Add to Google Calendar URL https://www.google.com/calendar/event?action=
ical_download_href Add to iCal URL //calendar.myschool.edu/live/ical/events/id/123456
is_canceled True when event has been marked canceled 1
cost_type Event cost type (Free, Event Cost, Suggested Donation, or blank for Other) Event Cost
cost Event cost amount $15
description Event Details Only: Description <p>Full HTML of event details...</p>
contact_info Event Details Only: Contact Info John Smith, jsmith@myschool.edu

Date and Time

Variable Name Description Example
date_title Formatted start date Mon<span>day</span>, Jun<span>e</span> 20<span>, 2022</span>
time Full HTML of time display, includes date range if event repeats or spans multiple days (the same value can be called using the date_time variable in Event Details component) <span class=\"lw_start_time\">9:00am</span> - <span class=\"lw_end_time\">10:30am</span> <span class=\"lw_start_date\">Jun<span>e</span> 20</span> - <span class=\"lw_end_date\">Jun<span>e</span> 21</span> <span class=\"lw_cal_tz_abbrv tz_editable\">EDT</span>
repeats How often does event repeat (daily, weekly, monthly, yearly, M-F, M/W/F, T/TH) weekly
repeats_start Date of first repeating event June 20
repeats_end Date of last repeating event June 29
is_all_day True when event is all day 1
is_multi_day True when event spans multiple days 1
is_first_multi_day Event List Only: True on the first encountered instance of a multi-day event 1

Date and Time  (Advanced)

Variable Name Description Example
date_start Start date (MM/DD/YYYY) 06/20/2022
date_start_day Start date (day) 20
date_start_day_of_week Start date (day of week) Monday
date_start_month Start date (month) June
date_start_month_short Start date (abbreviated month) Jun
date_start_year Start date (year) 2022
datetime_start Start date (datetime) 2022-06-20T00:00
date_end End date (MM/DD/YYYY) 06/21/2022
date_end_day End date (day) 21
date_end_day_of_week End date (day of week) Tuesday
date_end_month End date (month) June
date_end_month_short End date (abbreviated month) Jun
date_end_year End date (year) 2022
datetime_end End date (datetime) 2022-06-21T10:30
ts_start Start date/time (Unix timestamp) 1655730000
ts_end End date/time (Unix timestamp) 1655730000
time_start Start time 9:00am
time_end End time 10:30am
tz Timezone area (as defined by PHP) America/New_York
tz_abbrv Timezone abbreviation EDT
tz_offset Start time timezone offset -14400
tz2_offset End time timezone offset -14400
user_abbrv Timezone abbreviation of site visitor EDT
user_offset Timezone offset of site visitor -14400


Variable Name Description Example
image_raw Event List Only: Full HTML markup of image <picture class="lw_image">...
image Event Details Only: The markup of a single image or gallery (see below) <picture...
images Event Details Only: An array of images used to generate the slideshow markup […]
image_src The Image URL https://…
thumb_width The image width 200
thumb_height The image height 200
custom_remote_image_url If pulling from a Linked Calendar, the URL of the image https://…
custom_remote_image_caption If pulling from a Linked Calendar, the caption of the image My image caption

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.


Variable Name Description Example
has_map True when a map is present 1
location Location name University Library
latitude Location Latitude 41.821943
longitude Location Longitude -71.416989

Online Events

Variable Name Description Example
is_online True when event is online 1
online_url Event web address http://zoom.us/123456
online_button_label Join Event button text My Button Text
online_instructions Special instructions? My special instructions
online_type Online only or Hybrid Online only


Variable Name Description Example
tags Array of starred tags [‘Humanities’, ‘Arts & Sciences’]
tag_links HTML list of links to each starred tag (called tags_calendar or tags_starred_calendar on Event Details View) <a class=\"lw_cal_app_link\" href="all/tags/Humanities">Humanities</a>, <a class="lw_cal_app_link" href="view/all/tags/Arts%20%26amp%3B%20Sciences">Arts & Sciences</a>"
tag_classes All starred tags formatted as CSS class names lw_tag_humanities lw_tag_arts_sciences

Categories / Event Types

Variable Name Description Example
categories Array of event types [‘Student Events’, ‘Admissions’, ‘Arts & Performance’]
categories_audience Array of audience event types [‘Students’, ‘Faculty’, ‘Alumni’, ‘Prospective Students’]
categories_campus Array of campus event types [‘Main Campus’]
category_links HTML list of links to each event type <a href=\"all/categories/Student%20Events\">Student Events</a>, <a href=\"all/categories/Admissions\">Admissions</a>, <a href=\"all/categories/Arts%20%26amp%3B%20Performance\">Arts & Performance</a>
category_audience_links HTML list of links to each audience event type <a href=\"all/categories/Students\">Students</a>, <a href=\"all/categories/Faculty\">Faculty</a>, <a href=\"all/categories/Alumni\">Alumni</a>, <a href=\"all/categories/Prospective%20Students\">Prospective Students</a>
category_campus_links HTML list of links to each campus event type <a href=\"all/categories/Main%20Campus\">Main Campus</a>
category_classes All event types formatted as CSS class names lw_category_student_events lw_category_admissions lw_category_arts_performance lw_category_students lw_category_faculty lw_category_alumni lw_category_prospective_students lw_category_main_campus

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>
{[ }); ]}

You can also link to more events of that type by linking to /all/categories/Category Name . Note, you’ll need to include class="lw_cal_app_link" anytime you create a link tag from inside of another event component that’s meant to refresh the main calendar view.

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