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:
<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>
How can i disable the java script so that users are not directed into the day view
Awesome! This worked perfectly. Thank you very much.
All – I’ve tried this and also the color calendars but neither works. Is it possible our IT department has disabled Java script? We’re on MOSS 2007 and I placed the CEWP under the calendar…
This is very unlikely as SharePoint itself relies on Javascript.
Have you checked out the troubleshooting section:
http://pathtosharepoint.wordpress.com/2008/11/01/troubleshooting-your-html-calculated-column/
This is very cool, thanks for working it out. 2 questions for you:
1. When I implemented this, the calendar did not shrink as far as the example screenshots you posted. Mine is still 3x the size of your screenshots — any ideas?
2. I too would like to know how you deactivate the javascript that fires when you click a day.
Many thanks for posting this!
Steve
Steve, my method changes the rigid calendar into a soft one that fits in the column width. My screenshot is for a right side column. If you need to control the width, use the settings in the Web Part itself.
As for your point 2: OK, I’ll work on this…
Ah, you are so right — I had a second web part in the right zone that was throwing it off. Thanks for the reply!
I’ll look forward to your thoughts on deactivating the onclick!
Here is a first proposal to deactivate day clicks:
.ms-cal-topdayover {visibility:hidden;}
.ms-cal-topday-todayover {visibility:hidden;}
Let me know what you think. Maybe not perfect, but I’d like to keep it simple and stick to CSS.
Thanks Christophe, that is pretty close to perfect.
I really appreciate your posting this project and your quick responses to my n00b questions!
Steve
Hi, I am using sharepoint webpart and I would like to shrink the size . thanks to you for the code. It works perfectly as far as the width goes. But what should i do, if i need to shrink the height of the calendar. Please help
Thx a lot for this CSS. I<ve been waiting for these exact lines for almost 2 years now.
Thx again
Sudha: are you saying that the height in the above picture is too much for you?
Hi Christophe, I am fairy new to the sharepoint designer. In the welcome page I created the calendar webpart. Once I added the webpart, the calender got bigger in width and height and the page got bigger.
I was searching the net for the solution and I came across your code. So i applied it to my calendar in Content Editor WebPart and added the Your CSS Code. The width got decreased, but the height of the calendar cells remain the same. So Please tell me what should i do to adjust the height of the calendar. It would be really helpful. Thanks
Sudha: do you display events in your calendar?
If so, it is normal that the calendar takes more space. You may be interested in part II:
http://pathtosharepoint.wordpress.com/2008/10/11/tiny-sharepoint-calendar-2/
If not, your calendar should look like the above picture.
As of now its just empty calender. I also tried part 2 its still the same. It doesn’t look like above picture. I am using sharepoint designer 2007.
The method is for SharePoint 2007, you don’t need “SharePoint Designer”.
Hard to tell what’s going on, feel free to send me more details, including screenshots or a link, to Christophe@PathToSharePoint.com
Does this need to be in Moss or can this be accomplished in WSS? I am having difficulty with getting this to work. When I add a CEWP and drop the code into the Source Editor nothing happens. Am I missing a step? I am not a DEV but a high level user. Thanks for your help!
This will work in WSS, see the live demo here:
http://8002.freesharepoint2007.com/default.aspx
Have you checked out the troubleshooting section:
http://pathtosharepoint.wordpress.com/2008/11/01/troubleshooting-your-html-calculated-column/
This is great! Three questions, as I am an IT admin not a programmer or designer: I had to deactivate the day clicks (using the code above) because I could not (did not see how to) return to the month view after clicking on a day to get the day view. How can I return to month view from day view? Also, Is there a way to display the day/week/month icons that show when calendar is not shrunk? Also, where do I find the javascript you mentioned in your post? Thanks!
Joan: the part that hides the calendar navigation is under “thin out header”, simply remove what you don’t need.
I haven’t written the JavaScript, instead youy can use some CSS (see above comments).
This is great! I’m trying to edit the “thin out header” section so there is an option to click on month view once you are in day view and vise-versa. It’s working alright in day view but now in my default month view it’s showing Expand All, Collapse All, Day, Week, Month and looks messy.. what would the code be to only show Day and Month view options?
/* thin out header */
.ms-cal-nav-buttonsltr {display:????;}
.ms-cal-navheader {padding:0px;spacing:0px;}
.ms-calheader IMG {width:15px;}
Thanks in advance!!
Hi Melissa, did you ever figure out a solution? Thanks!
This does not work with SharePoint Portal Server 2003 as there is no “ms-cal” class to modify. I’m trying to find a solution but am running out of ideas. I can find no record of an official bug being reported anywhere either (the OOTB solution of changing the Height property of the Web Part simply doesn’t work).
Marc: that’s correct, the styles are for SharePoint 2007 (although there is also a “ms-cal” class in SP 2003).
Try to start with this:
<style type="text/css"> .ms-calMid {height:0px;} .ms-CalSpacer {height:0px;} .ms-calhead {padding:0px;spacing:0px;} </style>Hi Christophe,
Thanks for the tip, it worked! Could you tell me how you uncovered these classes? I can’t find any reference to them in either the .aspx file itself or the source of the webpage once it’s displayed.
I found this page which has a complete list of classes in SPS2003 which can be modified:
http://www.sharepointcustomization.com/resources/tipstricks/wss_cssguide.htm
Thanks for the lead Christophe, it’s much appreciated.
Christophe,
This is of great value! Is this the same action I would take to put it into a WSS 2.0 page? Thank you.
Karen, I have updated the post for wss 2.0 / SharePoint 2003.
Thank you! I thought that was new since I posted.
Okay – you rock. Tiny, cute, and SharePoint – my favorite things ;P
Hi Christophe,
Thanks for sharing this. I just tried it and it works pretty good. I like the fact that I can do all that without using sharepoint designer and it takes only couple minutes to implement it.
One thing I noticed is that in my case it the calendar looks a bit wider. Doesn’t look like a rectangle like your screenshot. Also, the bottom border of the calendar is not showing up.
Would you be able to help? If you can email me, I can send you a screenshot, if it will help understanding it.
Not sure why the bottom border wouldn’t show up and it doesn’t seem like anybody else reported this. I think it looks wider because of the right zone in my site, but I think I can use the web part’s fixed width to take care of that.
Thanks.
My script makes the calendar soft. It then fits in your page, and the size depends on the surrounding Web Parts. You could tweak the script to force a given width, but it may not look good on your page.
Actually, I already got questions about the bottom border. I have updated the post.
Thanks, the bottom border is back. I’ll play with the width options.
Hi Christophe, the cute and tiny calendar is great, however, I am looking for a few things:
1. Main portion of screen the full calendar, got it
2. Listing of events on the right column, got it
3. Tiny calendar, few issues
When I did the tiny calendar, my full size in the middle column became small too.
Question 1: can I have the middle one normal and a tiny one on the right column?
Question 2: can I display the year with multiple tiny calendars rather than just one month?
Thanks.
How can i disable the java script so that users are not directed into the day view?
it works great but the day columns are too wide, doens’t look lik your image on the top
As already commented, the script just makes the calendar soft, so that it fits in the column. You can then choose to force a width by changing the properties of the CEWP.
Christopher,
YOU are my hero!!! As the average Sharepoint adminstrator, I do not have access to modify files on the server. This allows the average administrator to shrink the calendar WITHOUT having to know any code or update any server files. THANK YOU!!!!
I do have one question – we display the monthly view in the middle (main) section. Do you know how to make the week row height default to a certain size? It looks a little strange in the main view – day column width is +/- 2 inches but the height is only .5 inches. I know the day height will grow as you add new events, but is there any way to set a default to AT LEAST make it 2 inches (and then expand if needed)??
Thanks Jennifer
To make the calendar higher, try removing some of the style formatting in my post. For example, remove:
.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;}
Or remove:
.ms-cal-workitem2B {display:none;}
.ms-cal-noworkitem2B {display:none;}
.ms-cal-nodataBtm2 {display:none;}
.ms-cal-todayitem2B {display:none;}
Another fantastic solution! Thank you so much.
Hey Christophe
I’m trying to set up a compact week calendar. The goal is to fit the whole work-week into the right column of a two-column page design. I’m already using your Text-to-Html and work week scripts, which work fine so far.
When i use your CSS for the mont calendar for the week viev the width of the day columns get all messy, which means they have not all the same width.
I would be very interested in some script that allows a compact week view.
Greetings
Paul
Paul: recently a reader sent me a script for the week view, however it still needs some work. I’ll be sure to publish it as soon as it is ready.
Hi Christopher,
I would also be very interested in the weekly script as your monthy view is EXACTLY what I’ve been looking for, thank you! Would love to have the option for the weekly view as well.
Great work again.
Cheers,
Matt
Christophe,
Thanks for providing this solution for everyone to see.
I’m having two problems I hope you can help with:
1. Like others above, I can’t get the width of the days down to what you have in your screen shot. I’ve played with the “Width” option under “Modify Shared Web Part” for both the Calendar and the CEWP. If I adjust the size of the calendar width, it just gives me scroll bars. The width doesn’t seem to have gone “soft”. Is there code I can add to the CEWP to set a fixed width for the days?
2. The solution you provided to disable the java script trigger for clicking through to a day works fine. But, I’m wondering if theres a way to keep the function, but have that particular web part sent back to the calendar view after clicking a day?
I have several day view calendars with filtered information on the page, and I would like to use one Month view calendar to select the day to view (otherwise it shows only today, and you can only click through one day at a time on the day view calendar web parts.) As is, I can click a day on my “Mini”calendar and it will change the day displayed on all the other web parts, but then the calendar view has dissappeared and the user cannot easily view another day’s series of events.
Sorry for the long comment.
Thanks.
Found a different solution to do what I wanted. I was able to export a webpart from one of the application templates that did what I want.
Is there a way to make a 3-month calendar view?
Christophe – Worked great – many many thanks!!! On to your second tutorial as we have many events in the Calendar…
I’ve discovered what the source of the problem is… but not the solution.
There is an image above the calendar that is inside of a table cell at the very top of every calendar view pulled from server/_layouts/images/blank.gif that is set to the width 742 pixels… That decides the width of the overall calendar view no matter what css code is applied. It seems that for some installations of sharepoint the code “.ms-calheader img {width:auto;} is supposed to fix this. However, in mine, this only controls the previous day/next day button size.
Changing the DefaultTemplates.ascx in certain places is also supposed to remedy this situation. But I have had no luck.
Does anyone have different code that affects this?
Hi Christophe,
Thanx for this beatiful calendar, but please how can i get to display in full at the bottom, it get cut off.
Khomotso: to get the line at the bottom, you need to select a border in the chrome options of the Web Part.
Hi! Thanks for this useful post.
How do I change the date numeral font size in WSS 2.0? I’ve used this site as reference: http://www.sharepointcustomization.com/resources/tipstricks/wss_cssguide.htm
Thanx a lot!!! It works wonders!!!!
Christopher
how can you revert back to the month view from the day view?
thanks
You mean back to the page that contains the calendar? I’d say you need to use the back button of your browser.
Of course, the day view has a month button, but I don’t think it is what you were asking for…
Ok. My question is what about an action on hover to reveal what is within each date or even an event list below the calendar for the current date. Like an event list maybe use a script to control the # of events ie 0-5 events I am trying that as my approach. I think it would validate the use of the calendar a little more.
Part 2# of my question:
I am trying to also make the event hover menu and allow for a clickable to each event within that date.
Kris: first, you’ll find some ideas in part II of this article.
You may also be inspired by this great post from Paul Grenier.
On my side [plug] I’ll show a couple options in the October 16 online workshop dedicated to calendars [/plug].
Christophe – I read this on your article: “you can simply deactivate the JavaScript that triggers the day view.” Can you please provide instructions on how to do this? Thanks for the instructions!
I just found the info above, thanks! It seems to work for all the days on the month except the current day. You can still click the highlighted current day, and it goes to day view. Any suggestions on that?
Iris, could you try this:
.ms-cal-topdayover {visibility:hidden;}
.ms-cal-topdayfocusover {visibility:hidden;}
.ms-cal-topday-todayover {visibility:hidden;}
Hi Christophe, nice work on this.
I also have border not showing issues (missing full bottom and one part of right). Have tried chrome settings suggested but does nothing. Any other suggestions?
Cheers
Mark, are you saying that the border doesn’t show up even if you set the chrome to “title and border”? This is weird…
Do you see this behavior on IE7/IE8, or are you using another browser?
Christophe,
I am having the same problem. I cannot see the bottom border. I have tried editing the CEWP to “border only”. When that did not work I tried “title and border”. That did not work either. I have tried editing the size in the CEWP appearance and that does not work as well.
Any solutions?
Thanks so much, I love everything else about the calendar!
Hi, I’m a total beginner — I created a CEWP and pasted your HTML code into it, but no calendar shows up at all — I must be making some basic mistake – any ideas? Do I just use your code as given or does there need to be other code around it? THANK YOU!
A usual mistake with beginners is to place the code in the text editor of the CEWP instead of using the source editor. Did you fall in this trap?
Good point, but I did use the source editor. Do I have to publish/approve it to see the calendar? So far I have just checked it in and seen nothing. I’m really excited about using this calendar BTW, LOVE the way it looks!
You’re saying no calendar shows up…did you include a calendar Web Part in the page? The purpose of this code is to shrink an existing calendar, not create one from scratch.
Ah ha . . . I feel very embarassed — told you I was a beginner! (blushing)
So I should create the calendar web part first, then open the source editor and insert your code?
No problem
Yes, you need a standard calendar Web Part, in the right column of your home page. Plus a CEWP with the code. The code will make your calendar spineless and it will fit in the right column.
Also, check part II for more information.
OK, I will try that. Thank so much for you all your help, Christophe!
It worked, yay! Thanks again, Christophe!
Hi Christophe,
For some reason, this is not working at all on my page.
I checked the source on the Calendar list, and I’m thinking,
is it because the original Calendar List has too many inline style codes?
I really want this to work.
I tried just doing the first part as well – removing the week blocks, but nothing seems to work.. Can you help out?? :`(
jessie, I don’t know what to say… it should just work, with any calendar on SharePoint 2007.
This worked perfectly. Thanks so much for sharing!
Christophe,
Thanks for posting this very cool solution!
A follow up question: When clicking on the day of the month, SharePoint takes you to a Day View. This isn’t bad when you have multiple events occuring on the same day. The problem is that the size of the text is still only 3 pts. Is there a way to display the events on the Day View at normal size? Also, you mention in your October 11, 2009 at 5:58 am post “On my side [plug] I’ll show a couple options in the October 16 online workshop dedicated to calendars [/plug].” Is there a way to display the detail for an event in another webpart on the same page below the tiny calendar when it is hovered or selected?
Thanks again, your site has some of the best and easiest to implement ideas!
Is there a way to display the detail for an event in another webpart on the same page –> Yes! (this is also in the workshop).
As for the text size, I’d say yes, but I haven’t tried. You’ll need to refine the css selectors so that the rules don’t apply to the day view.
Hi,
Thanks for the great article and solution.
I have tried it using a normal moss 2007 team site and it works great.
But if the site is created using a different language pack (i.e upon creating the site you pick a default language/locale for the site)
the calendar is indeed smaller in size, but it is disformed a bit, meaning it is streched vertically, all the cells are rectangles and not squares it looks really bad.
Any idea what could be the issue!
Regards
Excellent instruction, your addendum for SP 2003 worked a treat
Thanks so much for this code. Works fantastically!
thanks for useful posting, keep writing. btw your blog theme very cool… I like the color
Hi Chris,
This is the follow up on Joan’s question posted on the 23 Dec 2008 on how to return to the month view after clicking on a day. How do I return to month view from day view? I have used the other tips that you have provided. I must say, it is amazing! Thank you very much for knowledge sharing.
There is not a short answer to this.
SharePoint has an interesting querystring called “Source”. For more details on how to use it, search my blog and the Internet.
As I already mentioned, my objective with this specific post is to propose a light solution, this is why I am sticking to CSS and not adding any script.
Hi Christophe, thanks so much for your post and this invaluable information!
I am using your CSS code along with my calendar, both of which are in the “center right” column of my (Sharepoint 2007) page. My calendar is not as small as the one in your picture, and it sounds like this is due to my calendar not being in the “right” column.
At this point, I am fine with the calendar being in the “center right” column, but I’m wondering if there is any way I can tweak the CSS code to make the calendar shorter in height. I tried changing the height of the calendar web part (from “adjust to fit zone” to 450 px), however this introduced scroll bars, which I do not want. Do you recommend any changes to the CSS to make the days smaller vertically?
Thanks so much!!
Ben
Ben, your calendar height should be the same as mine, except if you have events (in which case the text will dictate the height). Did you check part II?
Christophe, is there a code that can be added to the tiny sharepoint calendar, that will display all the items on a day? I am trying to get rid of the X more items link on certain days. Thank you!
Fernando, there was an online workshop that offered additional customization options. The recording is available for the same fee as the workshop. Please contact me or Mark Miller for more details.
Works perfect! Thank you!
Hi Chris,
Thank you so much for your easy to follow instructions and the great calendar! It is exactly what I was looking for! I have a quick question, how do you hide the “Content Edit Web Part” from showing up in the main page of sharepoint?
Nevermind, I figured it out. Thanks!
Hi Christophe – This must be obvious to everyone but me… what am I supposed to replace “Christophe@PathToSharepoint.com” with? I assumed my own email address but that does not work.
gwen, you’re not supposed to change anything in the script, it should work as is.
Hi! I tried applying this to my site.. but it doesn’t seem to work… Do you know if this works with SharePoint 2010?
Kara, this is for SP 2007 only. In SP 2010 the calendar should auto-resize to your column width.
Christophe -
This is great! Any update on the week version of this?
Thanks for that, really helped me out!
Hi Christophe,
Love the tiny…in my setup, I have a bit more space and so I’ve set my non-hover calendar entries at a size of 8px rather than 3px. I’d like the entries to stay at 8px when hovered on, but I can’t seem to find out how to do this. Would you please assist?
Jesse, I assume you’re actually using the styles in part II. There’s a setting for normal text, and another for “a:hover”.
Christophe, indeed I am talking about part II. Sorry for the mix-up. The weird thing about the code that I’m working with is that I don’t see “.ms-cal-monthitem a” having any control over the size of fonts whether hovered on or not. In fact, in my testing I’ve removed both “.ms-cal-monthitem a” and “.ms-cal-monthitem a:hover” with no ill effects. What seems to be controlling the size of the font is instead “.ms-cal-defaultbgcolor a” where I can control the non-hovered state font size. However, the code above includes no hover option for “.ms-cal-defaultbgcolor a” and when I add it myself, it has no effect.
Is this re-creatable for you, or have I somehow corrupted my instance?
I should clarify that the inability to control hover size is only for items that are “all day” or span multiple days. Specific time bound entries (i.e. start at 10am) are working just fine.
Thanks again Christophe! I appreciate you sharing this solution. Works like a dream!
Hi Its not working in my site !!!!
I followed al d steps plz help
Forget to add calender :$
it was a treat to see the calender , great work Chris
Chris, I am in dire need of Two level menu items
home
sub site 1
sub sub-site
plz help me on this.I m a beginner
This is great! really helped me out!
great stuff… have you figured out how to display on Mon – Fri? and drop off Sat / Sun? that would be awesome!
Steve, search my blog for “Weekdays”. Note that I have other solutions, but they are not public (only available in my online workshops).
Merveilleux!! Merci Christophe pour tous vos trucs!! Vous êtes génial!!
Hi Christophe..Ur blog is awesome!!
Can we disable the title on the tiny calender i.e. no event will be displayed on calender.when we click on the any day the events for that day will be displayed in day view..
Thanks
I haven’t tried, but…check out part II, and instead of rules to reduce the font size, try using display:none.
Once again your blog has helped me to solve a problem! With some minor customisations, the CSS code from above made it onto our server, and has helped me to save some time I would have otherwise spent trying to do something similar myself.
Merci beaucoup!
It works perfectly in 2007 and it is a great idea !
Do you have 2010 version ?
I don’t. The SP 2010 calendar has a completely different structure.
Hi Christophe, I had been trying to work with your solution for a SP 2010 calendar, and it appears this functionality is OOTB. You can specify the width of the web part and SP will do the rest, unlike in 2007 where it gave scroll bars because the viewable area was smaller than the calendar. 400-450 pixels looks good. If you specify the height though, the scroll bars come back.
Exactly, the 2010 calendar is more flexible than the 2007 one (still buggy though). I have had some success with reducing the height, also using css.
Hi, I Created list with resource startdate,resoruce end date two cloumns and created calendar view for list. I want show on calendar resoruce startdate and resource enddates. I dont wnat bar line from startdate to enddate just startdate row and enddate row ..is it posible. this mean i want show two cloumns data on calendar…
Your so great Christophe! God bless you more. Thanks!:)
I’m not sure if it’s my environment (WSS3.0) but I cannot get the Days of the week to show only as a single letter.
very cute widget…thank you very much
Works great!! Thank you so much for the code.
Hi Christophe!
I love this post! i found it very helpfull!….thanks for sharing.
Now i´m getting crazy with another issue….i have my calendar in sharepoint 2010. but i need to change the “skin”, so it look ok with my custom masterpage style. could you please help me with this? i´m like new with sharepoint…
THANKS!!!!
Hi Christophe!
Thanks you for your Post! Love it! I implemented on a couple of sites.
One question, how can this code be modified to show, WEEKLY mini calendar? I would love to use that.
Thank you
Does the code shown in here work in SharePoint Foundation 2010 without bigger problems?