A tiny cute SharePoint calendar (Part I)

Posted on by

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>

134 thoughts on “A tiny cute SharePoint calendar (Part I)”

  1. Pingback: A tiny bcute/b SharePoint calendar (Part I)

  2. Pingback: A tiny cute SharePoint calendar (Part II) « Path to SharePoint

  5. 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…

  7. 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

  8. 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…

  9. 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!

  10. 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.

  11. Thanks Christophe, that is pretty close to perfect.

    I really appreciate your posting this project and your quick responses to my n00b questions!

    Steve

  12. 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

  15. 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

  17. 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.

  19. 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!

  21. 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!

  22. 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!!

  23. 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).

  24. 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>

  25. 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.

  27. 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.

  31. 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.

  32. 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.

  34. 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.

  37. 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.

  38. 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;}

  40. 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

  41. 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.

  42. 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.

  44. Christophe – Worked great – many many thanks!!! On to your second tutorial as we have many events in the Calendar…

  45. 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?

  46. Hi Christophe,

    Thanx for this beatiful calendar, but please how can i get to display in full at the bottom, it get cut off.

    • 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…

  50. 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.

  51. 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.

  53. 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;}

  54. Pingback: 6 Quick Ways to easily “Juice” your SharePoint Pages (Re-post) | Wahid's Blog

  55. 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!

  56. 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.

  57. 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.

  60. 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?? :`(

  62. 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.

  63. 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

  67. 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.

  68. 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?

  69. 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.

  71. 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?

  73. 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.

  74. Hi! I tried applying this to my site.. but it doesn’t seem to work… Do you know if this works with SharePoint 2010?

  77. 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?

      • 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.

  81. 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

  83. 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).

  85. 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

  86. 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!

      • 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.

  88. 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…

  90. 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.

  93. 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!!!!

  94. 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

    • The week view is more complicated, and I don’t have a solution to shrink it. What some people do is use the month view, and hide all weeks but the current one.

  97. Hi Christophe,

    Thanks for your post.
    I tried your code in CEWP of my Publishing Site Page for calender , but it’s not working at my end.

    What I have done:
    1. Added a calender webpart on right side section of the page.
    2. Added CEWP above the calender webpart
    3. past ur code in source editor of CEWP

    it worked for width but not for height of the calender.
    please help.

  98. Hi Christophe,

    I have used the below code in CEWP and it works great…Finally I did it.

    #MSOZoneCell_WebPartWPQ8{
    font-size:8pt;}
    .ms-acal-summary-itemrow TD DIV {
    MARGIN: 0px 1px; WIDTH: 20px; HEIGHT: 20px
    }

  99. Hello, this worked perfectly for me until I tried to edit the events themselves. Anytime I edit the title of an event, the shape of the calendar goes out of the window, as it re-adjusts the height and the width of the calendar. Is there please any way around it how to maybe minimise the title text to fit the original windows? Thank you for your answer.

  100. Pingback: יצירת תצוגת לוח שנה קטן - Mini-Calendar בדף הראשי בסביבת SharePoint 2010 | AlonKaduri

  101. Pingback: יצירת תצוגת לוח שנה קטן - Mini-Calendar בדף הראשי | AlonKaduri

Comments are closed.