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.
Tags: SharePoint
No Comments
Comments RSS
TrackBack Identifier URI
No comments. Be the first.
Leave a comment