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.

image

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

Comments

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.
Unknown 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 :-)
Unknown 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

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 Row Table Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu Workspace Body Container Title Row Title ...

SharePoint 2010 Content Query for Blog Posts

I hope this post will help many of you feel comfortable with using the Content Query Web Part. In this post I will walk you through the process of creating a content query web part and configuring it to show custom field types. I will also give details on how to use XSLT to stylize and format the data being pulled. I will be using the following scenario as an example. Say that you had a site collection with a top level publishing site. This publishing site would display a the most recent blog posts from all blog sites within its own site collection. To solve this problem we will use a Content Query Web Part and a customized ItemStyle.xsl using XSLT. Please note that the “SharePoint Server Publishing Infrastructure” needs to be enabled at the site collection to display the content query web part. Step 1: Add a Content Query Web Part to Page Navigate to the site that you want the blog posts to show up and click on edit page. Under Editing Tools in the Ribbon, Click on ...

SharePoint Reusable Content

I can pretty much say I know my way around SharePoint… But every once in a while you learn about a feature that you never knew was there… Most of the time its those annoying bugs that we call “features” but are true head against the wall things that make you go hmmmm… But this time its a good thing… I was tasked with finding a way to create a header and footer for a publishing site. This header and footer would be consistent across all pages within the content area of the site. My First thought was ok I need a custom page layout, but this would not work since it needs to be easily updated via the SharePoint Interface. So after some investigation I found out that SharePoint has a built in feature called “Reusable Content” Basically all you need to do is simply edit the page of your publishing site and click on a content editor control. If you look at the image below there is a icon next to the image icon. The icon is not very obvious hence the reason why I never noticed it befo...