Add Colors to a Calendar

You have created a calendar. Now you want to customize it with colors to help differentiate events from training or holidays from meetings.

First we need all date modules enabled. Go to the userbar and click on the Modules. We will need date, date popup, date views and calender module to be enabled. Then click on the Save configuration.

Go to the Userbar >> Structure >> Content type >> Add content type.

Name it as a Event. Give it title as a Event title and leave it everthing as a default. Click on the Save and add fields.

Now to add a field, enter an Event date to Add new field and select a field type as a date. We will make it a pop-up calender and click Save. Here we will use site's time zone and click Save field settings. You will see the screen, look everything is perfect and click Save settings in the end. This will bring you back to he actual event manage fields and click save button.

Now will go ahead and add just two events. Go to the Userbar >> Content >> Add content >> Event. You will see the create event screen, give title as a Event 1. Select start and end date and time. Add description to the body and click Save. Add one more event, give it name as a event  follow the above instruction. 

Go to the Userbar >> Structure >> Views. In the top you will see +Add view from template,  click that. It will give you list of templates to use. Use the template that give you the view with date field. Go ahead and click add that view you want to add for your calender. Give it a name as a Calender and click continue. Now you will see the following screen. Will go ahead keep everything as a default now and click save.

Calender View Display

Click on the view Month, it will bring you to the actual calender. You can see month, week, day and year view on the top. Click prev or next to look of the event that you have created for the month. Now you are able to see event 1 and event 2. If you click on it it will bring it to the actual node page. It is pretty much what you expet from a view.

Let's see how to give colors to differentiate the events.

Now, if you click on the settings which is next to the calender entities, a pop-up screen will come. Look for the Legend colors, here you can add stripes on top of the actual event. So, you can differentiate between different typesof events. You can do this based on the Taxonomy. You can see this option under the stripes's dropdown list. Let's see the example of this.

Add vocabularyGo to the Userbar >> Structure >> Taxonomy>> add vocabulary. Name it as a Department and click save. You will see the screen like image on this page.

Now, we will add two terms to differentiate and see colors on it. Click on the add terms. Name it as sales and for the second term name it as a development, click save. So, we have to add this field on the content type.

Go to the Userbar >> Structure >> Events >> manage fields. Add a new filed and select type of the field as a Term referance and name it as a department. Use select list in a widget type. Click save. It will take you to the page where you can select vocabulary. Select department under the vocabulary dropdown list. Click save field settings. Make sure only one option is able to select at a time and click save settings.

Now we will come back to our two events. Edit both event 1 and event 2, first one will select as a development and second as a sales from the deparment dropdown list. Save both the events.

Go back to the again calender view. Look for the Fields and click on the Add. Whatever term we have created, will add here. We created department term so in the search bar type in department, you will see content department check and add that. Save it. You will different pop-up screen, here check Exclude from display because we don't want to display it on the view but we do want to be available for actual calender module to read and used for legand colors. Click Apply (all displays).

Calender view differentiating events with colorsGo to the calender entities settings. In that scroll down and look for Legend colors again. Select based on taxonomy under the Stripes dropdown list. You will see term field as a department. Now you can select different colors for different departments. Click Apply (all displays). Click save in the top right side of the screen. Now go the the view month and select it. Search for the event you created for the month, you will see different colors for the both events. See the below picture it will look like this. you can create as many events as you want and give then different colors.