calendar

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 inside of a Container element.

Each event in the slideshow displays the event title, date, time and location. The visitor can click on an event title to the full details of the event in a pop-up or click on the ‘View Full Calendar’ link below the events 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 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 and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Design’ at the bottom of the ‘Edit Container 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 8 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.