In part I, we saw how to adjust the size of an empty SharePoint month calendar to fit in the right column of our home page. Now our next step is to display the events.

As you can expect, the default display will be too big for our tiny calendar. So here are two tricks to work around this issue.

Method 1: no title display

In SharePoint 2007, you can choose which column to display in the month view. So let’s create an additional column:
- name: “Display”
- required: yes
- default value: “*”

In the view settings, choose [Display] as month view title. The result: for each event, SharePoint will display a simple “*” that will fit into the day cell.

This works fine, but the user has to click on the item to actually see the event. This may be an issue, especially if several events happen on the same day.

Method 2: shrink the title

So another option is to keep the title and use some CSS magic. Here is the deal: a title will be displayed in small fonts by default (unreadable), but will get back to normal size when the user hovers over it (see the screenshot at the beginning of this post).
To achieve this we’ll just add a few rules to the CSS from part I:

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

This second method is more user-friendly, if your titles are not too long.

There are of course many variations around these two methods, here are for example some other text adjustments you can use:
http://www.w3schools.com/Css/css_text.asp

And remember: all of this was done using CSS only, no harm was done to the structure itself. The SharePoint calendar remains fully operational (recurring events, alerts, filters, etc.).

Possibly related posts: (automatically generated)