If you would like to display the events on your site in a comprehensive way and make it easy for the site visitors to find the events they are searching for, we suggest you to mark them with colors and/or icons, just as in the example below. In this article you may learn how to do it using the ShortPoint Events design element.

Step 1: Preparing Your Events List with Categories

Your SharePoint Events List should have a Categories column. You will be suggested to fill in the "Category" field every time you create a new event, so please make sure not to leave this field blank. 

If you fill in the "Category" field for your events, in the default list view you will have a "Categories" column, as shown below.


Step 2: Preparing the Right List View

You can use the default view of the Events list or create your own. Please remember that the view you have chosen to display includes the Categories column. You can enable the visibility of this column in the view settings, as shown below.


Step 3: Connecting your SharePoint List to Events Design Element in ShortPoint

After you have selected the Events design element in ShortPoint, you will be able to adjust the settings of the element and connect it to your SharePoint Events list.

Please make sure that in the "Connected" tab of your Events element settings you choose the view that has the Categories column in it. In our example, the Upcoming Events list view is the one that shows the Categories column.


Step 4: Mapping Categories Column to Categories Options

In the settings of the ShortPoint Events design element, after you have connected the required list,  please navigate to the "Items" tab and map the Category connection. Please choose "Category" from the dropdown list, as shown in the screenshot.


Step 5: Enabling "Color by Category"

Finally, please navigate to the Settings tab of the Events element and make sure to turn on the "Enable Color by Category" button. 


After applying all of the listed changes, please click the  "Update" button and save the page, so you will be able to see the changes.

In our example, the final result looks like this:


As you can see, the events are now color-coded by category.

Step 6: Enabling Icons

If you would like your events to be displayed with icons, please turn on this option in the "Settings" tab.


Customizing the Default Categories' Colors and Icons

If you would like to apply different colors to your events categories or choose custom icons, please navigate to the "Advanced" tab. 

Thank you for your attention! Please send us a ticket if you have any questions.