Previously MetroStar had a blog on how to create a color coded calendar Out of the box (OOB). This post will cover step by step on how you can leverage just a bit of JS that you can easily copy and paste into a Content Editor Web Part to achieve a more robust solution. So don’t worry, you still don’t have to know how it works.
This solution is thanks to PlanetWilson’s V2 color calendar JS script which checks for a calculated field’s HTML value then replaces that with its own CSS with an !important tag. If you are comfortable with JS you can create your own version as well which improves on the one provided, but that is for a different post.
In the following steps we will be creating a color coded calendar for a proposal review calendar:
Create a new Calendar
We will be using the basic OOB calendar app so if you don’t already have a calendar go ahead and create one. If you already have a calendar you need to color code please skip this section and move on to “Create a new Calculated Column”
1. Go into your site’s contents and click “add an app”
2. Click “Calendar” give it a name then click “Create”
Create a new Calculated Column
The way the JS we will be copying and pasting works is by looking on our calendar page for the characters “|||” our category then “|||” again. This way we don’t accidentally find the wrong item on the page. So we need to create a calculated column that adds those characters in as well as our category and title. Note that if you are using Content Types you can add the column on the content type instead of at the list level.
1. So on our calendar Click “Create Column”
2. Give the Column the name “CategoryTitle” or another name you prefer and select “Calculated (calculation based on other columns)”
3. Now we will enter our formula to create the text we will display on our calendar.
a. Enter the following formula (Be sure to Replace “Category” and “Title” if you have replaced those fields.
b. Now Select “Single line of text” and click “OK”
Modify your Categories
If you have already created your calendar categories you can skip this step and move on to “Creating a Color Coded View”. In our case now we will be adding some review categories for a proposal review. Because we are changing category names we will need to make this change in the JS as well.
1. Click on “List Settings”
2. Click on “Category”
3. In my case I am entering different proposal review teams as my categories, but you can leave things as is or enter your own categories here then click “OK”
Creating a Color Coded View
Now we will need to create a calendar view that shows our calculated column instead of the title. You can also just edit the existing default view if you prefer.
1. Click “Create View”
2. Select the “Calendar View”
3. I am calling this calendar “Color Calendar” but you can name it anything. I am also using the default “Start Time” and “End Time” fields, but if you have replaced these pick the appropriate fields.
4. Here I am setting all of the title fields to the calculated column we created called “CategoryTitle”. If you named it differently select that field. Now we can click “OK”
Modify the JS with the Colors you want and the Categories you Created
At this point if you kept the default categories and you don’t care what colors are associated with each category then skip to “Adding the JS to your Calendar”
You can get the JS file at PlanetWilson or you can just use the text found in this section. Here is the full JS which we will be making a few changes to. Note that it uses the JQuery libraries as well.
1. The first thing you will want to do is copy and paste all of this into notepad or you editor of choice.
2. Now search for “Meeting” and replace that with your first category. Then for “Work Hours” and replace that with your next category and so on until you have replaced all of your categories.
a. Note that I only had 6 categories so I deleted the case “Birthday” and “Anniversary”. If you had more categories you can copy and paste an existing section as needed.
3. Now we can change the colors. “bgcolor” is the background color and “fgcolor” is the text color. Note that it is in HEX format and I like to use a site called http://www.color-hex.com to find out the correct color codes.
a. I want the colors to correspond to my categories and I want all of my text to be black so I made the following changes.
4. Now you can save this as a new file or just copy it to your clip board
Adding the JS to your Calendar
Now I can either add my color coded view to my existing view or add the calendar to a new page and select that view. In either case I need to copy and paste my JS on the page so it will work. For this example we will go ahead and just use the view page itself.
1. Note that I am on my view’s page (But any page where we are showing the view we created or modified will do). Click on the gear icon then “Edit page”
2. Now click on “Add a Web Part”
3. Select “Media and Content” then “Content Editor” then click “Add”
4. Now click “Click here to add new content” then on the ribbon click “Edit Source”
a. Note skip this step and go to “Add JS as a file to your calendar” if you prefer that method. It is recommended if you are using this on multiple pages.
5. Now copy and paste everything in your notepad into the window and click “OK”
6. If you don’t already have items in your calendar go ahead and create some events in your calendar
7. Note that now the color displays according to your category.
Adding JS as a file to your Calendar
Since you may want this functionality on multiple pages for your calendar it may be easier to save that JS you have in your notepad as a file. Then we can just point to that file in the content editor web part.
1. First let’s save the file as “ColorCalendar.txt”, you can name it anything.
2. Now go ahead and upload that document anywhere people who will be viewing the calendar will have access to. You may want to use the “Site Assets” or “Style Library” library if possible.
a. Note the URL of the file you just uploaded
3. Click the down arrow on the “Content Editor Web Part” then select “Edit Web Part”
4. Now enter in the relative URL to your file and click “OK”.
So as you can see it’s not too hard to add color coding to your calendar with whatever colors you want. The final file I copied and pasted and also uploaded is below for reference: