Horizontal Calendar Class enhancement

You can use the Horizontal Calendar Class enhancement to change how the Calendar Events widget displays upcoming events.

Calendar Events widget using the Horizontal Calendar Class enhancement.

Sections in this article: 

Considerations

  • Supported layout: This enhancement only works with the Upcoming layout of a Calendar Events widget. 
  • Recommended row width: This enhancement works best when used on a Calendar Events widget that occupies all three columns of a page. Using the default page width, this will result in 5 events displayed horizontally, with additional events appearing on a new row.
  • Other enhancements: Use with the Hide Load More Enhancement to provide a concise overview of upcoming events.

Set up the enhancement

To set up the enhancement for the first time, follow the steps below. To request this enhancement to be set up in your digital workplace, contact our Igloo team.

Add enhancement code to the header

Warning 

Adding code that contains errors can disrupt the functionality of your digital workplace. Use caution when adding code to this area.

Add the following code to the header of your digital workplace:

<!-- Horizontal Calendar Class enhancement begins -->
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/HorizontalCalendarClass.css" />
<!-- Horizontal Calendar Class enhancement ends-->

Configure the enhancement

The Horizontal Calendar Class enhancement can be used with any Calendar Events widget in Upcoming Layout. To configure the widget: 

  1. Navigate to the page you want to edit. 
  2. Select Actions and then Edit. 
  3. Place a Calendar Events widget or select Edit on the widget. 
  4. Configure the widget as needed in the Options tab. 
  5. In the Layout tab, select Upcoming. 
  6. In the Appearance tab, in Class, enter the following: horizontal-calendar.
  7. Select Update.
  8. Select Publish Page.  

Turn the enhancement on

Once the code has been placed, the enhancement is ready to be used.  If you have already turned the enhancement off following the steps in the Turn the enhancement off section below, you can remove <!-- before and  --> after the middle two lines and save the changes to the header. 

Turn the enhancement off

To turn the enhancement off, you can remove the code entirely or add <!-- before and  --> after the middle two lines, as shown below, and save the changes to the header. 

<!-- Horizontal Calendar Class enhancement -->
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/HorizontalCalendarClass.css" />
<!-- Horizontal Calendar Class enhancement ends-->

Changes to:

<!-- Horizontal Calendar Class enhancement -->
<!-- <link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/HorizontalCalendarClass.css" />
 -->
<!-- Horizontal Calendar Class enhancement ends-->

Use this enhancement

View events

Members can perform the following actions when using the enhancement: 

  • Select the event's title to view the event. 
  • Select Load More to view more events.