In the first video of this series we created taxonomy terms to categorized our events. In this video, we'll assign a color to each of those taxonomy terms and use those to color code events on our calendar.

  • Go to “Structure => Views => Calendar” (admin/structure/views/view/calendar/edit)

Fields

First, we'll add the Activity Type field to get the term, but we'll exclude it from display.

  • Click "Add"
  • [x] Content: Activity Type
  • (Apply (all displays))
  • [ ] Create a label
  • [x] Exclude from display (We want to exclude the activity type field from display because we'll just be using it to color code events.)
  • (Apply(all displays))

Format

  • Click "Settings" next to "Show"
  • For: All displays (except overriden)
  • Legend colors
    • Stripes: choose "Based on Taxonomy" (You could also color code based on content type.)
    • Conference: #16a085
    • Exhibition: #2980b9
    • Performance: #8e44ad
    • Special Event: #d35400
  • (Apply(all displays))
  • (Save) (Save the view)

Scroll down to live preview. You'll see that we now have a color stripe above each calendar item. Now let's create a legend in the header.

Header

  • Click "Add"
  • [x] Global: Text area
  • (Apply(all displays))
  • In the text area enter the following HTML and CSS
    <div id="legend">
    <span style="color: #16A085">&#9632</span>Conference
    <span style="color: #2980B9">&#9632</span>Exhibition
    <span style="color: #8E44AD">&#9632</span>Performance
    <span style="color: #D35400">&#9632</span>Special Event
    </div>
  • Text format: Full HTML
  • (Apply(all displays))
  • (Save) (Save the view)

Now when we view the page we’ll see the legend in the header.

In the next video, we'll setup our calendar to provide an ical download so that visitors can download an .ics file for the calendar.