SharePoint Calendar CSS – Clean and Condensed

One of the SharePoint branding tasks that I find rather frustrating is skinning the Calendar control. The control is already pretty complex with the multiple views and options for appointments, but add in the fact that every line and color block is run by its own style and you have the making of a bad branding headache.

I attempted to document many of the styles in my CSS Chart, but realistically it isn’t feasible for me to document every single calendar style in that chart.  Instead I have gone through and combined duplicate rules and commented the declarations so you know what styles are changing what elements in the calendar.

About the CSS Code

My version of the calendar CSS isn’t the default blue, but instead in shades of gray. The CSS code references four images (on lines 95, 102, 110, 117) and uses the default image for the current day marker that OOTB SharePoint does (on line 129).

Click on the links to see screen shots of the calendar:  Month View; Week View; Day View.

I am not suggesting you keep the calendar in gray tones, it is just what the code is formatted to do.  Please take this CSS and run with it and customize it to your own color palette.  And hey, if you want to share, let me know and I will post your CSS on my site (and give you credit).

Things to Watch Out For…

Themes

If you are using a theme, styles in the theme may override some of the calendar styles.  If you are only using a theme, just list these calendar styles at the end of the file.  If you are using a Theme with a Master Page, you may have to put these styles in the theme.css file, or store the calendar styles in a file on its own and import the file into both your master page and theme CSS files.

SharePoint Designer

SPD has a nasty habit of expanding combined duplicate rules.  The fact that the rules are combined in this style sheet is what makes it so handy.  The OOTB SharePoint calendar style sheet is so bloated mainly because the same styles are listed over and over.  This version combines rules, making it a lot simpler to rebrand the calendar control. I haven’t pinpointed when SPD expands out the styles, but I have opened and closed a CSS file several times, then the next time I open it all of the styles will be expanded. It is a royal pain.  After you make your CSS customizations (and this goes for any CSS file) I recommend making a backup copy of the file and storing it somewhere so if SPD does expand out your styles you are covered and don’t have to spend a lot of time combining them again.

Alternatively, don’t even use SPD to edit your styles and instead use a CSS editor (like TopStyle) to make your changes.

Simplified Calendar

This calendar heavily uses combined styles, which means when you change a color for the horizontal lines, all of the horizontal lines will be updated.  If you looking to specify a lot of different colors for the various components of the calendar, this version of the calendar styles is not for you.

Colors are in RGB Values

If you aren’t used to using RGB values for colors in your CSS don’t be alarmed by the RGB codes in this file.  Just swap it out for named colors or HEX values if you would like to use that instead.   For example:

border:solid 1px rgb(0, 0, 0);

change to…

borer: solid 1px #000000; or border: solid 1px black;

Enough already, how about the file?

Here you go.  Zip file includes CSS file and 4 images.  Make sure you add the images (if you plan on using them) and reference them correctly in the style sheet.

Download Heather’s Clean Calendar CSS Code