Calendar 5 Instructions

The ‘Upcoming Events’ panel displays a visually engaging slideshow of upcoming events from one or more school calendars. It is powered by a single Calendar element that is set to 'List', inside of a Container element.

Each event in the slideshow displays the event title, date, time, location and a 'Read More' button. The visitor can click on an event title or 'Read More' button to open the full details of the event in a pop-up. They can also click on the ‘View Full Calendar’ link below the panel title to visit the full calendar page on your website.

To update the title of the ‘Upcoming Events’ panel:

1. Go to the ’Pages’ panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Upcoming Events’ panel.
5. Hover over the Container element displaying the panel title and click on the ‘gear’ icon in the top-right corner.
6. Click into the ‘Title’ field in the ‘Edit Container Element Settings’ window.
7. Update the text or click on the blue toggle to the right of the ‘Title’ field to hide the element title.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

To update the ‘View Full Calendar’ link below the ‘Upcoming Events’ panel title:

1. Go to the Pages panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Upcoming Events’ panel.
5. Hover over the Container element displaying the slideshow and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Design’ at the bottom of the ‘Edit Calendar Element Settings’ window.
7. Click into the ‘Header Content’ content editor
8. Update the existing link text, making sure not to remove the link applied to it.
9. Right-click on the link and choose ‘Edit Link’ from the action menu.
10. Select a link type from the top of the ‘Link’ properties window.
11. Update the link settings and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens a page on an external website.
12. Make sure the ‘button-arrow’ class is still applied in the ‘Class’ field.
13. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
14. Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.

The ‘Upcoming Events’ slideshow is powered by a single Calendar element that displays up to nine upcoming events that take place within the next 30 days from one or more selected calendars in the Calendar Manager.

To reconfigure the calendars on display in this slideshow:

1. Go to the ’Pages’ panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Upcoming Events’ panel.
5. Hover over the Calendar element and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ General Settings’ in the ‘Edit Calendar Element Settings’ window.
7. Click on the ‘Calendars’ dropdown and select the calendars that you want to feed into the slideshow.
8. Optionally update the fields specifying the number of items to display and the date range this should be restricted to.
9. Click on the ‘Save’ button at the bottom of the ‘Edit Calendar Element Settings’ window.

Note: When updating this Calendar element, please only update the settings recommended in these instructions. All of the other settings have been configured to ensure the calendar displays with the correct presentation.

Tip: To learn how to add new events to a calendar, please visit the Knowledge base article on Uploading Calendar Events.