Article Categories
Archives
Post Categories
  Jump to Information for:
Search:  

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

posted on Tuesday, November 20, 2007 11:20 AM
Comments
  •  re: SharePoint Calendar CSS - Clean and Condensed
    Julianne
    Posted @ 11/20/2007 4:31 PM
    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.
  •  re: SharePoint Calendar CSS - Clean and Condensed
    Steve Walsh
    Posted @ 11/28/2007 8:08 PM
    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 PM
    This is the event

    Is 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.
  • # re: SharePoint Calendar CSS - Clean and Condensed
    Heather Waterman
    Posted @ 11/30/2007 6:36 PM
    "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.
  •  re: SharePoint Calendar CSS - Clean and Condensed
    terra
    Posted @ 12/4/2007 12:10 AM
    Why is it so important to keep the style rules combined? is it going to effect that output in anyway?
  •  re: SharePoint Calendar CSS - Clean and Condensed
    Reshmi Singh
    Posted @ 12/21/2007 5:49 PM
    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
  •  re: SharePoint Calendar CSS - Clean and Condensed
    Reshmi Singh
    Posted @ 12/21/2007 6:05 PM
    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
  •  re: SharePoint Calendar CSS - Clean and Condensed
    Dean
    Posted @ 1/10/2008 12:03 PM
    Do you know how to hide the weekends to show just the work week, like we can in Outlook?
    Thanks
  •  re: SharePoint Calendar CSS - Clean and Condensed
    Stacie
    Posted @ 1/11/2008 4:26 PM
    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?
  •  re: SharePoint Calendar CSS - Clean and Condensed
    Darius
    Posted @ 2/14/2008 5:01 AM
    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.
  •  re: SharePoint Calendar CSS - Clean and Condensed
    Albert
    Posted @ 2/19/2008 3:31 PM
    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.
  •  re: SharePoint Calendar CSS - Clean and Condensed
    Scott
    Posted @ 4/10/2008 8:00 AM
    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
  • # re: SharePoint Calendar CSS - Clean and Condensed
    Estetik
    Posted @ 5/14/2008 4:09 PM
    This is exciting as many people at Microsoft have been working hard to make sure popular PHP applications work great on Windows.
  •  re: SharePoint Calendar CSS - Clean and Condensed
    Brian
    Posted @ 5/25/2008 1:49 PM
    This is great!!!! You saved me alot of time.
  •  re: SharePoint Calendar CSS - Clean and Condensed
    Mike
    Posted @ 6/19/2008 10:12 AM
    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
  •  great work!!
    renzo
    Posted @ 7/1/2008 10:00 AM
    It's amazing, you avoid me troubles and saved my time

    thanks
Title  
Name  
Email (never displayed)
Url
Comments   
ALL COMMENTS ARE MODERATED! Sorry for the inconvenience, but it is how I keep all of the spam and advertisers out. I moderate comments about once a week and your comment will appear soon. Thanks for posting!
Please add 4 and 7 and type the answer here:

Copyright © 2005-2008. Heather Solomon.
Site design by Heather Solomon

Blog Stats:
Posts - 365
Stories - 37
Comments - 1303
Trackbacks - 182