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

21 thoughts on “SharePoint Calendar CSS – Clean and Condensed”

  1. Once again, thanks for your great work. Last time I worked on customizing calendar on Sharepoint Designer, I was puzzled why the coding was so complicated and as a result, it took me awhile to write overriding CSS styles. Now I understand what Sharepoint Designer did.

  2. Heather, excellent article. I just finished modifying the calendar, and I agree, what a headache it was!!!! Too bad this was not available a month ago, but it is good to get into it and figure it all out. There is alot of extra css for the calendar…I do have a question, and it is related to the calendar, but not so much the style… When you click on the Month View, each item is given as:3:00 PMThis is the eventIs there anyway to get rid of the time part? So that the even title is just shown? I have been trying to get rid of it for some time now, and have had no success… Any help would be appreciated.

  3. “I haven’t pinpointed when SPD expands out the styles…It is a royal pain.”Expression does this as well, it happens when you copy and paste something in Design View . Corrie, another developer at PixelMill found the trigger. So if you are working on a page that uses the CSS (calendar page and calendar CSS) and you copy and paste anything in Design View, that is when your CSS styles expand. It does not make any difference if your CSS sheet is open or closed. If you are aware of the problem, just keep an eye on your style sheet and you can CTRL-Z (undo) and hopefully get your page back to it’s nice tidy formatting.Heather W.

  4. Hello All,Which CSS file do I have to update to customize the look and feel of the calendar? Is it theme.css…I can’t find it…where can I check…please advise…Thanks,Reshmi

  5. Hello all,wrt my earlier post, i found the file locations of calendar CSS. But, i don’t have access on our sharepoint server to access the css files. is there a way that i can access them from sharepoint designer ?Best regards,Reshmi

  6. Hey Heather, I have a couple calendar.css questions. Here’s the history first. To make it easy on myself with my style sheets, I made a copy of Core.css to use as a base. In my custom master page I removed all references to core.css and removed the theme line. Then I added my new css copy. When I did this my Calendar on my site was missing all the gridlines. The only way I figured out how to fix this was to attach the calendar.css stylesheet to my master page.When I troubleshooting this, I opened the calendar.aspx file and noticed that there are several calendar.css stylesheets attached and I cannot delete any of them. So, if I wanted to use your clean calendar.css file do I need to overwrite the calendar.css file?

  7. Is there a way to shrink the calendar web part on a Sharepoint 2007 publishing site page? I need the functionality but also need to shrink/scale the size down to approx 190px/190px. I need to do this OOB only using js or css I need to fit it to the smaller right panel. When I reduce the size of the web part I get scroll bars but the size of the calender remains large within the box.

  8. Is there an easy way to display different types of events in different colors on the same display: for instance, all events from one individual in blue, all events from a particular group in brown, etc.

  9. I’m seeing user questions, but not finding the responses. Are they posted someplace? I’m specifically looking for answers to the questions from Dean and Darius.Thx

  10. This is exciting as many people at Microsoft have been working hard to make sure popular PHP applications work great on Windows.

  11. Heather,Tried your css for the calendar and running into the problem that some of the classes in your css doesn’t match SharePoint’s case and therefore doesn’t override the styles. When I modify your classes to match case, they work. Why am I having this problem? Both Firefox and IE7 experience this issue.Thanks,Mike

  12. Can Anybody tell me how to remove 12 .00 AM from the calendar view if i am showing an item of other list in this calendar list… I am not able to find a solution. If i use a All Day Event in calendar list then the the problem is solved but if i want to show the item of another list for two days span in this calendar list then it is showing Time as 12.00 AM even if i have chosen DATE only instead of Date and Time while creating the column in the list.Your help will be highly appreciated….

  13. Great time saver. just what i was after.Just one thing to note. Some of the classes in the stylesheet are the wrong case and as a result certain styles were not being modified.eg.ms-cal-noworkitemrtl2bshould be.ms-cal-noworkitemrtl2Bat least that’s in my version.

Comments are closed.