Monday, August 2, 2010

Tiny SharePoint Calendar

Have you tried dropping a SharePoint month calendar on the home page of your SharePoint site? The result… not so cute: the calendar eats up half of the screen.

 In this post I am going to show how with the help of CSS you can shrink your SharePoint calendar and make it fit in the right column of a SharePoint page. The picture shows you the expected result.

So let’s start by dropping on our right column a monthly view of the calendar and a hidden Content Editor Web Part. In the source editor of the CEWP, paste the code below:

<style type="text/css">

/* Tiny Calendar */

/* 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;}


What this CSS does:

* height:

- Reduce the height of the calendar cells
- Reduce the height of the header

* width:

- Only keep the first letter of the weekday names
- Simplify the header options to just keep previous and next month
- Reduce the “bone” that forces the width of the header
- Remove the week boxes to the left of the calendar

Note that if you click on a day, SharePoint will open a full size day view of your calendar – I have chosen to keep this as the expected behavior. If you don’t like it you can simply deactivate the JavaScript that triggers the day view.

We now have our cute calendar that tells us that today is October 6 and that October 28th is a Tuesday.

The next step is to display the list items, so that I know for example that Halloween is on October 31st. This will be the object of part II. Of course, we’ll have to accept some constraints because of the reduced size of the calendar.

How about the bottom border. To get it, in the Web Part settings select:
Appearance -->Chrome type -->Border only.

Thanks to Christophe:

No comments: