A tiny cute SharePoint calendar (Part I)
Have you noticed these cute month calendars that people sometimes put on the homepage of their Website?Now, have you tried to drop a SharePoint month calendar on the home page of your SharePoint site? The result… not so cute: the calendar eats up half of the screen.
In this post I am going to show how with the help of CSS you can shrink your SharePoint calendar and make it fit in the right column of a SharePoint page. The picture shows you the expected result.
So let’s start by dropping on our right column a monthly view of the calendar and a hidden Content Editor Web Part. In the source editor of the CEWP, paste the code below:
/* 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;}
What this CSS does:
· height:- Reduce the height of the calendar cells- Reduce the height of the header
· width:- Only keep the first letter of the weekday names- Simplify the header options to just keep previous and next month- Reduce the “bone” that forces the width of the header- Remove the week boxes to the left of the calendar
Note that if you click on a day, SharePoint will open a full size day view of your calendar – I have chosen to keep this as the expected behavior. If you don’t like it you can simply deactivate the JavaScript that triggers the day view.
We now have our cute calendar that tells us that today is October 6 and that October 28th is a Tuesday.
The next step is to display the list items, so that I know for example that Halloween is on October 31st. This will be the object of part II. Of course, we’ll have to accept some constraints because of the reduced size of the calendar.
Update [Feb 6, 2009]: several people asked about the bottom border. To get it, in the Web Part settings select:Appearance Chrome type border only.
Update [Jan 22, 2009]: the above stylesheet is for SharePoint 2007. For SharePoint 2003, you can try this:
.ms-calMid {height:0px;}
.ms-CalSpacer {height:0px;}
.ms-calhead {padding:0px;spacing:0px;}
Have you noticed these cute month calendars that people sometimes put on the homepage of their Website?Now, have you tried to drop a SharePoint month calendar on the home page of your SharePoint site? The result… not so cute: the calendar eats up half of the screen.
In this post I am going to show how with the help of CSS you can shrink your SharePoint calendar and make it fit in the right column of a SharePoint page. The picture shows you the expected result.
So let’s start by dropping on our right column a monthly view of the calendar and a hidden Content Editor Web Part. In the source editor of the CEWP, paste the code below:
/* 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;}
What this CSS does:
· height:- Reduce the height of the calendar cells- Reduce the height of the header
· width:- Only keep the first letter of the weekday names- Simplify the header options to just keep previous and next month- Reduce the “bone” that forces the width of the header- Remove the week boxes to the left of the calendar
Note that if you click on a day, SharePoint will open a full size day view of your calendar – I have chosen to keep this as the expected behavior. If you don’t like it you can simply deactivate the JavaScript that triggers the day view.
We now have our cute calendar that tells us that today is October 6 and that October 28th is a Tuesday.
The next step is to display the list items, so that I know for example that Halloween is on October 31st. This will be the object of part II. Of course, we’ll have to accept some constraints because of the reduced size of the calendar.
Update [Feb 6, 2009]: several people asked about the bottom border. To get it, in the Web Part settings select:Appearance Chrome type border only.
Update [Jan 22, 2009]: the above stylesheet is for SharePoint 2007. For SharePoint 2003, you can try this:
.ms-calMid {height:0px;}
.ms-CalSpacer {height:0px;}
.ms-calhead {padding:0px;spacing:0px;}
