Make a calendar appear small on my SharePoint 2007 page

NOTE: For SharePoint 2010, go to the end of this article.
 
I can’t take credit for this one. I found it on-line, but I have lost the link. If anyone knows the original provider, please chime in.
The idea here is that when you put a calendar web part on a web part page, it takes up most of the page. It would be nice to be able to control the appearance of the calendar to make it take up less room. Here are two images to show the difference:
 
Normal –

default calendar web part

Calendar web part by default

 
 
 
Calendar resized

Calendar web part resized by javascript

 
 
 
 
 
 
 
 
 
 
To achieve this look is very simple. Follow these step by step instructions and you’ll be in business.
 
 
Go to Site Actions and select Edit Page.
 
Add a Content Editor Web Part (CEWP).
Drag the CEWP to the bottom of the web part zone that the calendar is in (or at least under the calendar).
Edit the web part.
Click on the Source Editor button.
Copy in the following text:
<style type=”text/css”>
/* 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>
 
I recommend hiding the CEWP – no need to show it.
Save the edits to the web part.
Save the edits to the page (remember to Publish if this is a publishing page).
And wah-lah! You should have a miniturized calendar on the page. If you click on the title of the calendar, it should take you to a page that has the “blown up” version of the calendar.

 

 

UPDATE – the format in SharePoint 2010 is considerably different. Do the same basic thing as described above, but use the following CSS:

 

<style>
.ms-acal-header TD { VERTICAL-ALIGN: top}
.ms-acal-rootdiv TD { VERTICAL-ALIGN: top}
.ms-acal-rootdiv TH { VERTICAL-ALIGN: top}
.ms-acal-rootdiv { FLOAT: right; MARGIN-LEFT: 0px; OVERFLOW: hidden}
.ms-acal-vitem { VISIBILITY: hidden; BACKGROUND-COLOR: #f2f2f2}.ms-acal-month-weeksel { VISIBILITY: hidden; WIDTH: 16px}
.ms-acal-summary-dayrow TH { BORDER-RIGHT: #b6c5c6 0px solid; BORDER-TOP: #b6c5c6 0px solid; VISIBILITY: hidden; BORDER-LEFT: #b6c5c6 0px solid; CURSOR: pointer; BORDER-BOTTOM: #b6c5c6 0px solid; BACKGROUND-COLOR: #ced8d9 }
.ms-acal-month-top { PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; WIDTH: 40px; COLOR: #919649; PADDING-TOP: 2px; BORDER-BOTTOM: #b6c5c6 1px solid; TEXT-ALIGN: center }.ms-acal-summary-dayrow TH { BORDER-RIGHT: #b6c5c6 0px solid; BORDER-TOP: #b6c5c6 0px solid; VISIBILITY: hidden; BORDER-LEFT: #b6c5c6 0px solid; CURSOR: pointer; BORDER-BOTTOM: #b6c5c6 0px solid; HEIGHT: 0em; BACKGROUND-COLOR: #ced8d9 }.ms-acal-summary-itemrow TD DIV { MARGIN: 0px 1px; WIDTH: 40px; HEIGHT: 40px }
.ms-acal-vlink IMG { VISIBILITY: hidden; MARGIN-RIGHT: 3px} .ms-acal-vlink A:hover { VISIBILITY: hidden}
</style>

Advertisements

About lelandholmquest

After serving in the Navy as a Reactor Operator on fast attack submarines, I earned both a Bachelor's and Masters in Information Technology from American InterContinental University and am currently working on my doctorate. I have a beautiful wife and two of the sweetest daughters a man could ask for. And I work for the greatest company: Microsoft. At Microsoft I work on the knowledge management system for Microsoft Services: Campus on Office 365.
This entry was posted in SharePoint Content Management Tips. Bookmark the permalink.

6 Responses to Make a calendar appear small on my SharePoint 2007 page

  1. scybh says:

    Hye, i cannot make it small. I’m using SharePoint 2013, does it compatible?

  2. Ada says:

    Normally I do not learn post on blogs, however I wish to say that
    this write-up very pressured me to check out and do it!
    Your writing style has been surprised me. Thank you, quite nice article.

  3. Stanley says:

    It’s actually a great and useful piece of info. I am satisfied that you just shared this helpful info with us. Please keep us up to date like this. Thank you for sharing.

  4. Erin says:

    Hi – I’m using Sharepoint 2007 but this isn’t working at all.
    I’ve followed your instructions – but no change.

    Can you assist? or point me in the right direction?
    Thanks

  5. ven says:

    not working any help, my calendar doesnt shrink 2007

  6. Fred says:

    Had to replace:
    with : to get it to work.
    Note the “-symbol is slightly different.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s