What are Elements?
Elements are the fundamental building blocks of your Composer pages. Learn more about how elements work in the article, "Understanding elements" and read about each of the 5 tabs in the element library: Standard, Module, Layout, Social, and Shared.
In this Article
Calendar element overview
Configure your calendars in either the New Calendar module or Calendar Manager so that then you can use a Calendar element to display these events in a variety of ways on your website!
Element settings
In addition to the common element settings, the Calendar element includes the following configuration options. Use the buttons at the top of the element settings to switch between the List, Grid, Slideshow, and Event formats.
Here are the settings for each different format, broken up into tabs for easy access.
List format settings
The List format shows events in a “digest” format.
General Settings
-
Calendars: Select one or more calendars. Public events from those calendars will be displayed in the element.
-
Display LMS/Group Calendars: Select this checkbox to display calendars associated with specific classes or other groups on this element.
-
Display Athletic Events: Select this checkbox to display upcoming events from Athletics Manager. When the checkbox is selected, a dropdown menu will appear to allow you to filter by team.
-
Display [X] items at a time from [time frame]: Use the numeral fields and dropdown menu to set the number of calendar events this element will display, as well as how far back into the past it will “look” for events. You can configure the element to span the current week or month, to cover within a specified range of dates, or to pull events from a set span of days.
-
Display option to [Load More Events]: Select this checkbox to give users the option to see additional calendar entries beyond the number this element is set to display by default. You can customize the text that appears on this link.
-
Display current events: This option controls whether events appearing on the current day will be shown on the calendar.
-
Output date [before] event title: Choose whether the date will be displayed before or after the title for each event.
-
Date Format: Set the format for displaying dates.
-
Date Separator: Configure the character used to separate day, month, and year digits when dates are displayed numerically.
-
Time Format: Set the format for displaying the start time of each event.
-
Display calendar filter control: When enabled, this setting displays a blue “funnel” icon that allows users to change which calendars (of the ones selected to display in the element) appear in their view.
-
Alternate view page: This setting will display a “grid” icon on the element and allow you to choose a page (presumably a page with a Calendar Grid element) to link to with this icon.
-
Display alerts and feed controls: This setting adds a “feed” and “bell” icon to the element, which house the options for users to subscribe to an iCal feed or sign up for email or text alerts for the calendar(s) displayed.
-
Display Request Event control: This adds a “+” icon to the element that lets users submit an event to be added to Calendar Manager. Any events added in this manner will have to be approved by an admin before they are added.
-
Display month headers: Choose whether or not the name of the month will be shown before the list of events in that month.
-
Order events: This element can display events in chronological or reverse chronological order.
Event Settings
Select which details to include with each event listing (if they're set in Calendar Manager).
- Time: Display each event's start and end times.
- Location: Shows the location of each event.
- Show icons: Set whether or not icons associated with calendar events are shown in the element.
- Status: Use this setting to display whether an event has been marked as “Changed,” “Postponed,” or “Cancelled” in Calendar Manager.
- Notes: Display any text from the "Notes" field associated with each event.
- Description: Display any text from the "Description" field associated with each event.
- Truncate Event Titles: Select this checkbox to limit event title length.
- Link titles to event details: Check this box so that when users click on the title of an event, they will be taken to a full event description, including any content in the "description" field on the calendar event.
Important Note on link titles
When you check this setting, you'll need to be sure to decide whether the event details will open up in either a Popup, Page, or Element by configuring the Link To settings in the next section.
-
Show [Read More] Link: Control whether or not the event description is truncated with a link to a detailed view. If the link is included, you can customize the link text.
Link To
These settings give you customization on where and how a calendar event will open up when clicked upon.
-
Popup: Event details will open in a popup on the same page.
-
Page: Event details will open on a selected page with a Calendar Event element on it.
-
Element: Event details can display in another Calendar element on the same page.
-
First, set a Calendar element to Event format. Give it a unique name to add more clarity.
-
Next, in another Calendar element in List format, select Link To > Element and you will now see the element in Event format appear in the dropdown.
-
Connecting these together means that anytime a visitor clicks on an event on the live page in the Grid view, event details will display in the other element.
-
Grid format settings
The Grid format uses a traditional calendar layout to visually represent Calendar events.
General Settings
-
Calendars: Select one or more calendars. Public events from those calendars will be displayed in the element.
-
Display LMS/Group Calendars: Select this checkbox to display calendars associated with specific classes or other groups on this element.
-
Display Athletic Events: Select this checkbox to display upcoming events from Athletics Manager. When the checkbox is selected, a dropdown menu will appear to allow you to filter by team.
-
Date Format: Set the format for displaying dates.
-
Date Separator: Configure the character used to separate day, month, and year digits when dates are displayed numerically.
-
Time Format: Set the format for displaying the start time of each event.
-
Combine Sat/Sun: When this option is selected, both weekend days will be collapsed into one column.
-
Week starts on: Choose whether to start the week on Sunday or Monday.
-
Day Name Format: Choose to show full day names (long) or abbreviated day names (short).
-
Display month picker: Select this option to allow users to expand a dropdown menu of months and years to quickly jump to a specific month.
-
Display Month/Week/Day Controls: With this checkbox enabled, users can switch between viewing the current month, current week, and current day within the element.
-
Display calendar filter control: When enabled, this setting displays a blue “funnel” icon that allows users to change which calendars (of the ones selected to display in the element) appear in their view.
-
Alternate view page: This setting will display a “list” icon on the element and allow you to choose a page (presumably a page with a Calendar List element) to link to with this icon.
-
Display alerts and feed controls: This setting adds a “feed” and “bell” icon to the element, which house the options for users to subscribe to an iCal feed or sign up for email or text alerts for the calendar(s) displayed.
-
Display Request Event control: This adds a “+” icon to the element that lets users submit an event to be added to Calendar Manager. Any events added in this manner will have to be approved by an admin before they are added.
-
Order events: This element can display events for each day in chronological or reverse chronological order.
-
Display Calendar & Category Legend: Underneath the grid, display a list of the calendars, sorted by category, and their associated colors or icons.
Event settings
-
Time: Display each event's start and end times.
-
Location: Shows the location of each event.
-
Show icons: Set whether or not icons associated with calendar events are shown in the element.
-
Status: Use this setting to display whether an event has been marked as “Changed,” “Postponed,” or “Cancelled” in Calendar Manager.
-
Notes: Display any text from the "Notes" field associated with each event.
-
Truncate Event Titles: Select this checkbox to limit event title length.
-
Link titles to event details:Check this box so that when users click on the title of an event, they will be taken to a full event description, including any content in the "description" field on the calendar event.
Important Note on link titles
When you check this setting, you'll need to be sure to decide whether the event details will open up in either a Popup, Page, or Element by configuring the Link To settings in the next section.
Link To
These settings give you customization on where and how a calendar event will open up when clicked upon.
-
Popup: Event details will open in a popup on the same page.
-
Page: Event details will open on a selected page into another Calendar Event element.
-
Element: Event details can display in another Calendar element on the same page.
-
First, set a Calendar element to Event format. Give it a unique name to add more clarity.
-
Next, in another Calendar element in Grid format, select Link To > Element and you will now see the element in Event format appear in the dropdown.
-
Connecting these together means that anytime a visitor clicks on an event on the live page in the Grid view, event details will display in the other element.
-
Slideshow format settings
The settings below allow you to customize your events into a slideshow format.
General Settings
-
Calendars: Select one or more calendars. Public events from those calendars will be displayed in the element.
-
Display LMS/Group Calendars: Select this checkbox to display calendars associated with specific classes or other groups on this element.
-
Display Athletic Events: Select this checkbox to display upcoming events from Athletics Manager. When the checkbox is selected, a dropdown menu will appear to allow you to filter by team.
- Display [X] items at a time from [time frame]: Use the numeral fields and dropdown menu to set the number of calendar events this element will display, as well as how far back into the past it will “look” for events. You can configure the element to span the current week or month, to cover within a specified range of dates, or to pull events from a set span of days.
- # of Days before today and # of Days after today: Do you want to show past events? If not, enter "0". How far into the future will your calendar dates populate?
- Display Current Events: This option controls whether events appearing on the current day will be shown on the calendar.
-
Date Format: Set the format for displaying dates.
-
Date Separator: Configure the character used to separate day, month, and year digits when dates are displayed numerically.
-
Time Format: Set the format for displaying the start time of each event.
-
Display alerts and feed controls: This setting adds a “feed” and “bell” icon to the element, which house the options for users to subscribe to an iCal feed or sign up for email or text alerts for the calendar(s) displayed.
-
Order events: This element can display events for each day in chronological or reverse chronological order.
Event Settings
Select which details to include with each event listing (if they're set in Calendar Manager).
-
Time: Display each event's start and end times.
-
Location: Shows the location of each event.
-
Show icons: Set whether or not icons associated with calendar events are shown in the element.
-
Status: Use this setting to display whether an event has been marked as “Changed,” “Postponed,” or “Cancelled” in Calendar Manager.
-
Notes: Display any text from the "Notes" field associated with each event.
-
Truncate Event Titles: Select this checkbox to limit event title length.
-
Link titles to event details: Use this control to create a link to the full event description on the event title.
-
Show [Read More] Link: Control whether or not the event description is truncated with a link to a detailed view. If the link is included, you can customize the link text.
Controls
- Scrolling: Select either a "vertical" or "horizontal" orientation for this slideshow.
- User Control Type: Use the dropdown to choose how end users can manually advance the slides. You can choose to overlay a series of clickable dots along the bottom of the slideshow, left and right arrows on the edges, both control types, or neither (meaning users will not be able to manually advance/repeat slides at all).
- Autoplay: Select whether or not the slideshow should automatically cycle through calendar events, and if so, how long each event should remain on the screen
- Show [X] items per slide: Set how many calendar items are displayed at a time in the slideshow.
- Transition effect: Choose how the slide transitions are animated - events can either “slide” or “fade” into one another
Link To
If “Link titles to event details” is selected above, use the dropdown menu to select where a user is taken when they click on an event to view more details about it.
-
Popup: Event details will open in a popup on the same page.
-
Page: Event details will open on a selected page with a Calendar Event element on it.
-
Element: Event details will open in a Calendar Event element on the same page.
Event format settings
The Event format allows you to display either the next upcoming event from a specified group of events, or a specific event designated by number.
-
Display next event from selected calendar(s): Choose from the following three options to create a pool of events from which the element will always display the first upcoming event.
-
Calendars: Select one or more calendars. The next public event from any of those calendars will be displayed in the element.
-
Display LMS/Group Calendars: Select this checkbox to display the next event from calendars associated with specific classes or other groups on this element.
-
Display Athletic Events: Select this checkbox to display the next event from Athletics Manager. When the checkbox is selected, a dropdown menu will appear to allow you to filter by team.
-
- Output date [before] event title: Choose whether the date will be displayed before or after the title for each event.
-
Date Format: Set the format for displaying dates.
-
Date Separator: Configure the character used to separate day, month, and year digits when dates are displayed numerically.
-
Time Format: Set the format for displaying the start time of each event.
Comments
Please Sign in to leave a comment if you don't see the comment box below.