Skip to main content

Update: Really Small SharePoint Calendar

I really was not that happy with the look of the first calendar so after some modifications and a bit of CSS magic I have come up with a really good looking small calendar. At least I think so…

Basically I have replaced the text of an event item with a color coded box. The benefit that you get out of this is that you don’t have to try and read the even within the small calendar but if you hover over and click on the color block you get the list Item display.

  • Orange is for single event items (8am-10am, etc)
  • Green is for full day events or repeat events

Another nice feature to this is that I have also simplified the visual indicator when there are more then two event items in one day. Instead of seeing the arrow and text all you see is the arrow. Once you click on the arrow it will show the other blocks of events (Right image).

image image

Here is the CSS Code: Download Here

  1. Simply place a content editor web part on the same page as the calendar
  2. Paste the code from the file above into the source of the content editor web part.
  3. Hide the Content editor web part on the page.

If you plan on making this a more global style this is an example of how the large calendar would look like.


Leave a comment and let me know how it works for you!


Hi all.. really i am happy to see this site and all.. it has lot of information's to the public.. thanks for sharing this in internet...
June Nette said…
Hi, thank you for this post. The only problem is that the small calendar is not showing up, only the codes are showing, so I hid the web part and nothing showed up. Could you please tell me what I did wrong? Thanks.
Erik Swenson said…
Make sure that you included the open and closed style tags.
June Nette said…
Hi Erik, thanks for your quick response. I copied and pasted the text file and there are open/close style tags.
Joey said…
I know this is geared towards SP 2007 ... so my question is:
Are you planning on making a version for SP 2010?

(As expected, it didn't work for me on SP 2010 as is :-)
Kyle said…
Any luck on the SP2010 compatibility?
DF said…
I wanted to give this a try, but unfortunately, the download link appears broken.

I'm also interested in SP2010 compatibility?
Anonymous said…
Hi! Thanks for this tip. It worked perfectly and im really happy i found this site. I spent a lot of time on trial and error from researched sites but was not successful. Im keeping tuned for more tips and techniques. Cheers!
vensar said…
i tried and its not working, only the color has changed, the calendar size remains the original.. help pls

Popular posts from this blog

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
body #s4-leftpanel
display: none;
margin-left: 0px;
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover.Ribbon RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}