Saturday, October 31, 2009

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!

Friday, October 30, 2009

How to create a really small SharePoint Calendar

Well I guess I did not do my research enough and found a site that had an even smaller SharePoint calendar by just modifying the CSS. http://pathtosharepoint.wordpress.com/2008/10/06/tiny-sharepoint-calendar-1/

With these styles below you can drastically transform your SharePoint Calendar view into a tiny box. Yes there is limited functionality but if you have been looking for something like this with no custom code you got it!

  (Left) No events                     (Right) Events populated

image

image

Copy this CSS code below and past it into your custom CSS!

/* 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;}

/* Adds border to bottom */
#CalViewTable1{
border-bottom: 1px #6f9dd9 solid;
}

Enjoy!

Wednesday, October 21, 2009

How to Shrink a SharePoint Calendar View

Have you ever needed to add a Event Calendar to your Team Site with the calendar view but you didn’t because it basically took up the whole site? Well just today I was messing around with this and came up with some interesting results.

If you look at the code for a calendar view everything looks fine except for a hidden shared class at the very top of the calendar right below the webpart title.

image This image is 742 pixels wide and forces the calendar view to be minimally that width. With the CSS below you can now hide that image and allow the calendar to fit within your team site with no problems at all. By making these changes you will not change the look of the full view of the calendar when you click on the event list. The screenshot below was taken with 1024x768 resolution.

image Here is the CSS:

.ms-calheader img{
display: none;
}

#CalViewTable12 img{
display: inline;
}

.ms-cal-nav-buttonsltr{
white-space: nowrap;
}

Full Calendar View with styles applied:

image

Enjoy!