Sometimes it is useful to have a calendar on the home page of a site, but the Calendar view of the Events list item is very large, and doesn't fit well on the home page. Read below to see how to change the layout of the Calendar so that it is smaller and fits in with the other web parts.
I had a request to have a traditional calendar on the main page of a site. I set up an Events list, dragged that webpart to the home page, and then set the view to the Calendar view.
When using the calendar view for a webpart the month layout takes up a ton of space. It is not possible to adjust the Height using the appearance settings. The user wanted it to take up less space.
If you drag your mouse over the month view of the calendar you notice that it is structured to display 4 lines of text per day. If there are more than 4 appointments per day then it displays a "more..." in the 4th slot. This site calendar would rarely have 4 appointments, so showing only 3 would make things much smaller.
The calendar view is hardcoded and difficult to change. It is rendered via javascript and the code for it is in the ows.js file.
Looking through ows.js, I found the following:
this.SetDate(yr, mon, day):
if (this.iperiod == 0 ){
this.cchanMin = 4;
this.cchanMax = 4;
}
Searching online for "cchanMin", I discovered that yes, these are the min and max settings for the number of items that are displayed in the calendar view.
http://www.sharepointu.com/forums/m_13078/mpage_1/tm.htm
The "this.iperiod == 0" references the month view. There are also settings for the week and day views.
First I made a backup of the ows.js file, and then changed the min and max settings both to 3:
this.SetDate(yr, mon, day):
if (this.iperiod == 0 ){
this.cchanMin = 3;
this.cchanMax = 3;
}
In addition to this change, I also went to work on the CSS to tighten up some of the spacing.
First I found the correct styles via this tool:
http://sharepointblog.com/?p=4
There is way more white space than needed in the calendar layout. Luckily that can all be addressed in the THEME.CSS file. I made the following changes to reduce the font size and the white space:
.ms-caltop I changed height from 30px to 12px
.ms-caltop I added font-size:7px;
.ms-calhead I added font-size:10pt;
.ms-calmid I changed height from 20px to 12px
.ms-calmid I added font-size:7pt;
.ms-calspacer I changed height from 4px to 9px
.ms-appt I changed height from 18px to 14px
.ms-apptsingle I change height from 18px to 12px
.ms-apptsingle I added font-size:7pt;
These changes really tighten up the overall layout and make it much more front page friendly. Of course this is a change to a theme, so viewing the change requires that you first set the site to a different theme, then set it back to this theme, then hit F5 to reload the page and see the changes.
I have yet to find a way to push an updated theme out to all sites. If you know of a way, please post it.
