Calendar
Upcoming Events
Calendar 2
- Calendar Panel Overview
- Panel Image Sizes
- Update the Panel Title
- Configure the Calendar Events on Display in the Slideshow
- Update the ‘View Full Calendar’ Link
- Update the Image in the Background of the Panel
Calendar Panel Overview
The ‘Calendar’ panel displays a visually engaging row of up to 5 upcoming events from one or more school calendars. This is powered by a single Calendar element inside of a Container element with a single image in the panel background.
Each event on show within this panel displays the event title, date, time and location. The visitor can click on an event title to view the full details of the event in a pop-up or click on the ‘View Full Calendar’ link below the panel title to visit the full calendar page on your website.
Panel Image Sizes
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:
Image Area | Width (pixels) | Height (pixels) |
---|---|---|
Panel Background Image* | 2200 | 1497 |
*The panel background image will always fill the full width and height of the ‘Calendar’ panel, but the aspect ratio of this panel changes depending on the device (with a greater height on mobile devices in comparison to desktop). To account for this, we have a recommended a for the image that serves as an average across these different device sizes. For best results, we also recommend keeping the subject of the image in the center of the composition (vertically) to account for automatic cropping that may be required at the top and bottom on wider devices.
Update the Panel Title
To update the title of the ‘Calendar’ panel:
- Go to the ’Pages’ panel and select the homepage.
- Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
- Refresh the page in your web browser.
- Scroll to the ‘Calendar’ panel.
- Hover over the Container element displaying the panel title and click on the ‘gear’ icon in the top-right corner.
- Click into the ‘Title’ field in the ‘Edit Container Element Settings’ window.
- Update the text or click on the blue toggle to the right of the ‘Title’ field to hide the element title.
- Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.
Configure the Calendar Events on Display in the Slideshow
The ‘Calendar’ panel is powered by a single Calendar element that displays up to five upcoming events taking 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:
- Go to the ’Pages’ panel and select the homepage.
- Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
- Refresh the page in your web browser.
- Scroll to the ‘Calendar’ panel.
- Hover over the Calendar element and click on the ‘gear’ icon in the top-right corner.
- Click on ‘+ General Settings’ in the ‘Edit Calendar Element Settings’ window.
- Click on the ‘Calendars’ dropdown and select the calendars that you want to feed into the slideshow.
- Optionally update the fields specifying the number of items to display and the date range this should be restricted to.
- 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.
Update the ‘View Full Calendar’ Link
To update the ‘View Full Calendar’ link below the panel title:
- Go to the Pages panel and select the homepage.
- Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
- Refresh the page in your web browser.
- Scroll to the ‘Calendar’ panel.
- Hover over the Container element and click on the ‘gear’ icon in the top-right corner.
- Click on ‘+ Design’ at the bottom of the ‘Edit Container Element Settings’ window.
- Click into the ‘Header Content’ content editor
- Update the existing link text, making sure not to remove the link applied to it.
- Right-click on the link and choose ‘Edit Link’ from the action menu.
- Select a link type from the top of the ‘Link’ properties window.
- 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.
- Make sure the ‘button-arrow’ class is still applied in the ‘Class’ field.
- Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
- Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.
Update the Image in the Background of the Panel
The ‘Calendar’ panel displays a large image in the background to make the content more visually engaging. This image displays with a semi-transparent dark overlay in front of it to ensure the text is easy to read in the foreground of the panel.
To update the background image, begin by uploading a new image:
- Click on the ‘folder’ icon button in Composer’s left navigation to access Resources.
- Click on the ‘Resources’ tab.
- Create or select an existing folder for your image in the ‘Public’ directory
- Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
- Choose from the upload options available and upload the new image.
- Once the upload is complete, update the following image properties in the ‘Edit Resource Details’ window:
- 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).
- 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.
- Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.
Image Size: The recommended size for the image in the background of the ‘Upcoming Event’s panel is 2200px (wide) by 1497px (high).
Note: The panel background image will always fill the full width and height of the ‘Calendar’ panel, but the aspect ratio of this panel changes depending on the device (with a greater height on mobile devices in comparison to desktop). To account for this, we have a recommended a for the image that serves as an average across these different device sizes. For best results, we also recommend keeping the subject of the image in the center of the composition (vertically) to account for automatic cropping that may be required at the top and bottom on wider devices.
With the image uploaded, add it to the background of the ‘Calendar’ panel:
- Go to the ’Pages’ panel and select the homepage.
- Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
- Refresh the page in your web browser.
- Scroll to the ‘Calendar’ panel.
- Hover over the Container element displaying the panel title and click on the ‘gear’ icon in the top-right corner.
- Click on ‘+ Design’ at the bottom of the ‘Edit Container
- Click on the ‘Browse’ button under the ‘Background Image’ field.
- Select the uploaded image in the ‘Select a Background Image’ window.
- Click on the ‘Save’ button at the bottom of the ‘Edit Container Element Settings’ window.