Supporters of End User
Web

SharePoint Color Coded Calendar - The PayRoll Schedule

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:Color Coded Calendar; Site Manager/Power User; MOSS; WSS; 2007; 2010

Update: Jim Bob has sent a 17 minute screencast of his solution which includes another way to assign colors.

After watching Mark Miller's Screen-Cast, Color Code a SharePoint Calendar, I realized this was the perfect solution for transforming a payroll schedule on an Excel spreadsheet into a SharePoint Calendar to make it more visually appealing and user-friendly.

First Things First

Since I was beginning with a simple list of dates that was already color-coded, converting it to a calendar following Mark's screen-cast was a snap!

Color Coded Calendar
Payroll Schedule in Excel

Of course, the first task was to create a SharePoint Calendar, in three easy steps:

Color Coded Calendar
1. Create
Color Coded Calendar
2. Create Calendar
Color Coded Calendar
3. New Calendar

Presto!

Color Coded Calendar
Basic Payroll Calendar

Show Me the Money

The basic calendar is nice and you can display lots of useful information using it this way. But the payroll calendar is something that folks will look at often and the most important question is When do I get paid?

So, let's create some fields that will help us make Payday stand out, while providing color-coded information about some other important dates, as well.

Comments

Christophe

SharePoint Color Coded Calendar – The PayRoll Schedule

Just a precision: for calendar views, the script is actually in this post:
http://pathtosharepoint.wordpress.com/2008/11/15/sharepoint-calendars-color-coding-hover-effects-etc/

Posted 17-Apr-2009 by Christophe
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

Thanks, Christophe! Sorry about that.

Posted 17-Apr-2009 by Jim Bob Howard
Screencast: Color Code a SharePoint Calendar - The PayRoll Schedule | End User SharePoint

SharePoint Color Coded Calendar – The PayRoll Schedule

[...] SharePoint Color Coded Calendar - The PayRoll Schedule [...]

Posted 17-Apr-2009 by Screencast: Color Code a SharePoint Calendar - The PayRoll Schedule | End User SharePoint
Jayesh

SharePoint Color Coded Calendar – The PayRoll Schedule

Hi,
we can use following code using jQuery to replace innerHTML instead Christophe’s code


if(typeof jQuery=='undefined'){
var jQPath = 'https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
document.write('');
}



$(document).ready(function(){
$("a:contains('

Posted 19-Apr-2009 by Jayesh
Frank

SharePoint Color Coded Calendar – The PayRoll Schedule

I work for a military hospital and use the Outlook calendar because of the color codes. We are currently using WSS3.0 for our Intranet and each department and clinic use also use the Outlook calendar. We will upgrading to MOSS in June 2009. Our ‘main calendar’ is what the staff is able to view. I would like to be able to set one color as the ‘standard’ for the hospital. Here is the list we use.
APFT/CTT = Green, Hospital = Orange, Schools = Gray, Meeting/Conference/VTC = Yellow
Hope you can help.
Thanks,

Posted 20-Apr-2009 by Frank
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

Dear Frank,

I have sent Mark three more short screencasts of ways to implement the color-coded calendar when your choices don't have a common letter in a unique position.

He's planning to run them as a series. Stay tuned.

Blessings,
Jim Bob

Posted 21-Apr-2009 by Jim Bob Howard
Christophe

SharePoint Color Coded Calendar – The PayRoll Schedule

Frank, I have just released a "formula generator". It is basic but may help you get started:
http://www.pathtosharepoint.com/HTMLcc/default.aspx
Note that in your specific example you may have to remove the "/" in your categories as they are special characters in html.

Posted 21-Apr-2009 by Christophe
Flora

SharePoint Color Coded Calendar – The PayRoll Schedule

Is it the same with Excel web page, if we want to change the color of the column

Posted 23-Apr-2009 by Flora
cloudno9

SharePoint Color Coded Calendar – The PayRoll Schedule

Great, thanks for this step by step instructions.
I followed all the steps and at the end I have payroll calender. Only thing I am having trouble is "HR Deadline" it still shows me

Regards,
T.I.A.

Posted 27-Apr-2009 by cloudno9
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

cloudno9,

I would need to take a look at how that one may be different.

If all of the rest are working fine, that tells me something is being messed up in the HTML. Post the full HTML that is being displayed and I can help you trouble-shoot it.

Blessings,
Jim Bob

Posted 27-Apr-2009 by Jim Bob Howard
Cloudno9

SharePoint Color Coded Calendar – The PayRoll Schedule

Here is the code that I am using to convert that calculated field text into html...


//
// Text to HTML
// Feedback and questions: Christophe@PathToSharePoint.com
//
var theAs = document.getElementsByTagName("a");
var i=0;
var AContent = " ";
while (i = 0)) {
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = AContent;
theAs[i].innerHTML = "";
theAs[i].appendChild(tempDIV);
}
}
catch(err){}
i=i+1;
}


and this is what I am getting on my calender for HR Deadline....

HR Deadline: 1

Let me know if you need something else.

Regards,

Posted 27-Apr-2009 by Cloudno9
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

It's the code around HR Deadline that I need to see. If you pasted it with the "

Posted 27-Apr-2009 by Jim Bob Howard
Webape

SharePoint Color Coded Calendar – The PayRoll Schedule

I too am having the same issue: everything works but the HR Deadline. that is drawing html code instead.
If you spot the issue, let me know.

Posted 27-Apr-2009 by Webape
Webape

SharePoint Color Coded Calendar – The PayRoll Schedule

One more clue: when I set the HR Deadline to be an all day event it works.

Posted 27-Apr-2009 by Webape
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

cloudno9 and Webape,

Skip the "DIV" portion of the tag and post what it's giving you in the rest of the tag, starting with "style='border..."

Blessings,
Jim Bob
howardj@ausrad.com

Posted 27-Apr-2009 by Jim Bob Howard
Webape

SharePoint Color Coded Calendar – The PayRoll Schedule

This is what is showing for the HR Deadline
if I set it to 4:00 PM

Style='border:1px #800000 solid; padding: 5px; margin: 0px;color:#800000; background-color:#ffcccc;'>HR Deadline:1

Posted 27-Apr-2009 by Webape
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

And when you change it to All Day Event, what do you get?

Posted 27-Apr-2009 by Jim Bob Howard
Webape

SharePoint Color Coded Calendar – The PayRoll Schedule

I get the colored box as in your example minus the "4:00 PM" above it.

Posted 27-Apr-2009 by Webape
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

Click on that item and post what is in the Display field (minus the DIV again)

Posted 27-Apr-2009 by Jim Bob Howard
Webape

SharePoint Color Coded Calendar – The PayRoll Schedule

Style='border:1px #800000 solid; padding: 5px; margin: 0px;color:#800000; background-color:#ffcccc;'>HR Deadline:1

Posted 27-Apr-2009 by Webape
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

Webape: Email me: howardj@ausrad.com.

I want to check something. Perhaps we can solve this offline and then just post the solution. ;)

Posted 27-Apr-2009 by Jim Bob Howard
Dan Wilcox

SharePoint Color Coded Calendar – The PayRoll Schedule

Very useful, Jim Bob. Thank you for taking the time to post!

Posted 27-Apr-2009 by Dan Wilcox
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

Another way to calculate the right colors, especially if you don't have a common character in a unique location.

Posted 27-Apr-2009 by Jim Bob Howard
eric nordlund

SharePoint Color Coded Calendar – The PayRoll Schedule

This is great, I've been trying to figure out how to do this for a while now. I almost tried to buy an application to accomplish this goal.

Is there a way to get rid of the extra whitespace at the bottom of the calendar after this is done?

Posted 29-Apr-2009 by eric nordlund
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

Eric, I don't have whitespace at the bottom of mine. Have you hidden the CEWP?

If not, try this...

1. From Site Actions choose Edit Page
2. On the CEWP, click edit -> Modify Shared Web Part
3. In the Edit pane, expand Layout
4. Check the Hidden box
5. Click OK
6. Click Edit Exit Mode

HTH

Blessings,
Jim Bob

Posted 29-Apr-2009 by Jim Bob Howard
Ken Johnson

SharePoint Color Coded Calendar – The PayRoll Schedule

Jim Bob,

Many thanks for posting this solution!!

KJ

Posted 29-Apr-2009 by Ken Johnson
eric nordlund

SharePoint Color Coded Calendar – The PayRoll Schedule

Thanks Jim Bob, I did do that, but it didn't update immediately so I didn't see it. Works great!

Posted 29-Apr-2009 by eric nordlund
cloudno9

SharePoint Color Coded Calendar – The PayRoll Schedule

any update on this yet?

Thanks

Webape: Email me: howardj@ausrad.com.

I want to check something. Perhaps we can solve this offline and then just post the solution.

Posted 30-Apr-2009 by cloudno9
7 Minute Screencast: Color code a SharePoint Calendar - Update | End User SharePoint

SharePoint Color Coded Calendar – The PayRoll Schedule

[...] SharePoint Color Coded Calendar - The PayRoll Schedule [...]

Posted 30-Apr-2009 by 7 Minute Screencast: Color code a SharePoint Calendar - Update | End User SharePoint
Neeti

SharePoint Color Coded Calendar – The PayRoll Schedule

This is working very well.
Is there a way to change the color based on the current date? So, if there is an activity planned for tomorrow, this should show in Amber. If the activity is planned for today, it should show as Red.

Posted 01-May-2009 by Neeti
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

Neeti: Great question. I will work on a solution and post my findings in the next few days.

Posted 02-May-2009 by Jim Bob Howard
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

Neeti,

Two questions:

1. Are colors only based on date and not a type of event?

2. What color for items more than one day in the future and in the past?

Blessings,
Jim Bob

Posted 04-May-2009 by Jim Bob Howard
Neeti

SharePoint Color Coded Calendar – The PayRoll Schedule

Jim,
What I am looking for is that the color should depend on the type of event for all future and past events.
But as soon as the date when the event is expected to happen arrives, the color becomes red [#ff0000] or better still would be, if it could start flashing...
I day before the event is due to happen, the color should become amber [#ffc000].

So, if an event is scheduled to happen on 05-May-2009, then on 04-May-2009, it should become amber, and on 05-May-2009, it should become Red.

Thanks
Neeti

Posted 04-May-2009 by Neeti
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

I see. I'm going to have to punt on this one for a time. If you're needing a quick answer, I recommend looking into Christophe's suggestions on working with [Today] here, here, and here.

If you get it working, I would love to see the solution you found!

Blessings,
Jim Bob

Posted 04-May-2009 by Jim Bob Howard
owen

SharePoint Color Coded Calendar – The PayRoll Schedule

Hi

I found that I needed to recreate the CEWP with null values, move it to foot of page (below Calendar), exit web page, then go back and paste in a fresh copy of Chrisptophes code to get it to work for single day events - multi day events worked OOTB

web development is so much fun : )

Posted 08-May-2009 by owen
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

Webape and cloudno9, take a look at owen's solution and see if that doesn't help.

Posted 08-May-2009 by Jim Bob Howard
Cloudno9

SharePoint Color Coded Calendar – The PayRoll Schedule

Hi Jim,
Single day event works if its a full day event. but when you have the event from (lets say) 12:00pm to 2:00pm than it shows the "div" code for that event.

Posted 08-May-2009 by Cloudno9
owen

SharePoint Color Coded Calendar – The PayRoll Schedule

Further:

people make similar comments to mine in Christophes blog and it will work - exact reasons for multiple failures unknown.

It works for all meeting lengths for me - minutes to multiple days.

several pieces of advice:
1. follow Chrisptophes advice in comment 1 to get the code from the right place.

2. I found that it didn't work a couple of times until I used his copy to clipboard at head fo code (vs highlight and copy)

3. I use the Hide weekends code from Christophe as well - had to get the day highighter working first (under the calendar), then added the hide weekend afterwards - ie keep it simple to start with, and finally

4. Check your column code - in my case it had to do with nested ' and " - passed the sharepoitn acceptance but didnt display right.

Good luck

Posted 10-May-2009 by owen
Scott

SharePoint Color Coded Calendar – The PayRoll Schedule

This is a great solution for a MOSS shortcoming! I got our organization calendar working with one minor problem. If I click on the week view in the calendar any events that are repeating (recurrence) the title does not show up. The only thing in the time block is the circular recurrence symbol. All other events display normally in the week view. In the month and day view all events display perfectly.

Any suggestions?

Posted 15-May-2009 by Scott
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

That's a great question for Christophe.

Christophe, how could your code be modified to change the way the time and recurrence icon are displayed? As it is, the time and recurrence icon are displayed above our calculated box. In the week view, the colored box doesn't show up at all.

Thoughts?

Posted 15-May-2009 by Jim Bob Howard
eric nordlund

SharePoint Color Coded Calendar – The PayRoll Schedule

Love the calendar. Is there a way to put a key on there so users can know what the colors mean? I think I could put some little color boxes in the description bar at the top, but I can't figure out how to get the bar to display html. My code just shows up in the bar as code.

Posted 15-May-2009 by eric nordlund
Christophe

SharePoint Color Coded Calendar – The PayRoll Schedule

I have published an update that should address the issues with intraday and recurring events:
http://pathtosharepoint.wordpress.com/2008/11/15/sharepoint-calendars-color-coding-hover-effects-etc/
I plan to publish a more complete update in a couple weeks.

@eric: simply add the key as html. See a similar example in the following post:
http://pathtosharepoint.wordpress.com/2008/09/29/another-example-of-progress-bar/

Posted 16-May-2009 by Christophe
Scott

SharePoint Color Coded Calendar – The PayRoll Schedule

Christophe: I tried using the updated code you you linked to above on 15 May and it did not work at all. After the failure I reinserted the old code and it worked as before, month and day view perfect, week view does not show the time or title on recurring, only the circular recurring symbol. I am trying to get my group to adopt the color coding, but without the week view showing all events properly I am getting pushback. Appreciate any help you can give me.

Posted 21-May-2009 by Scott
Christophe

SharePoint Color Coded Calendar – The PayRoll Schedule

Scott: did you remember to replace the DIV tag with a SPAN in the formula, as explained in my updated post? Feel free to send me your formula:
Christophe@PathToSharePoint.com

Posted 23-May-2009 by Christophe
Brad Dickerson

SharePoint Color Coded Calendar – The PayRoll Schedule

Did anybody figure out why some people are getting DIV code for hourly appointments and it works for the all day events, I think Cloudno9 was having this problem. I changed my code to SPAN, and got the same issue. Thanks for any help on this in advance.

Posted 09-Jul-2009 by Brad Dickerson
david

SharePoint Color Coded Calendar – The PayRoll Schedule

I added the code and followe dthe video a few times but i keep getting the code on the cell instead of the color cell. do i need to turn javascript on the SP server, or somehting else

Posted 19-Jul-2009 by david
Dustan Roed

SharePoint Color Coded Calendar – The PayRoll Schedule

Here's a neat trick...

In your display column, you can determine an all day event (ADE) by checking TEXT([start time], "h:mm")="19:00". If that is true, you can render a DIV tag, which gives the nice stretched-out color we are seeking. If it fails, use a SPAN tag for non-ADEs, but you may want to play with the formatting a bit by setting a standard height and width.

I would like to find a way to hack the surrounding DIV in sharepoint for non-ADEs in week and day view. Anybody got any ideas?

Posted 20-Jul-2009 by Dustan Roed
Bas

SharePoint Color Coded Calendar – The PayRoll Schedule

I'm testing this solution, but I have problems with normal calendar entries - they are showing as code. Only all day events works properly.
When I check a web page source of calendar before any changes was made I can see that in normal calendar entries I didn't have any after but they exists in all day events - maybe this is a problem.

What can I check to make this solution run properly?

Regards

Bas

Posted 03-Aug-2009 by Bas
owen

SharePoint Color Coded Calendar – The PayRoll Schedule

Bas
check Christophes blog on the same subject. I left an entry there explaining how I had to recreate the calendar anew with the colour coding as it just wouldnt work with an existing calendar.

Software is just like this sometimes (it wasnt just caching at the browser/server either as far as I could tell - just wouldnt 'take' the new design and display HTMl properly).

It will work - persist : )

Posted 03-Aug-2009 by owen
Bas

SharePoint Color Coded Calendar – The PayRoll Schedule

Colour coding script from http://pathtosharepoint.com/ works ok :))
Thank You very much :))

Best regards

Posted 04-Aug-2009 by Bas
Scott S

SharePoint Color Coded Calendar – The PayRoll Schedule

For the code showing on the hourly events I resolved it by adding to the JavaScript. I had it recognize the B tag (bold around the time) just like the A and TD tags. Works perfect now.

Posted 13-Aug-2009 by Scott S
Oscar

SharePoint Color Coded Calendar – The PayRoll Schedule

Hi,

I got this working fine with the DIV tags on the Month view, but when I switch to a day view or week view, I just see the html code instead of the tags.

Is everybody else that has this working seeing the color shading correctly on the Day view and Week view?

Posted 18-Aug-2009 by Oscar
Frank

SharePoint Color Coded Calendar – The PayRoll Schedule

I'm still having problems with this calendar. I get an 'error' message when I click 'OK'. Hope some one can really help. I would like to be able to use for our 'Training Calendar.' Check comment #5 above. Here is the code I followed the step above.
=""&DateType&": "&[Pay Period]&"

Posted 19-Aug-2009 by Frank
owen

SharePoint Color Coded Calendar – The PayRoll Schedule

Frank - see my comments 35.38.39

the keys for me were to create a NEW calendar rather than try and fix one that didnt work and to use Christophes code.

Persistence is key

Posted 19-Aug-2009 by owen
jeff

SharePoint Color Coded Calendar – The PayRoll Schedule

Great kick starter! Thanks.

Fyi, the colors don't have to be HEX RGB. There are plenty of standard colors defined which every browser supports today as part of HTML standards. A great reference site is http://www.w3schools.com and follow the links to CSS styles.

Posted 21-Aug-2009 by jeff
theerdman

SharePoint Color Coded Calendar – The PayRoll Schedule

Great demo for static data. On the calculated fields, is there a way to update for every instance of the recurring appt or are you stuck with only the first date when the item was created?

The reason i am asking is we have a monthly meeting that quarterly gets additional members. Trying to show some differentation for the facilitators so they know that this will be a larger audience meeting on the calendar. So far i am having no luck doing so. Any help is greatly appreciated.

Posted 24-Aug-2009 by theerdman
Matt

SharePoint Color Coded Calendar – The PayRoll Schedule

I really don't understand the significance of the commas in the "Color" column.

=CHOOSE(FIND("d",DateType,1),,,,"#008000",,,"#800000",,,"#800080")

Four comman, then three commas, then three commas. What does it mean, what is the significance? Can someone please explain this to me?

Posted 28-Sep-2009 by Matt
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

Dear Matt,

Yes, the significance lies with what the CHOOSE function is going to return.

Note the following paragraph above:
For example, in "Payday," the d is in the 4th position, so FIND returns 4. The CHOOSE function then becomes =CHOOSE(4,,,,"#008000",,,"#800000",,,"#800080). The fourth position has "#008000" so that becomes the value of Color for this row.

In this example, our CHOOSE function will only return 4, 7, or 10. The commas put responses in the fourth, seventh, and tenth positions. If there was a possibility that something else could be chosen, you might want to fill in the other positions with a "default" color, and/or check for an error and give a default color if ISERROR returns true.

I hope that helps!

Blessings,
Jim Bob

Posted 28-Sep-2009 by Jim Bob Howard
Betty

SharePoint Color Coded Calendar – The PayRoll Schedule

I followed Owen's recommendation and created a new calendar and used Christophe's HTMLToText v2.1 from the pathtosharepoint/download library, but had the same problem with items that were not all day items. They wouldn't display properly in the week and day calendar views. Can you provide any suggestions to make it work?

Posted 04-Nov-2009 by Betty
Christophe

SharePoint Color Coded Calendar – The PayRoll Schedule

Betty, a workaround is to make the following change:

var regexpA = new RegExp("\\s*\\s*");
(remove the last $ in the expression)

This will be fixed in the upcoming version 3.

Note for the participants in the visualization workshop: the Web Part you have received includes this modification.

Posted 05-Nov-2009 by Christophe
Betty

SharePoint Color Coded Calendar – The PayRoll Schedule

Christophe,

Thanks! The correction made it better. Now it works in Month and Day views; the week view is also improved, but is not quite there yet. It doesn't show the script anymore, but it only shows the time in the default Microsoft pale blue box. Doesn't show the color or the contents that the display column is set to show--(=""&DateType&"")). I double checked the calendar view setting and the week view is set with Display as the Week View Title with DateType as the subHeading. Any ideas?

Posted 06-Nov-2009 by Betty
Christophe

SharePoint Color Coded Calendar – The PayRoll Schedule

I'll look into it. Feel free to e-mail me more details (screenshot, formula, etc.):
christophe@pathtosharepoint.com

Posted 07-Nov-2009 by Christophe
Christophe

SharePoint Color Coded Calendar – The PayRoll Schedule

btw it works fine in my live demo:
http://www.pathtosharepoint.com/Calendars/Lists/WorkshopCalendar/calendar.aspx

Posted 07-Nov-2009 by Christophe
Betty

SharePoint Color Coded Calendar – The PayRoll Schedule

Christophe,

Just wanted to check that you got my e-mail with the details you asked for.

Posted 13-Nov-2009 by Betty
Christophe

SharePoint Color Coded Calendar – The PayRoll Schedule

Hi Betty,

I did, and sent you this reply the same day:
the first change is to use span tags instead of div tags, as explained here:
http://pathtosharepoint.wordpress.com/2008/11/15/sharepoint-calendars-color-coding-hover-effects-etc/

Posted 13-Nov-2009 by Christophe
Michael

SharePoint Color Coded Calendar – The PayRoll Schedule

Hi, I followed every step and replicated everything. I just have a an issue regarding this, when I view the calendar in weekly/day, the coede doesn't work.

can anyone help me solve this?

Posted 18-Nov-2009 by Michael
Christophe

SharePoint Color Coded Calendar – The PayRoll Schedule

For those who can't make it work in week/day view, here is a summary of the previous episodes:
1/ check out the original article and the updates:
http://pathtosharepoint.wordpress.com/2008/11/15/sharepoint-calendars-color-coding-hover-effects-etc/
In particular, make sure you use span tags, not divs.
2/ grab the latest version of the text to html here (and bookmark the page for upcoming updates):
http://www.pathtosharepoint.com/HTMLcc/default.aspx
3/ if it still doesn't work, see the little tweak in comment 60 above (this will be fixed in the upcoming version 3)
4/ if it works, let us know!
4/ and if it still doesn't work, send me more details:
christophe@pathtosharepoint.com

Posted 18-Nov-2009 by Christophe
HTML Calculated Column: minor update… and some advice « Path to SharePoint

SharePoint Color Coded Calendar – The PayRoll Schedule

[...] comments from readers on the EndUserSharePoint.com blog. Several months ago, Jim Bob Howard posted an example using my method. His post offers detailed step by step explanations, and is very popular. However, a few readers [...]

Posted 19-Nov-2009 by HTML Calculated Column: minor update… and some advice « Path to SharePoint
EndUserSharePoint

SharePoint Color Coded Calendar – The PayRoll Schedule

Christophe, Thanks for the update. I'll be posting a reference to your new article some time today. Mark

Posted 19-Nov-2009 by EndUserSharePoint
Update: SharePoint Color Coded Calendar – PayRoll Schedule | End User SharePoint

SharePoint Color Coded Calendar – The PayRoll Schedule

[...] April, Jim Bob Howard provided us with a very popular solution for calendars, SharePoint Color Coded Calendar – The PayRoll Schedule. This was based off of Christophe Humbert’s work on Path to [...]

Posted 19-Nov-2009 by Update: SharePoint Color Coded Calendar – PayRoll Schedule | End User SharePoint
Angela

SharePoint Color Coded Calendar – The PayRoll Schedule

Hi,
I am having the same problem as previously mentioned (by Betty) in a calendar. The color coding works great in all views (day/week/month) for the items marked as "ALL DAY EVENT", however, for the items that have a determined START TIME and END TIME, the item is in pale blue (rather than the color I assigned) and is displayed with the "START TIME" that is clickable (rather than the "title" I had set to be clickable).

I have done all of the below as posted by Christophe earlier, so I am looking for further assistance.
"For those who can’t make it work in week/day view, here is a summary of the previous episodes:
1/ check out the original article and the updates:
http://pathtosharepoint.wordpress.com/2008/11/15/sharepoint-calendars-color-coding-hover-effects-etc/
In particular, make sure you use span tags, not divs.
2/ grab the latest version of the text to html here (and bookmark the page for upcoming updates):
http://www.pathtosharepoint.com/HTMLcc/default.aspx
3/ if it still doesn’t work, see the little tweak in comment 60 above (this will be fixed in the upcoming version 3)
4/ if it works, let us know!
4/ and if it still doesn’t work, send me more details:
christophe@pathtosharepoint.com"

Please let me know any information required; I would be happy to provide code/screenshots.
Thank you,
Angela

Posted 16-Jan-2010 by Angela
EndUserSharePoint

SharePoint Color Coded Calendar – The PayRoll Schedule

Angela - Christophe has setup a forum on Stump the Panel to handle questions about the color coded calendar solutions. Post your question there and he'll get right on it. -- Mark

Posted 17-Jan-2010 by EndUserSharePoint
Angela

SharePoint Color Coded Calendar – The PayRoll Schedule

Thank you, Mark.
Under Christophe's Forum: Path to SharePoint Workshop Solutions, I found the Forum: SharePoint Calendar Solutions, with 1 topic posted: Calendar Month View Add Fields. I have not found an exact forum setup to handle color coded calendar solutions. Shall I post my question as a new topic under the Forum: SharePoint Calendar Solutions? I just want to make sure I don't start something new when a topic already exists.
Thanks,
Angela

Posted 17-Jan-2010 by Angela
Christophe

SharePoint Color Coded Calendar – The PayRoll Schedule

Angela, that would be the right place. However, I am surprised that my instructions from November are not enough. I have also responded to the e-mail you sent me directly.

Posted 17-Jan-2010 by Christophe
Angela

SharePoint Color Coded Calendar – The PayRoll Schedule

Thank you Mark and Christophe for such quick replies. I made an error when changing the DIV to SPAN. I have corrected this, and all events (intra-day included) are color coded ~~thank you! But now have the "strange wrapping issue" as presented by Susan earlier. My apologies if a solution is posted to this and I am overlooking it. I am trying to follow all of the posts to avoid bugging you with redundant questions.
Thank you,
Angela

Posted 17-Jan-2010 by Angela
Christophe

SharePoint Color Coded Calendar – The PayRoll Schedule

Susan, the wrapped issue is not due to the method, and you'd have the same issue with normal text (for example a long title).
Ben's comment to use DIVs is technically not correct, although it works in most cases. Actually, my first post (in 2008) used DIVs, but I later updated it to SPANs.
If you'd like to continue the discussion, please follow Mark's advice and use the forum. This way you may also get input from other users.

Posted 17-Jan-2010 by Christophe
Kris

SharePoint Color Coded Calendar – The PayRoll Schedule

This is driving me bananas, I have followed the screencast, seem to be recreating the columns and code correctly but can't seem to reproduce this. Not sure what is going on but I am ready to bang my head on the desk. I am sure I have a comma in the wrong place in my expression or some such.

Posted 25-Jan-2010 by Kris
EndUserSharePoint

SharePoint Color Coded Calendar – The PayRoll Schedule

Kris - Try Stump the Panel. Jim Bob is on there everyday and you might convince him to walk you through it. -- Mark

Posted 26-Jan-2010 by EndUserSharePoint
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

Post your formulas here and we'll try to help you debug.

Blessings,
Jim Bob

Posted 26-Jan-2010 by Jim Bob Howard
Kris

SharePoint Color Coded Calendar – The PayRoll Schedule

Initially I tried this:
=""&Title&""
This gave me syntax errors over and over despite moving code here and there.

which didn't work so I tried just using the formula from Christophe's site which gave me this:
=" "&Title&""
still no dice

I copied the code from Christophe's website for the CEWP and pasted it into Source then placed it below the calendar as directed. Modified the views several ways. Just can't get it to work.

Posted 26-Jan-2010 by Kris
Jim Bob Howard

SharePoint Color Coded Calendar – The PayRoll Schedule

First of all, make sure your quotes are not smart quotes.

Posted 26-Jan-2010 by Jim Bob Howard
Kris

SharePoint Color Coded Calendar – The PayRoll Schedule

They aren't; they are coming through on this post as smart quotes for some reason, sorry.

Posted 26-Jan-2010 by Kris
Jay

SharePoint Color Coded Calendar – The PayRoll Schedule

Great, great post! Thanks Jim Bob, Christophe, and Mark.

I was able to modify the steps to set up a color coded calendar to track personnel activity (vacation, sick leave, FMLA, LWOP). Because there aren't any common letters in any of those choices I used IF statements in the calculated columns as follows:

ActivityType:

Vacation
Sick Leave
FMLA
LWOP

Color:

=IF(ActivityType="Vacation","#ccffcc",IF(ActivityType="Sick Leave","#ffcccc",IF(ActivityType="FMLA","#ffccff",IF(ActivityType="LWOP","#ffcc99))))


BGColor:

=IF(ActivityType="Vacation","#008000",IF(ActivityType="Sick Leave","#800000",IF(ActivityType="FMLA","#800080",IF(ActivityType="LWOP","#)008800)))


I changed the Display field so that it displays as Title:ActivityType:

=""&LeaveType&": "&Title&""


Added Christophes script and voila I have a color coded Personnel Activity calendar. Something I have been hearing screaming about for quite some time.

Thanks guys, the info is much appreciated!

Posted 19-Feb-2010 by Jay
Jay

SharePoint Color Coded Calendar – The PayRoll Schedule

Not sure why the last piece of code didn't post there. Should be as follows:

="DIV style='border:1px "&Color&" solid; padding:5px; margin:0px; color:"&Color&"; background-color: "&BGColor&";'>"&ActivityType&": "&Title&"</DIV"

Might have been the DIV's Add before and after the DIVs as appropriate.

Posted 19-Feb-2010 by Jay
Derek

SharePoint Color Coded Calendar – The PayRoll Schedule

Hi,

Great post. I got all the way to the end and I have the code appearing, but when I put in Christophe's code it didn't make a color box, it only displays the code. I made sure to move the CEWP to the bottom. Can you help?

Here is what it shows on the calendar rather than a nice colored box:
Committee Meeting: HP Meeting

Posted 05-Mar-2010 by Derek
Derek

SharePoint Color Coded Calendar – The PayRoll Schedule

It looks lile my code didn't send through my last post.

Posted 05-Mar-2010 by Derek
phil

SharePoint Color Coded Calendar – The PayRoll Schedule

using your guides I setup a nice calendar for planning infrastructure releases but the multi-day events that had those little white lines on top & bottom were driving me crazy, so I figured how how to change the HTML margin / padding to cover the event bar in the calendar...

adding an IF statement in the tag that changes the margins and padding if the event is more that one day.

here's the column that I display before (with the line on top and bottom)
=""&Application&" - "&Category&""


here's the column that I display after
="0,"margin-top:-4px;padding-top:5px;padding-bottom:5px;margin-bottom:-6px;","")&"width:100%;text-align: center;border: 1px "&Color&" solid; color:"&Color&";background-color:"&BGColor&";'>"&Application&" - "&Title&""

Posted 25-Mar-2010 by phil
phil

SharePoint Color Coded Calendar – The PayRoll Schedule

ok - I removed the ""&Application&" - "&Category&"/SPAN"

here’s the column that I display after:
="SPAN style='"&IF(datedif([Start Date],[End Date],"D")>0,"margin-top:-4px;padding-top:5px;padding-bottom:5px;margin-bottom:-6px;","")&"width:100%;text-align: center;border: 1px "&Color&" solid; color:"&Color&";background-color:"&BGColor&";'>"&Application&" - "&Title&"/SPAN"

Posted 25-Mar-2010 by phil
phil

SharePoint Color Coded Calendar – The PayRoll Schedule

ok - it's jut not working... here's the if statement i added to the HTML:

&IF(datedif([Start Date],[End Date],”D”)>0,”margin-top:-4px;padding-top:5px;padding-bottom:5px;margin-bottom:-6px;”,”")&

Posted 25-Mar-2010 by phil
Tasha

SharePoint Color Coded Calendar – The PayRoll Schedule

This worked out great. However, I also want to make sure the time doesn't show up on the calendar. Previously i've used a calculated column with the "=TEXT([columnnamehere], "MM/DD/YYYY")" successfully but I can't seem to combine it with this solution. Any ideas would be appreciated!

Posted 07-May-2010 by Tasha
silvia

SharePoint Color Coded Calendar – The PayRoll Schedule

Thanks for the great post and code tweaks suggestions. I noticed that in Jay's last code there is a small issue.
Here is the correct one
=""&ActivityType&": "&Title&""

Posted 21-Jun-2010 by silvia
silvia

SharePoint Color Coded Calendar – The PayRoll Schedule

strangely the code does not show up properly

Posted 21-Jun-2010 by silvia
EndUserSharePoint

SharePoint Color Coded Calendar – The PayRoll Schedule

Not sure what code you're referring to. There is no code block in this article, just screenshots. -- Mark

Posted 21-Jun-2010 by EndUserSharePoint
Tasha

SharePoint Color Coded Calendar – The PayRoll Schedule

Good Morning Mark!
She's (Silvia's) referring to the code Jay included in the comments. I think it's the DIV tags, Jay had the same issue in his original post :-)

Posted 21-Jun-2010 by Tasha
Umesh

SharePoint Color Coded Calendar – The PayRoll Schedule

Phil, I found your entry most interesting as I am trying to achieve exactly that. However, I am struggling to get it it work. WOuld you be able to post full details to the changes yo made to the original payroll calendar please.

Posted 29-Jun-2010 by Umesh
Archoo

SharePoint Color Coded Calendar – The PayRoll Schedule

Hi -

I got the color-codomg to work witht he calnedar . Thank You!!!

We are currently on SPS 3.0 and looking to upgrade to SP2010. WIll this code continue to work with SP2010.


Thanks,

Posted 23-Sep-2010 by Archoo
Joe

SharePoint Color Coded Calendar - The PayRoll Schedule

Why is the contrast on this page so bad?

Posted 13-Feb-2013 by Joe

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: