StratusCal examples

Calendars, schedules, tables, and cards

Example 1

Standard calendar view

Great for viewing multiple events within a familiar calendar. Recommended when your calendar has many events.

Shown using "Slate (Blue-Gray)" theme in "Light" mode.

Embed code

<script src="https://files.stratuscal.com/system/components/stratuscal.js"></script>
<stratus-cal data-url="https://files.stratuscal.com/d3ee4632-75c5-49bd-9f98-49d16406494d.json"></stratus-cal>

Example 2

Agenda view

An agenda view only displays events and does not display days without events. Recommended for schedules or agendas with fewer events.

Shown using "Slate (Blue-Gray)" theme in "Dark" mode.

Embed code

<script src="https://files.stratuscal.com/system/components/stratuscal.js"></script>
<stratus-cal data-url="https://files.stratuscal.com/29a82733-8bd9-413c-8ad4-547e551a05ef.json"></stratus-cal>

Example 3

Cards view

Cards are an elegant, to-the-point, and multi-purpose way to present information.

Shown using "Minimal" theme in "Light" mode.

Embed code

<script src="https://files.stratuscal.com/system/components/stratuscal.js"></script>
<stratus-cal data-url="https://files.stratuscal.com/22d7b470-99c1-4167-8981-7d8687c0afa5.json"></stratus-cal>

Example 4

More features enabled

Here is a stratusCal that lists the meals of the day used to showcase more features.

  • Allow end users to switch views (Agenda, Calendar, or Cards)
  • Sorting (in Agenda or Cards view) by Time or by Meal

Shown using "Purple" theme in "Light" mode.

Embed code

<script src="https://files.stratuscal.com/system/components/stratuscal.js"></script>
<stratus-cal data-url="https://files.stratuscal.com/9794ed8f-7aee-45a0-8952-2d96b98022e8.json"></stratus-cal>

Example 5

Table

A stratusCal doesn't have to be a calendar. Any tabular data can be presented as a table, like this team directory. All columns are sortable.

Shown using "Empire (Navy/Red)" theme in "Light" mode.

Embed code

<script src="https://files.stratuscal.com/system/components/stratuscal.js"></script>
<stratus-cal data-url="https://files.stratuscal.com/ea2a331f-3a5c-448d-8021-77e377cd3d4b.json"></stratus-cal>