How to Shrink a SharePoint Calendar View

Have you ever needed to add a Event Calendar to your Team Site with the calendar view but you didn’t because it basically took up the whole site? Well just today I was messing around with this and came up with some interesting results.

If you look at the code for a calendar view everything looks fine except for a hidden shared class at the very top of the calendar right below the webpart title.

This image is 742 pixels wide and forces the calendar view to be minimally that width. With the CSS below you can now hide that image and allow the calendar to fit within your team site with no problems at all. By making these changes you will not change the look of the full view of the calendar when you click on the event list. The screenshot below was taken with 1024x768 resolution.

Here is the CSS:

.ms-calheader img{
display: none;
}

#CalViewTable12 img{
display: inline;
}

.ms-cal-nav-buttonsltr{
white-space: nowrap;
}

Full Calendar View with styles applied:

Enjoy!