Reusing Widgets with Inline Settings

There’s no limit to the number of LiveWhale Calendar widgets you can create—however, there may be cases where you find it more efficient to re-use one saved widget rather than creating many copies. In those cases, you can alter certain criteria inline without having to make a whole new widget.

In your widget code, find the string that looks like data-options=”id=123&format=html”. You can add almost any widget setting to that data-options string separated by ampersands. For example,

  • data-options=”id=123&format=html&group=Music
  • data-options=”id=123&format=html&category=Performances&exclude_tag=Private
  • data-options=”id=123&format=html&start_date=2024-01-01
  • data-options=”id=123&format=html&tag=soccer|hockey|basketball“ (use | to separate multiple values)

You could use this to divide up the results of a single widget by date:

<h3>2023 Events</h3>
<div class="lwcw" data-options="id=123&format=html&start_date=2023-01-01&end_date=2023-12-31"></div>
<h3>2012 Events</h3>
<div class="lwcw" data-options="id=123&format=html&start_date=2022-01-01&end_date=2022-12-31"></div>

Note: Use the date format YYYY-MM-DD when providing start_date and end_date to avoid ambiguity. More about start_date and end_date formatting here.

Or you can use one saved widget across many different pages and groups:

<div class="lwcw" data-options="id=123&format=html&group=Academic Calendar"></div>
<div class="lwcw" data-options="id=123&format=html&group=Biology"></div>
<div class="lwcw" data-options="id=123&format=html&group=Chemistry"></div>

Using the above options, a number of LiveWhale Calendar schools choose to simply make one or two global widgets (a list view and a “featured” card view, say) and then add components to their main site CMS that lets editors select a widget style and filter by their chosen group or tag without ever having to copy/paste the HTML manually.

More about working with widgets.

On this page