Widget Library

Calendar Carousel

This widget will display the Calendar events of a selected horizontally in a way that will draw a visitor's eye.

Works in conjunction with the Calendar module to display a rotating, left to right, list of events in a target department, or by tag.

Please note that Some browsers do not handle RSS feeds so code will be displayed on the screen. An external RSS reader will need to be used by visitors if they are using Chrome.

 




How do I add this widget to a page?

  1. Click Edit Page
  2. Click either + Content or the Settings icon (down-facing caret) which will be located to the right of Edit where you will need to select either Insert above or Insert below
  3. Choose the Calendar Carousel widget
  4. Select the department you would like to pull the events from and any additional fields that can be found in the Settings tab. The fields and their descriptions are listed below;
    • Tags - This allows you to select a tag to display only events that have that tag.
    • Events Total- The total number of events contained within the carousel. The number of visible items can be defined under Advanced settings.
    • List Heading - Enter the title of the list. If nothing is entered a heading will not be displayed.
    • Heading Size - You can choose the size of the heading, if one is entered. The available options for sizes range from H1 through H3.
    • Description - Enter a short description of the list. If nothing is entered no description will be displayed. Please note a heading needs to be entered in the List Heading field for the description to appear.
    • Title Sizes - The size of any titles.  The sizes available are; default, H1 through H6
    • Dates - Display the dates of events, by default they are shown
    • Teasers - Select if you want teaser text to be displayed. The default is on.
    • Read More - Enable the "Read More" link for each item listed.
    • More Link Text - Enter a text link to view all related articles. If blank, the link will not display.
    • Subscribe/RSS - Choose if you would like to enable a link for visitors to subscribe to an RSS feed, by default it is off. 
  5. Additional fields can be found in the Advanced tab, these will allow you to customize what information the widget displays. The fields and their descriptions are listed below;
    • Auto Width - If the items displayed in the widget need to have a  consistent width on all devices. Flip the switch to on by default it is off.  

    • Items Displayed (Mobile) - Control the number of items to be displayed on screen for small devices (i.e. mobile phone). This value has no effect when "Auto Width" is enabled.
    • Items Displayed (Tablet) - Control the number of items to be displayed on screen for medium devices (i.e. tablet). This value has no effect when "Auto Width" is enabled.
    • Items Displayed (Desktop) - Control the number of items to be displayed on screen for large devices (i.e. desktop, a standard monitor). This value has no effect when "Auto Width" is enabled.
    • Items Displayed (Large Desktop) - Control the number of items to be displayed on screen for large devices (i.e. desktop, a standard monitor). This value has no effect when "Auto Width" is enabled.

      Note: That the number of navigation dots that will be displayed on the screen, if they are turned on, will be equal to the number set in Post Limit and not the number set in the Items Displayed fields, that are listed above.

    • Spacing - This field lets you control the margin (pixels) between each item.
    • Autoplay - Should the carousel automatically play.
    • Loop - By default, the carousel will loop but it can be turned off here.
    • Speed- You can customize the speed of the carousel by entering a number (in milliseconds) here.
    • Navigation - By switching this to on, arrows will be displayed on either side of the widget allowing a visitor to manually navigate through the slides.
    • Dots - Similar to the navigation arrow, dots are displayed at the bottom of the widget. They allow a visitor to navigate through the carousel by shifting to the items associated with the dot.
  6. When you are finished, click on the green Create button and your Calendar Carousel widget will show up on the page. 
  7. Make sure to click either the Publish or the Save Draft option just as you would when you're editing pages.




Additional Widget Information 

  • If you select None (sample content) as the department for the widget to pull information from, dummy text and information will be shown for the entries. This is could be used to create a  page and see how it looks before you have the information that will be displayed.