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.
-
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. This will include any content in the "description" field on the calendar event.
-
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
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.
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: Use this control to create a link to the full event description on the event title.
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.
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.
-
-
Display specific event occurrence:
-
Calendar Occur ID: Enter the number associated with this event occurrence. The easiest way to find this number is to go to a Calendar Grid or List element that’s displaying the event, set the element to open event details in a page, then hover over the link to see the URL in the bottom of your browser. The occur ID is the number after /~occur-id/ in the URL.
-
-
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.