Knowledge Base

How to color code events based on event type?

After adding a SharePoint calendar on a Calendar Rollup Web Part, you can select text and background colors based on event type or category, which helps users easily identify and prioritize information.

In this article, we will demonstrate how to color code events based on event type or category.

WHAT YOU'LL GET

The events are shown as different colors on Calendar Rollup Web Part

WHAT YOU'LL NEED

The sample data we use for this case

Firstly, add Calendar Rollup Web Part to a SharePoint site.

Color-code events based on event type

  1. Download the trial version of Calendar Rollup and install it to your SharePoint server.

  2. Navigate to site where you have added the Calendar Rollup Web Part to, on top right of web part, there’s an integrated dropdown menu, select Add Calendar.

    Or, click Calendar Rollup Settings and click Add new calendar in the Calendar Rollup Settings page.

    If you have already added SharePoint list on the Calendar Rollup Web Part, please skip to step 6.

  3. In the Add Calendar page, select the SharePoint list.

  4. In the Add or Change a Calendar page, specify a calendar name in General Settings section.

  5. In the Data source configuration section, configure the following settings.

  6. In the Customize Color Scheme section, in Column Name drop-down menu, select Category.

    In the Operator drop-down menu, select Is equal to.

    In the Value drop-down list, select Meeting.

    In the Text Color, click the color block.

    When the color picker appears, select one color and click OK.

    Then you will find that the Text color has been changed to the specific color as following.

    Click Add color scheme button to add the color scheme as following.

  7. Follow above steps to set the colors for other categories.

  8. Keep other settings as default and click OK to add the calendar.

  9. Navigate to the site where the Calendar Rollup Web Part locates, and then you will find that the events are shown with different colors on the web part.

Login