Calendar Component

The calendar component allows you to display public events on your AEM website using a feed from an SFU Mail (Outlook Web App) calendar. Note that your Exchange calendar must be set to 'Public' in order to display it using the AEM Calendar component.

On the left hand side of the interface, the Calendar component displays the monthly grid at the top and the event list for that month at the bottom. The right hand side displays the upcoming event or any user-selected event from the event list.

Clicking on any day with an event on the calendar grid filters the event list below to show only the events within the selected day.

When it should be used?

Use the Calendar component to view the monthly events associated with the calendar you have subscribed to via Connect.

Using the Calendar Component

To use the Calendar Component, you will first have to get the feed URL of the SFU Mail calendar. This is the address where you can view the public events of the SFU Mail calendar.

Making the calendar public

In order for your calendar to be displayed on a public webpage, it needs to be set as 'public' in Exchange.

  1. Visit SFU Mail (Outlook Web App) at https://mail.sfu.ca
  2. Locate the calendar you want to display in AEM under Your calendars.
  3. Right-click the calendar and choose Permissions...
  4. In the Public calendar section select Full details from the dropdown menu
  5. Click Save. The calendar is now set to public.
  6. Right-click on the calendar as you did in step 3, and choose Permissions... The view and subscribe links for the calendar will now be visible.
  7. Right-click on the Subscribe to calendar link and choose Copy link address. The URL for the public calendar is now copied to your browser's clipboard.
  8. Click Save

Adding events to your calendar

The next step is to create events in the shared calendar. A sample entry is displayed below.

By default, an SFU Mail calendar event should include a subject, date, and location. Additional details from your event can be formatted to stand out, such as fees, dress code, and presenters. Each event will include:

  • The description  usually a small paragraph explaining the event; and
  • Details you would like to highlight. There are two steps for creating details in an event. First, you must press the return key on your keyboard three times after the description. Second, each detail must be entered on its own line and be formatted in the following way:
     detail: value

Note: Using "Location" as one of the details will override the entry in the Location field in Connect.

  • If you have an event page, you can create a link to it by using the "link" keyword for the detail, and the event page URL for the value. Make sure to include "http://" or "https://" in the URL. For example, use http://www.sfu.ca instead of www.sfu.ca. This URL will be hyperlinked in the event title and will be shown as a More Info button the user can click to visit the event page.

Example of a details section.

Fee: This event is free
Extra info: Lunch will be provided
link: https://www.sfu.ca/lunch

Adding a Calendar Component to your page

  1. Open the page in the Editing Window.
  2. Under the Social tab in the Sidekick, drag and drop the Calendar component onto the page.
  3. Right-click the Calendar component and select Edit.
  4. In the URLs field, paste the URL you copied to your clipboard. If you need to add more calendars, click the Add Item button and enter its View URL in the newly created field.
  5. Click the OK button to save the changes. The page will refresh and the calendar events will appear.

Troubleshooting Tips

If you are having trouble displaying events, the Connect calendar is probably not publicly shared. Please contact the calendar owner and have them change the sharing settings.