How can we help you today?

How to Map Events Categories with Colors and Icons in ShortPoint

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 Category 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 "Category" 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 Category column. You can enable the visibility of this column by going to Modify View in your List tab, and adding a check mark for Category 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.

In the Events element, go to the Connect tab and select what connection type you will be using depending on where your calendar resides.  In our example, we are using Current Site.

Please make sure that in the Connect fields of your Events element settings you choose the view that has the Category column in it. In our example, the Events By Category list view is the one that shows the Category column.

There are other fields in the Connect tab. The Days Limit field is where you indicated how many days, months, or years worth of events you want to display and the Items Limit field allows you to set the maximum number items to show. You can choose to expand Recurring Events you may have or show only the first instance of such events and set the Preferred Time Zone you want to display your events.

Click Connect and wait until a message confirms that "ShortPoint is Connected".

Step 4: Mapping Categories Column to Categories Options

After you have connected the required list,  please navigate to the Items tab and map the Category connection. Please choose "Category" from the drop down list, as shown in the screenshot.

Note: Map all other event items according to what you prefer to display. You can find more details about this in Step 4 of the ShortPoint Connect: Basic Tutorial article.

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 the listed changes, please click the  "Insert" or "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.

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 12 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more