The FullCalendar module includes a sub-module that allows you to color code events based on Content Type, Taxonomy Term, User Roles, Organic Groups, etc. In the video "Creating a Content Type for Events", we created taxonomy terms for categorizing events by the type of activity. In this video, I will show you how to indicate activity types by color coding events based on those taxonomy terms.

Install module

Enable module

  • Go to "Modules" (admin/modules) and enable:
    • FullCalendar Colors
    • Colors
  • (Save configuration)

Configure Colors

Now we need to configure the colors that we will use on the calendar.

  • Go to "Configuration => User Interface => Colors" (admin/config/user-interface/colors)

You'll see here that we can set the default event color. There are also tabs for color coding based on Node Type, Taxonomy Term, and User Role.

If we click the "Node" tab, and check the "Enable colors for node types" box, you'll see that we can select a different color for each Node Type.

If we click the "User" tab, you'll see that there are three sub-tabs: Current user, User role, and Users. The Current User tab lets you select a color to use for events that were created by the current site user. The User Role tab lets you select colors to indicate events created by users of particular roles. And the Users tab lets you select a color to use for each registered user. We've classified our events using the "Activity Type" taxonomy, so let's color code our events based on that.

  • Click the "Taxonomy" tab
  • Click "Activity"
  • [x] Enable this vocabulary
    • Conference: #16a085
    • Exhibition: #2980b9
    • Performance: #8e44ad
    • Special Event: #d35400
  • (Save configuration)

Now, when we go home and click the "Calendar" tab, we'll see that our events are displayed using the color that corresponds to their activity type.

In the next video we'll take a look at FullCalendar's ability to display a shared Google calendar inline with events created on our site.