Use the following code snippets to apply horizontal formatting to a LiveWhale widget.
By default, a widget created in the LiveWhale calendar CMS will have basic date, time, and event description text. To apply our site design's event list horizontal formatting you'll need to edit the widget settings in LiveWhale's widget form. The widget form allows you to make many customizations to the event content, such as the number of events, categories, tags, and other selection criteria. The changes described here won't effect the content of the events list, just the formatting.
Basic entries
In the Basic section, follow the instructions as outlined in the image below.
- Add "3" in the "Show up to" box.
- Add "false" in the "with pagination after" box.
- Add your calendar group name in the "from the group(s)" box.
- Leave all the other boxes in this section blank.
Changing the format
We'll need to make three changes: hide the default display of the event date, add custom formatting for the date itself, and add custom formatting for the event display.
Hide the default event date display
We're including the event date in our custom formatting, so you can switch the default setting for "Hide date headers?" under the Format section from "no" to "yes".
Set the custom date format
Our widget formats the date as a calendar page icon, so copy the html text below and paste that into the "Display dates in the format" field. Otherwise, the default would be %F %j.
<div class="events-month">%M</div> <div class="events-day">%j</div>
Set the custom event formatting
(1) Set the "Widget markup style" to "Clean markup".
(2) We need to apply formatting for the events. Copy and paste the following code into the "HTML format for each item in widget" text block under Format.
<div class="text-left col-md-4 mb-3 mt-4">
<div>{image}</div>
<div class="bg-white pt-0 px-3 pb-3 h-50">
<div class="d-inline-block">
<div class="mb-3 bg-primary text-white text-uppercase font-weight-bold px-2 py-1">
{date}
</div>
</div>
<div class="h5">{title}</div>
<div style="overflow-wrap:break-word"><strong>{start_time}, {location}</strong></div>
<p style="overflow-wrap:break-word">{summary}</p>
</div>
</div>
(3) Copy and paste the following code into the "Wrap widget output with markup?" text block under Format.
<div class="row mb-3">
{widget}
</div>