Thanks to Christophe over at the pathtosharepoint blog for his post on using CSS to shrink the OOB SharePoint Calendar down to something that can fit on the Home Page of your site without taking up the entire Page. You can read his post here Part 1 Part 2. I have also added the walk through to the Blog here at CantellayConsulting.

Start off by adding a monthly view of the SharePoint Calendar and a Content Editor WebPart, be sure to check the field to make the Content Editor WebPart hidden. 

In the Content Editor WebPart select the Source Editor button and copy and paste the below code into the editor.

<style type=”text/css”>  

/* Tiny Calendar */   
/* Christophe@PathToSharePoint.com */  
/* 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;}   
</style> 

This CSS will:

• Reduce the height of the Calendar cells
• Reduce the height of the Header
• Only keep the first letter of the Weekday
• Just keep the Previous and Next month in the Header
• Remove the Week Boxes to the left

Now lets add the ability to see events on the Calendar. 

To make these changes we are going to have to modify the display using one of two different methods. 

The first method, staying with modifying the CSS is to  Shrink the Title. this will display the title to small to read until the user hovers over them.

Add this code to the CSS that we added earlier.

/* events display */
.ms-cal-defaultbgcolor {padding:0;}
.ms-cal-defaultbgcolor a {font-size:3px;}
.ms-cal-monthitem a {font-size:3px;}
.ms-cal-monthitem a:hover {font-size:10px;}

The other method is to remove the title and replace it with a * until the user clicks on them. To do this create a new Column in the Calendar:

• name = “display”
• required = yes
• default value = “*”

Now in the View of the Calendar within the Calendar Columns section select the following:

There you have it, a new Small Calendar that you can use on your SharePoint site that will provide users with the date and easy access to events without eating up all of the space on your page. Again my thanks to Cristophe for the tip.