In This Article

Event Calendars: Navigating a public calendar using the card, list, & monthly calendar views

The public calendar page has three available views, each with several options for filtering your upcoming events. The filters can be customized to display in a row at the top of the page, or in a column on the left side of the page.

Left/Vertical display

Calendar filter display example for left display

Across-the-top/Horizontal display

Calendar filter display example for top, part 2


Card View

This view will display each event as a card, arranged in a grid.

  • Each card will display the date, time, campus, and location for each event, along with the title, description, and (if registration is enabled) the number of seats remaining.
  • Clicking on the event title will take users to the full event page.

 Customizing the cards

Hiding the ribbon

If you would prefer to hide the green "Seats Left" ribbon, add the following to your custom CSS code under Admin > Look & Feel:

<style>.s-lc-ribbon { display:none; }</style>

Hiding the color stripe

If you would prefer to hide the color stripe below the event heading, add the following to your custom CSS code:

<style>.s-lc-eventcard-event-color-bar { display: none; }</style>

List View

This view will display a list of events, including the title, description, date, time, location, audience, and categories.

  • If an event was given a featured image, it will also display as a thumbnail.
  • Clicking on the event title will take users to the full event page.

Calendar View

This view will display your events in a monthly calendar, each event displaying the title, time, and location.

  • Hovering over an event will reveal a popover containing more detailed information.
  • Clicking on the event title will take users to the full event page.

Related Articles