Last updated 30 March 2012. Created on 3 August 2011.
Edited by sirtet, aspilicious, tim.plunkett. Log in to edit this page.

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-skin,
.fc-event-tid-1 .fc-event-time,
.fc-event-tid-1 a {
  color: #fff;
  background-color: #ff4500;
.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-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).

Looking for support? Visit the forums, or join #drupal-support in IRC.


Shishka’s picture

All 4 steps was done, but recipe not working, also dependencies in new module was linked to fullcalendar 6-1.4 module.

dcolburn’s picture

Hi Tim,

You helped me through a few first time gotchas with creating a custom module yesterday over iRC. [e.g., remember to rename MYMODULE to match your module name -- still red-faced over that]

As with the fellow ahead of me the new classes are not appearing. I'm hoping you'll have some other guidance.


tallmatt’s picture

Do I enter the taxonomy terms into the CSS Class field? (i.e. fc-event-default fc-event-gcal eventtype1) Colors specific to taxonomy types and node types are set, but I can't figure out where to enter it so that entries are no longer blue.

nmeegama’s picture

First we need to install the Events calendar feature and CCK module with all dependencies (calandar, views, ...). Once the modules are installed you are ready to go

=====Step 1: creating appropriate vocabulary with terms to categorize events
Go to admin >> structure >> taxonomy and add a suitable vocabulary with terms
Ex: Event types (vocabulary name)
term1: professional
term2: promotions
term3: camps
term4: get together
=======Step 2: Add a term reference to the event content type
Go to admin/structure/types/manage/event/fields and add a new field (Name it as Event type) Term reference and save changes. Select the above created vocabulary from the drop down (field settings screen). The number of values that can be entered should be one (can be changed according to preference). Save settings to complete the procedure.

======Step3: Create and save a few events giving them different event type values

======Step4: Color coding your content types and vocabulary terms

Install the colors module and the fullcalandar (Please select all modules under the fullcalandar category)modules . Use the installation instructions ( to install the fullcalandar plugin as well. Once all module are installed go to admin/config/user-interface/colors and select the node tab and select an appropriate color for the event type (Just in case the event does not have an event type the event would show up in this color in the calendar). Select the taxonomy tab and select appropriate colors for the taxonomy terms given in step 1

=====Step5: Creating a block view to show the calendar
got to admin/structure/views/add and add a view give a appropriate name (My mini event calendar) . Uncheck the the create a page checkbox and check the create a block checkbox. the display format should be fullcalandar. Press continue and edit button to complete.

next follow the steps carefully for each section
Adding the Format:
--Click on the Settings link in the Format section
--In the Header Section The Left value should be prev title next. Make the center and right text boxes blank
--Apply to this display

Adding fields:
--Press the add button in this section
--Filter by content check the "Content: Dates" (the event date field)
--Apply to the block display
--Uncheck the "Create a label " box
--Check the "Exclude from display " box
--Apply to bloc display (Save the view just in case)

Adding filters:
--Content: Published (Yes) should be defaultly added
--Press the add button
--filter by content
--check the Content: Type option
--Apply to this display
--In the next screen Operator radio button should be Is one of and the for the Content types select only Event
--Apply to this display (Save the view just in case)

Adding a pager:
--click on Display a specified number of items link
-- select Page by date
-- Apply to this display
--leave the options as it is in the next screen and apply to this display

Adding Contextual filters:
-- collapse the advance section
-- click on the add button in the Contextual filters section
--Filter by Date
-- Select the Date: Date (node)
--Apply to this display
--for the When the filter value is NOT available section select Display all results for the specified field \
--for When the filter value IS available or a default is provided no value should be checked
-- Granularity should be month
--Date year range (leave default)
--Dates to compare should be Only this field
--Add multiple value identifier should be No
--for Date field(s), Content: Dates - start date (field_event_date) should be checked
--Method should be OR
--Apply to this display (Save the view just in case)

the following should be the values in the Other section

Machine Name:
Comment: No comment
Use AJAX: No
Hide attachments in summary: No
Use aggregation: No
Query settings: Settings
Field Language: Current user's language
Caching: None
Link display: Month
CSS class: None
Theme: Information
Block caching: Do not cache

====Step 6: Adding the block to the reigon
Go to admin/structure/block
Find the block vie added in step 5
Select a region for the block to display

You will now see the color coded event in the mini calandar

susmitasaha’s picture

I want to display all events to admin but all other user will be able to see only events created by him/her and any other who belongs to the same role. How can I do so?

BDuell’s picture

I had taxonomy colors in FullCalendar in Drupal 7 working great until I included the date field in a field collection and then the taxonomy that I was referencing no longer worked.

I added this hook to my custom module to get it to work again (note, I had the colors assigned via /admin/config/user-interface/colors/taxonomy):

Change MYMODULE and MYTIDFIELD to the appropriate values for your use...

 * Implements hook_fullcalendar_classes().
function MYMODULE_fullcalendar_classes($entity) {
  $node = node_load($entity->hostEntityId());
  $tids = array();
  foreach ($node->MYTIDFIELD['und'] as $key => $value) {
    $tids[] = 'colors-taxonomy-term-'.$value['tid'];
  return $tids;