Calendar

The ‘Upcoming Events’ panel displays a selection of upcoming event highlights and consists of the following features inside a Container element:

• ‘Upcoming Events’ Slideshow: A visually engaging slideshow powered by a single Calendar element that displays upcoming events from one or more school calendars. Each event in the slideshow displays the event title, date, time, location and status. The visitor can click on an event title to the full details of the event in a pop-up

• Featured Callout Box: A supporting callout box that displays to the right of the ‘Upcoming Events’ slideshow and can be used to promote an upcoming activity, quick link or announcement at the school. It displays an image, caption and button link and is powered by a single Resource element. 

• ‘View Full Calendar’ Button: A button link above the ‘Upcoming Events’ slideshow that takes the visitor to the full calendar page on your website.

   

The following pixel dimensions are recommended for the images uploaded to the Resources module for this panel. Following these guidelines will help you to achieve an ideal balance of visual quality and loading speed for your content:

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 Calendar 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 Calendar 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 Calendar Element Settings’ window.

The ‘Upcoming Events’ slideshow is powered by a single Calendar element that displays up to 20 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.

The featured callout box displays to the right of the ‘Upcoming Events’ slideshow is powered by a Resource element.

To update the featured callout box, begin by uploading a new image:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Resources’ tab.
3. Create or select an existing folder for your new thumbnail in the ‘Public’ directory
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the upload options available and upload the new image.
6. Once the upload is complete, update the following image properties in the ‘Edit Resource Details’ window:
1. Click into the ‘Title’ field and add a short title for your image (this is for internal use and will not be seen by the visitor).
2. Click into the ‘Alt Text’ field and add a short description explaining the contents of the image. This is used by screen reading software to describe the image for visitors who are unable to see it.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended size for a callout box image is 800px (wide) by 533px (high). 

With the image uploaded, update the content in the featured callout box:

1. Go to the Pages panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom-left of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Upcoming Events’ panel.
5. Hover over the Resource element displaying the featured callout box and click on the ‘gear’ icon in the top-right corner.
6. Click on the ‘Browse’ button below the ‘Title’ field.
7. Select the image you have uploaded in the ‘Pick a Resource’ window.
8. Click on ‘+ Image’ in the ‘Edit Post Element Settings’ window.
9. Click into the content editor under the ‘Caption’ field and update the existing text description. This will display below the image in the callout box and we recommend adding a maximum of 15 words to maintain consistency with the original design.
10. Click on ‘+ Design’ at the bottom of the ‘Edit Resource Element Settings’ window.
11. Update the existing button link text, making sure not to remove the link applied to it.
12. Right-click on the link and choose ‘Edit Link’ from the action menu.
13. Select a link type from the top of the ‘Link’ properties window.
14. 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.
15. Make sure the ‘button-1’ class is still applied in the ‘Class’ field.
16. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
17. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

To update the ‘View Full Calendar’ link above the ‘Upcoming Events’ 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 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.