Color coded events on your Drupal Calendar

Submitted by nmeegama on Wed, 05/09/2012 - 21:00

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