(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:
<style type="text/css">
/* Tiny Calendar */
/* Christophe@PathToSharePoint.com */
/* 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;}
</style>
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:
<style type="text/css">
/* Tiny Calendar - SharePoint 2003 */
/* Christophe@PathToSharePoint.com */
.ms-calMid {height:0px;}
.ms-CalSpacer {height:0px;}
.ms-calhead {padding:0px;spacing:0px;}
</style>
(Part II)
October 11, 2008 in
Content Editor Web Part,
SharePoint 2007,
Styles/CSS
In
part I, we saw how to adjust the size of an empty SharePoint month calendar to fit in the right column of our home page. Now our next step is to display the events.
As you can expect, the default display will be too big for our tiny calendar. So here are two tricks to work around this issue.
Method 1: no title display
In SharePoint 2007, you can choose which column to display in the month view. So let’s create an additional column:
- name: “Display”
- required: yes
- default value: “*”
In the view settings, choose [Display] as month view title. The result: for each event, SharePoint will display a simple “*” that will fit into the day cell.
This works fine, but the user has to click on the item to actually see the event. This may be an issue, especially if several events happen on the same day.
Method 2: shrink the title
So another option is to keep the title and use some CSS magic. Here is the deal: a title will be displayed in small fonts by default (unreadable), but will get back to normal size when the user hovers over it (see the screenshot at the beginning of this post).
To achieve this we’ll just add a few rules to the CSS from part I:
<style type="text/css">
/* Tiny Calendar */
/* Christophe@PathToSharePoint.com */
/* 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>
This second method is more user-friendly, if your titles are not too long.
There are of course many variations around these two methods, here are for example some other text adjustments you can use:
http://www.w3schools.com/Css/css_text.asp
And remember: all of this was done using CSS only, no harm was done to the structure itself. The SharePoint calendar remains fully operational (recurring events, alerts, filters, etc.).
You may have noticed that when you print lists including my examples of progress bars, the colours are not rendered. This is actually the expected behaviour: when printing Web pages, background colours are usually ignored by the browser.
If you need dynamically generated visualizations for your SharePoint data, have you considered leveraging the power of the Calculated Column? 
