Events

The Events widget is designed to display events in a structured format, making it easy for users to find and view both upcoming and past events on the website pages. It includes built-in fields for event dates, times, and durations, which are essential for managing event information. Events typically require specific contextual information such as timing, location, and registration details, which are better handled by the Events widget.

Users can select what content to display and then specify how events are listed and displayed individually. The widget provides options to filter the displayed events based on various criteria.

Create and Edit Events

How to

  • Create a Calendar & Event

    Create a Calendar

    1. Click the Content navigation menu item and then select Events
      screenshot of events in navigation
    2. Click the Create a calendar button
      screenshot of create a calendar button
    3. Add the calendar title and color. Refer to the web color guide for UTMB brand colors. Click the Create button when finished.
      screenshot of calendar title and color fields

    Create an Event

    1. Click the Content navigation menu item and then select Events
      screenshot of events in navigation
    2. Click the Create an event button. You can click the < All calendars link to change the calendar first, if you have multiple calendars.
      screenshot of create event button
    3. Type the event title.
      screenshot of event title field
    4. Click in the content area. You have the option to use the formatting toolbar and/or edit the HTML by selecting the </> option on the far right of the toolbar. Type and format the content.
      screenshot showing the formatting toolbar
    5. Add a summary
      screenshot of blog post summary
    6. Type or select the Event start and Event end date and time. If it is an all-day event, you can check the All day box.
      screenshot of date and time selector
    7. Add categories and tags
      This allows you to filter what is displayed on a page. You can add multiple categories and tags.
      screenshot showing categories and tags sections
      • Adding Categories
        1. Click the plus symbol under the Categories section.
        2. Begin typing a category name to choose a predefined category, select create a category, or select show all categories to select from the category list 
          screenshot showing categories options
      • Adding Tags
        1. Click the plus symbol under the Tags section.
        2. Begin typing a tag name to create a new tag or select a predefined tag. You can also select Show all tags to search through the predefined tags.
          screenshot of tag selection options
    8. Add location information
      • Street
      • City
      • Country
      • State
      • How to find us
      • Venue
      • Postal Code

      • screenshot of location fields
    9. Add contact information
      • Email
      • Website
      • Contact name
      • Cell phone
      • Phone

      • screenshot of contact fields
    10. Add an image
      • Under the Related media section click the plus symbol. Select or upload an image.

      • screenshot of image field
    11. Click the Publish button

Layout Views

The widget component template

Learn how to do it:

How to

  • Add Events widget to a page

    Within the edit view of a page, you can add the Events widget and display events on a page.

    1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Events widget. Click, hold and drag the Events widget onto the desired part of the page, and then release the events widget
      screenshot showing the events widget on a page
  • Customize how the event details display

    Within the edit view of a page, you can customize how the selected event details display and select the page that it opens in. You must create a separate page with the events widget on it first.

    1. After you have added the Events widget to a page, click the Edit button on the widget
      screenshot showing edit button
    2. Under the Single item settings tab, select the page that the event details open in.
      • Auto-generated page: This is the default setting and will open the event details on the same page. This setting is not recommended.
      • Selected existing page: Select the page with the events widget on it.

      screenshot of Calendar single item settings
  • Selecting which Events to display

    Within the edit view of a page, you can select which event(s) to display.

    1. After you have added the event widget to a page, click the Edit button on the widget
      screenshot showing edit button
    2. Under the Content tab, select which events to display
      • All Events: This is the default setting. This will display all events. 
      • Events by date:
        • upcoming events
        • current events
        • past events
      • Selected events: you can select one or more events to display
        screenshot showing the event selection options
    3. Narrow selection further
      • Calendar: If you have multiple, you can select one or more calendars
      • All published events: This is the default setting. This will display all published events.
      • Selection of events: you can add filters by specific calendars, categories, and/or tags. You must add categories and/or tags to the events before you can add the filter to the events widget
        screenshot of event filters
    4. Click the Save button when finished.
  • Customize Events settings

    Within the edit view of a page, you can customize how events display.

    1. After you have added the events widget to a page, click the Edit button on the widget
      screenshot showing edit button
    2. Under the List settings tab, select the paging and limit settings.
      • Use paging: This is the default setting with up to 20 items per page displaying. You can edit the number of items displayed.
      • Use Limit: You can limit the number of items displayed.
      • No limit and paging: Shows all published items at once. This setting is not recommended.
        screenshot of paging options
    3. You can sort events with these settings:
      • Last published on top: Sorts the latest events that have been published in descending order by date.
      • Last modified on top: Sorts the latest events that have been edited and saved in descending order by date.
      • By Title (A-Z): Sorts by the title field of the event.
      • By Title (Z-A): Sorts by the title field of the event.
      • By Start date (oldest on top): This is the default setting. 
      • As set manually: Sorts by the order of the events in the events list. You can manually reorder events.
      • As set in advanced mode: Do not use this setting
        screenshot of sorting options
      • Add CSS classes
        • Insert CSS classes in the CSS classes field under the More Options field. Multiple CSS classes can be added but must be separated by a space. View the events classes and examples.
          screenshot of css field
    4. Add Calendar widget to a page

      Within the edit view of a page, you can add a calendar on a page.

      1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Calendar widget. Click, hold and drag the Calendar widget onto the desired part of the page, and then release the calendar widget
        screenshot of calendar widget on a page
    5. Customize how the Calendar event details display

      Within the edit view of a page, you can customize how the selected event details display and select the page that it opens in. You must create a separate page with the events widget on it first.

      1. After you have added the Calendar widget to a page, click the Edit button on the widget screenshot of edit button on calendar widget
      2. Under the Single item settings tab, select the page that the event details open in.
        • Auto-generated page: This is the default setting and will open the event details on the same page. This setting is not recommended.
        • Selected existing page: Select the page with the events widget on it.

        screenshot of Calendar single item settings
    6. Selecting which Calendar to display

      Within the edit view of a page, you can select which calendar(s) to display.

      1. After you have added the calendar widget to a page, click the Edit button on the widget
        screenshot of edit button on calendar widget
      2. Under the Content tab, select which events to display
        • All Events: This is the default setting. This will display all events. 
        • Events by date:
          • upcoming events
          • current events
          • past events
        • Selected events: you can select one or more events to display
          screenshot of which events to display settings
      3. Narrow selection further
        • Calendar: If you have multiple, you can select one or more calendars
        • All published events: This is the default setting. This will display all published events.
        • Selection of events: you can add filters by a specific calendar, categories, and/or tags. You must add categories and/or tags to the events before you can add the filter to the events widget
          screenshot of narrow selection section
      4. Click the Save button when finished.
    7. Customize Calendar settings

      Within the edit view of a page, you can customize how a Calendar displays.

      1. After you have added the calendar widget to a page, click the Edit button on the widget
        screenshot of edit button on calendar widget
      2. Under the List settings tab, you can select what day of the week to start on.
        • Monday
        • Sunday: this is the default setting
          screenshot of Calendar week start section
      3. You can change the default view and allow users to switch between views:
        • Month: Displays the current calendar month
        • Week: Displays a full week view with times
        • Work Week: Displays a Monday through Friday week view with times
        • Day: Displays the current day view with times
        • Agenda: Displays the current day view with event details
        • Timeline: Displays a timeline for the current day
          screenshot of default view settings
      4. Allow users to filter by Calendar
        • The default setting is to allow users to filter by Calendars. Select the text "Allow users to filter by Calendar" to not allow this setting.

          screenshot of calendar filter

    Events List

    slide-05

    ALL Day event - 3 day span (Default Calendar)

    -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

    Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

    Calendar

    Calendars

    Customizations

    Customize with CSS Classes.

    Learn how to do it:

    How to

    • Customize Events settings

      Within the edit view of a page, you can customize how events display.

      1. After you have added the events widget to a page, click the Edit button on the widget
        screenshot showing edit button
      2. Under the List settings tab, select the paging and limit settings.
        • Use paging: This is the default setting with up to 20 items per page displaying. You can edit the number of items displayed.
        • Use Limit: You can limit the number of items displayed.
        • No limit and paging: Shows all published items at once. This setting is not recommended.
          screenshot of paging options
      3. You can sort events with these settings:
        • Last published on top: Sorts the latest events that have been published in descending order by date.
        • Last modified on top: Sorts the latest events that have been edited and saved in descending order by date.
        • By Title (A-Z): Sorts by the title field of the event.
        • By Title (Z-A): Sorts by the title field of the event.
        • By Start date (oldest on top): This is the default setting. 
        • As set manually: Sorts by the order of the events in the events list. You can manually reorder events.
        • As set in advanced mode: Do not use this setting
          screenshot of sorting options
        • Add CSS classes
          • Insert CSS classes in the CSS classes field under the More Options field. Multiple CSS classes can be added but must be separated by a space. View the events classes and examples.
            screenshot of css field
      4. Customize Calendar settings

        Within the edit view of a page, you can customize how a Calendar displays.

        1. After you have added the calendar widget to a page, click the Edit button on the widget
          screenshot of edit button on calendar widget
        2. Under the List settings tab, you can select what day of the week to start on.
          • Monday
          • Sunday: this is the default setting
            screenshot of Calendar week start section
        3. You can change the default view and allow users to switch between views:
          • Month: Displays the current calendar month
          • Week: Displays a full week view with times
          • Work Week: Displays a Monday through Friday week view with times
          • Day: Displays the current day view with times
          • Agenda: Displays the current day view with event details
          • Timeline: Displays a timeline for the current day
            screenshot of default view settings
        4. Allow users to filter by Calendar
          • The default setting is to allow users to filter by Calendars. Select the text "Allow users to filter by Calendar" to not allow this setting.

            screenshot of calendar filter

      Columns

      2 Columns: list-col-md-6

      slide-05

      ALL Day event - 3 day span (Default Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

      slide-01

      Hello, World! I'm an event

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, Texas 77555 USA

      Maecenas vel hendrerit tortor. Donec metus ligula, fermentum vel porta a, suscipit at lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

      slide-04

      ALL Day event - 1 day long (UTMB Web Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Nunc condimentum molestie sem id commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet ac ipsum sit amet congue. Morbi justo tortor, tristique volutpat egestas ut, accumsan vitae tellus. Proin ut turpis massa. Nullam nec mattis arcu, non tempus ipsum. Cras sit amet scelerisque lacus, nec lobortis libero.

      slide-02

      Hour long event w/ summary (Default Calendar)

      , 2019 - - John Sealy Hospital - 301 University Blvd, Galveston, Texas 77555 USA

      Suspendisse elementum enim ut laoreet volutpat. Suspendisse potenti. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculous mus. Vivamus quis viverra orci. Fusce hendrerit mauris ante, sit amet imperdiet est volutpat nec.

      2 Columns + Masonry: list-col-md-6 + list-masonry

      slide-05

      ALL Day event - 3 day span (Default Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

      slide-01

      Hello, World! I'm an event

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, Texas 77555 USA

      Maecenas vel hendrerit tortor. Donec metus ligula, fermentum vel porta a, suscipit at lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

      slide-04

      ALL Day event - 1 day long (UTMB Web Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Nunc condimentum molestie sem id commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet ac ipsum sit amet congue. Morbi justo tortor, tristique volutpat egestas ut, accumsan vitae tellus. Proin ut turpis massa. Nullam nec mattis arcu, non tempus ipsum. Cras sit amet scelerisque lacus, nec lobortis libero.

      slide-02

      Hour long event w/ summary (Default Calendar)

      , 2019 - - John Sealy Hospital - 301 University Blvd, Galveston, Texas 77555 USA

      Suspendisse elementum enim ut laoreet volutpat. Suspendisse potenti. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculous mus. Vivamus quis viverra orci. Fusce hendrerit mauris ante, sit amet imperdiet est volutpat nec.

      Content Dividers

      Divider: event-item-divider

      slide-05

      ALL Day event - 3 day span (Default Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

      slide-01

      Hello, World! I'm an event

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, Texas 77555 USA

      Maecenas vel hendrerit tortor. Donec metus ligula, fermentum vel porta a, suscipit at lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

      slide-04

      ALL Day event - 1 day long (UTMB Web Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Nunc condimentum molestie sem id commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet ac ipsum sit amet congue. Morbi justo tortor, tristique volutpat egestas ut, accumsan vitae tellus. Proin ut turpis massa. Nullam nec mattis arcu, non tempus ipsum. Cras sit amet scelerisque lacus, nec lobortis libero.

      Card: event-item-card

      slide-05

      ALL Day event - 3 day span (Default Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

      slide-01

      Hello, World! I'm an event

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, Texas 77555 USA

      Maecenas vel hendrerit tortor. Donec metus ligula, fermentum vel porta a, suscipit at lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

      slide-04

      ALL Day event - 1 day long (UTMB Web Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Nunc condimentum molestie sem id commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet ac ipsum sit amet congue. Morbi justo tortor, tristique volutpat egestas ut, accumsan vitae tellus. Proin ut turpis massa. Nullam nec mattis arcu, non tempus ipsum. Cras sit amet scelerisque lacus, nec lobortis libero.

      Title Styles

      Small: item-title-small

      slide-05

      ALL Day event - 3 day span (Default Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

      Medium: item-title-medium

      slide-05

      ALL Day event - 3 day span (Default Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

      Large: item-title-large

      slide-05

      ALL Day event - 3 day span (Default Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

      Make Heading Tag: title-tag-h5

      slide-05
      ALL Day event - 3 day span (Default Calendar)
      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

      Image Options

      Image Top: img-top

      slide-05

      ALL Day event - 3 day span (Default Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

      Float Image Right: img-right

      ALL Day event - 3 day span (Default Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

      slide-05

      Hide Image: img-hide

      ALL Day event - 3 day span (Default Calendar)

      -, 2019 Rebecca Sealy - 301 University Blvd, Galveston, TX 77555 USA

      Duis ligula felis, pellentesque id auctor a, vulputate id lectus. Cras vitae lacus et orci malesuada tempor. Vivamus quis faucibus neque. Donec felis elit, pharetra in massa id, maximus congue erat. Sed feugiat magna et dolor pretium rutrum nec nec turpis. Pellentesque eget felis pharetra leo pulvinar pharetra. Nunc a lacus vehicula justo facilisis rhoncus. Suspendisse ut ligula efficitur, consectetur metus a, efficitur dui.

      Training

      Create and Edit Events

      How to

      • Create a Calendar & Event

        Create a Calendar

        1. Click the Content navigation menu item and then select Events
          screenshot of events in navigation
        2. Click the Create a calendar button
          screenshot of create a calendar button
        3. Add the calendar title and color. Refer to the web color guide for UTMB brand colors. Click the Create button when finished.
          screenshot of calendar title and color fields

        Create an Event

        1. Click the Content navigation menu item and then select Events
          screenshot of events in navigation
        2. Click the Create an event button. You can click the < All calendars link to change the calendar first, if you have multiple calendars.
          screenshot of create event button
        3. Type the event title.
          screenshot of event title field
        4. Click in the content area. You have the option to use the formatting toolbar and/or edit the HTML by selecting the </> option on the far right of the toolbar. Type and format the content.
          screenshot showing the formatting toolbar
        5. Add a summary
          screenshot of blog post summary
        6. Type or select the Event start and Event end date and time. If it is an all-day event, you can check the All day box.
          screenshot of date and time selector
        7. Add categories and tags
          This allows you to filter what is displayed on a page. You can add multiple categories and tags.
          screenshot showing categories and tags sections
          • Adding Categories
            1. Click the plus symbol under the Categories section.
            2. Begin typing a category name to choose a predefined category, select create a category, or select show all categories to select from the category list 
              screenshot showing categories options
          • Adding Tags
            1. Click the plus symbol under the Tags section.
            2. Begin typing a tag name to create a new tag or select a predefined tag. You can also select Show all tags to search through the predefined tags.
              screenshot of tag selection options
        8. Add location information
          • Street
          • City
          • Country
          • State
          • How to find us
          • Venue
          • Postal Code

          • screenshot of location fields
        9. Add contact information
          • Email
          • Website
          • Contact name
          • Cell phone
          • Phone

          • screenshot of contact fields
        10. Add an image
          • Under the Related media section click the plus symbol. Select or upload an image.

          • screenshot of image field
        11. Click the Publish button

      Add Events to a Page

      How to

      • Add Events widget to a page

        Within the edit view of a page, you can add the Events widget and display events on a page.

        1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Events widget. Click, hold and drag the Events widget onto the desired part of the page, and then release the events widget
          screenshot showing the events widget on a page
      • Customize how the event details display

        Within the edit view of a page, you can customize how the selected event details display and select the page that it opens in. You must create a separate page with the events widget on it first.

        1. After you have added the Events widget to a page, click the Edit button on the widget
          screenshot showing edit button
        2. Under the Single item settings tab, select the page that the event details open in.
          • Auto-generated page: This is the default setting and will open the event details on the same page. This setting is not recommended.
          • Selected existing page: Select the page with the events widget on it.

          screenshot of Calendar single item settings
      • Selecting which Events to display

        Within the edit view of a page, you can select which event(s) to display.

        1. After you have added the event widget to a page, click the Edit button on the widget
          screenshot showing edit button
        2. Under the Content tab, select which events to display
          • All Events: This is the default setting. This will display all events. 
          • Events by date:
            • upcoming events
            • current events
            • past events
          • Selected events: you can select one or more events to display
            screenshot showing the event selection options
        3. Narrow selection further
          • Calendar: If you have multiple, you can select one or more calendars
          • All published events: This is the default setting. This will display all published events.
          • Selection of events: you can add filters by specific calendars, categories, and/or tags. You must add categories and/or tags to the events before you can add the filter to the events widget
            screenshot of event filters
        4. Click the Save button when finished.
      • Customize Events settings

        Within the edit view of a page, you can customize how events display.

        1. After you have added the events widget to a page, click the Edit button on the widget
          screenshot showing edit button
        2. Under the List settings tab, select the paging and limit settings.
          • Use paging: This is the default setting with up to 20 items per page displaying. You can edit the number of items displayed.
          • Use Limit: You can limit the number of items displayed.
          • No limit and paging: Shows all published items at once. This setting is not recommended.
            screenshot of paging options
        3. You can sort events with these settings:
          • Last published on top: Sorts the latest events that have been published in descending order by date.
          • Last modified on top: Sorts the latest events that have been edited and saved in descending order by date.
          • By Title (A-Z): Sorts by the title field of the event.
          • By Title (Z-A): Sorts by the title field of the event.
          • By Start date (oldest on top): This is the default setting. 
          • As set manually: Sorts by the order of the events in the events list. You can manually reorder events.
          • As set in advanced mode: Do not use this setting
            screenshot of sorting options
          • Add CSS classes
            • Insert CSS classes in the CSS classes field under the More Options field. Multiple CSS classes can be added but must be separated by a space. View the events classes and examples.
              screenshot of css field
        4. Add Calendar widget to a page

          Within the edit view of a page, you can add a calendar on a page.

          1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Calendar widget. Click, hold and drag the Calendar widget onto the desired part of the page, and then release the calendar widget
            screenshot of calendar widget on a page
        5. Customize how the Calendar event details display

          Within the edit view of a page, you can customize how the selected event details display and select the page that it opens in. You must create a separate page with the events widget on it first.

          1. After you have added the Calendar widget to a page, click the Edit button on the widget screenshot of edit button on calendar widget
          2. Under the Single item settings tab, select the page that the event details open in.
            • Auto-generated page: This is the default setting and will open the event details on the same page. This setting is not recommended.
            • Selected existing page: Select the page with the events widget on it.

            screenshot of Calendar single item settings
        6. Selecting which Calendar to display

          Within the edit view of a page, you can select which calendar(s) to display.

          1. After you have added the calendar widget to a page, click the Edit button on the widget
            screenshot of edit button on calendar widget
          2. Under the Content tab, select which events to display
            • All Events: This is the default setting. This will display all events. 
            • Events by date:
              • upcoming events
              • current events
              • past events
            • Selected events: you can select one or more events to display
              screenshot of which events to display settings
          3. Narrow selection further
            • Calendar: If you have multiple, you can select one or more calendars
            • All published events: This is the default setting. This will display all published events.
            • Selection of events: you can add filters by a specific calendar, categories, and/or tags. You must add categories and/or tags to the events before you can add the filter to the events widget
              screenshot of narrow selection section
          4. Click the Save button when finished.
        7. Customize Calendar settings

          Within the edit view of a page, you can customize how a Calendar displays.

          1. After you have added the calendar widget to a page, click the Edit button on the widget
            screenshot of edit button on calendar widget
          2. Under the List settings tab, you can select what day of the week to start on.
            • Monday
            • Sunday: this is the default setting
              screenshot of Calendar week start section
          3. You can change the default view and allow users to switch between views:
            • Month: Displays the current calendar month
            • Week: Displays a full week view with times
            • Work Week: Displays a Monday through Friday week view with times
            • Day: Displays the current day view with times
            • Agenda: Displays the current day view with event details
            • Timeline: Displays a timeline for the current day
              screenshot of default view settings
          4. Allow users to filter by Calendar
            • The default setting is to allow users to filter by Calendars. Select the text "Allow users to filter by Calendar" to not allow this setting.

              screenshot of calendar filter

        On this page: