New Webpart - Upcoming Events

The Upcoming Events webpart  allows for the next two events in a Calendar list to be highlighted on any page. It is meant to work as a call to action to notify visitors of the next two events upcoming for that agency.

Each Event allows for an optional field called Event URL. Adding and using this option causes an arrow to appear to the right of the event and the whole event to work as a link and routes users to that URL.

It also comes with an optional button to route users to another location. We recommend using this button to route the user to a Calendar web part to allow them to view more information about the two events listed or see even more upcoming events.

Click here to see an example.

List Settings

A list is required in addition to the web part to define its content. The list must be a Calendar list:

Required Calendar List Columns (these are defaults within a Calendar list):

• Title (Single Line of Text): The header text of the event displaying.
• Start Time (Date and Time): This helps determine the start date for that event in the display.
• End Time (Date and Time): This helps determine the end date for that event in the display.

Optional Calendar List Columns:

Event URL (Hyperlink): Add and use this column if you would like each or any entries in the webpart to work as links. If you add an Event URL to an event an arrow will appear to the right and the entry will work as a link and lead visitors to that URL. This allows all destination URLs to be customized individually and per event.

Webpart Required Fields:

• WebPart Title Heading Level (Choice): Use this field to choose what Heading Level the title should be in this component. This is to allow it to fall correctly in the heading hierarchy on the page.
• WebPart Title (Text): Add text to this field that you want to display as the title at the very top of the Webpart
• Events Title Field (Choice): Choose which column of the list should be the event title. The default Calendar column of Title works well here.
• Event Start Date Field (Choice): Choose which column of the list should be the start date of the event. The default Calendar list column of Start Time works well here.
• Event End Date Field (Choice): Choose which column of the list should be the end date of the event. The default Calendar list column of End Time works well here.

Webpart Optional Fields:

• Events Location (Single Line of Text): Allows the event to have a location set. Calendar events come with a default location column. This works great or you can create your own column.
• Event URL (Hyperlink): Allows for a related link for the individual event. For information on adding a new field to an event, see below.
• Button URL (Field): Add a URL that the button should lead to at the bottom of the Webpart.
• Button Text (Field): Add the text that should display in the button at the button of the Webpart.

Display Options

Colors can be defined as hex values or web-safe color names. Note that any color selections must meet WCAG standards, requiring a contrast ratio of at least 4.5:1.

• Background Color of the WebPart block: This controls the color in the background of the Webpart. Dark Blue is used in the example used in this document.
• Text Color: The color of the text used in the Webpart Title, Event Titles & Locations.
• Button Background Color: Controls the background color in the button.
• Button Text Color: Controls the text color in the button.

Adding a new field to an event

The Event URL column does not exist in the event list by default. To add this you will need to do the following:

1. From your event calendar, click on the "Calendar" ribbon and select "List Settings" 
2. Scroll down to the "Create column" link in the settings and add the "Event URL" field as a "Single Line of Text" or "Hyperlink"
3. Once the column is created, ensure you are still on the "Calendar" ribbon and click "Create View"
4. Name your view, and ensure that your newly created "Event URL" column is checked, then click "OK" to save your view
   
5. Select your newly created view from the "View" dropdown in the webpart settings. Your new column should now be available for selection.