Event coloring for FullCalendar

Event coloring

Drupal 6

To apply specific colors to event types in Full Calendar we can use taxonomy terms that correspond to the event types. Follow the steps below to implement event coloring.

1) Create your taxonomy terms and link them to your event content type. Note that the term names are not important as we will be using the term ID only.

2) Put this code into a custom module to create a class for each taxonomy term.

/**
 * Implements hook_fullcalendar_classes().
 *
 * @param $node
 *   An object representing the node.
 *
 * @return
 *   A string suitable for use as a CSS class.
 */
function MYMODULE_fullcalendar_classes($node) {
  $classes = array();
 
  // Taxonomy Term IDs for coloring.
  foreach ($node->taxonomy as $term_id) {
    $classes[] = 'fc-event-tid-' . $term_id->tid;
  }
  return implode(' ', $classes);
}

3) Add the appropriate definitions to your css file. Below is an example for three different event types:

.fc-event-tid-1,
.fc-event-tid-1 .fc-event-skin,
.fc-event-tid-1 .fc-event-time,
.fc-event-tid-1 a {
  color: #fff;
  background-color: #ff4500;
}
.fc-event-tid-2,
.fc-event-tid-2 .fc-event-skin,
.fc-event-tid-2 .fc-event-time,
.fc-event-tid-2 a {
  color: #fff;
  background-color: #87cefa;
}
.fc-event-tid-3,
.fc-event-tid-3 .fc-event-skin,
.fc-event-tid-3 .fc-event-time,
.fc-event-tid-3 a {
  color: #fff;
  background-color: #32cd32;
}

4) Flush caches and refresh your browser and you are done.

Drupal 7

In Drupal 7, a submodule, FullCalendar Colors, is included to help you choose colors for events displayed in your website's calendars. The module can help color events by node type, taxonomy term, organic group, ...

To use the module:

1. Install colors module.
2. Enable colors and fullcalendar colors on the modules page.
3. Visit the Colors configuration page.
4. Enable colors for whatever you'd like
5. Use the color picker to choose a color for each node type, taxonomy term, etc.

After you save your chosen color scheme, your fullcalendar-enabled calendars should show events in different colors (besides the default blue).