Friday, October 30, 2009

How to create a really small SharePoint Calendar

Well I guess I did not do my research enough and found a site that had an even smaller SharePoint calendar by just modifying the CSS.

With these styles below you can drastically transform your SharePoint Calendar view into a tiny box. Yes there is limited functionality but if you have been looking for something like this with no custom code you got it!

  (Left) No events                     (Right) Events populated



Copy this CSS code below and past it into your custom CSS!

/* Remove week blocks */
.ms-cal-weekempty {display:none;}
.ms-cal-week {display:none;}
.ms-cal-weekB {display:none;}
.ms-cal-weekB {display:none;}

/* Shrink cells */
.ms-cal-workitem2B {display:none;}
.ms-cal-noworkitem2B {display:none;}
.ms-cal-nodataBtm2 {display:none;}
.ms-cal-todayitem2B {display:none;}
.ms-cal-workitem {font-size:0px;}
.ms-cal-muworkitem {font-size:0px;}
.ms-cal-noworkitem {font-size:0px;}
.ms-cal-nodataMid {font-size:0px;}
.ms-cal-todayitem {font-size:0px;}

/* thin out header */
.ms-cal-nav {display:none;}
.ms-cal-nav-buttonsltr {display:none;}
.ms-cal-navheader {padding:0px;spacing:0px;}
.ms-calheader IMG {width:15px;}

/* Abbreviate weekdays */
.ms-cal-weekday {letter-spacing:6px; width:22px; overflow: hidden;}

/* Adds border to bottom */
border-bottom: 1px #6f9dd9 solid;



Jacob said...

Hi, I´m using Sharepoint 2010, but i can´t get it to work when i put the CSS code in to a XML Viewer (using style /style as well).

Can you please help me?

Anonymous said...

u should make .ms-cal to .ms-acal in wil work,,