SharePoint Calendar View Width

SharePoint calendar widths breaking your custom design? Yea, they’re pretty wide. Here’s how you can tame them.

For the default Month and Day view, you can apply the following style:

.ms-calheader img { width: auto; }

This will reset the width for a spacer image that the fine folks at Microsoft have decided to give this enormous amount of width to.

For the Week view, you need an additional style rule (hold your breath for this one):

.ms-cal-wtopday div img, .ms-cal-wtopdayL div img, .ms-cal-wtopdayLover div img, .ms-cal-wtopdayover div img, .ms-cal-wtopdayRTL div img, .ms-cal-wtopdayRTLL div img, .ms-cal-wtopdayRTLover div img, .ms-cal-wtopdayRTLLover div img, .ms-cal-wtopdayfocusover div img, .ms-cal-wtopdayfocusLover div img, .ms-cal-wtopdayfocusRTLover div img, .ms-cal-wtopdayfocusRTLLover div img, .ms-cal-wtopday-todayRTLover div img, .ms-cal-wtopday-todayRTLLover div img, .ms-cal-wtopday-todayRTL div img, .ms-cal-wtopday-todayRTLL div img, .ms-cal-wtopdayfocusRTL div img, .ms-cal-wtopdayfocusRTLL div img, .ms-cal-wtopdayfocusL div img, .ms-cal-wtopdayfocus div img
{
width: 80px;
}

Holy smokes! Good thing were not optimizing stylesheets for web performance right? This is a cumulative width that is specified for each day column. The value for the width you specify here will by multiplied by 7 to make up the overall width for the view.

There you have it – minimized widths for your calendars. Now go ahead and create a calendar event and set the title to “Supercalifragilisticexpialidocious” – yea, there’s somethings in life that you just can’t fix – SharePoint is one of them.