Sharepoint Calendar WebPart - UPDATED 10/15/2012
Written 10/15/12

Since I've seen so much love out there, and I know what a pain in the ass Sharepoint can be at times, I've decided to FINALLY update the javascript and CSS on here so y'all can put it to some good use!


Basically, to wrap it all in a nutshell, if you either had the old code, or read the previous articles about how to incorporate this, then the idea is still the same, but I've chopped down some of the javascript and jQuery so that it runs a lot faster and smoother. Instead of iterating through EVERY day, I've only grabbed the dates with events that are actually on the calendar. Also I got rid of the hoverIntent jQuery plugin and found out how to actually click the date on the calendar webpart without it switching the day/month view. The big messy pop up box is now underneath the calendar, and is a lot smaller as well. Enough talk lets get to it.


Things you will need:
  1. Javascript files - you can google the file names they'll pop up.
  2. Calendar on the root level of your site
    (you can change the javascript if it's not).
  3. CSS file referenced in your masterpage
    (we'll be adding some to it for the calendar).
  4. Access to your production server(s). We need to modify some javascript files that I found to conflict with clicking on the calendar date.
Grab Javascript files

I tend to throw all my javascript in my "Style Libary" folder at the root and reference them in the masterpage. Make sure the above code is in your head section of your page.

Create Calendar

Pretty easy to do.

Go to Site Actions ---> View All Site Content ---> Create (this will be on top).
When the fancy Silverlight box displays, under "List", choose "Calendar".

I named my calendar "CorporateCalendar" (no spaces). You can change in the javascript if you would like to name yours something different.

If your calendar is not on the root, no worries, we can change that in the javascript as well!

Add Calendar Webpart to Page

The Calendar that you just made, we need to add the calendar webpart to the page. Navigate to the page desired, edit the page, and click inside one of the "Add a webpart" sections. Inside the webpartedit ribbon, under lists and libraries, find your calendar that we created and add it to the section. Save the page then publish.

How to add/remove a webpart from a page.

Add CSS

This CSS is branded to fit our companies' intranet look and feel. There are multiple places you will need to edit to change the colors. 

                                    /* 
	                                    Calendar
                                    */

                                    .ms-acal-summary-dayrow th {
	                                    display:none;
                                    }

                                    .ms-acal-month tr th:first-child {
	                                    display: none;
                                    }

                                    .ms-acal-header {
	                                    text-align:center;
                                    }

                                    .ms-acal-outday{
	                                    display: none;
                                    }


                                    .ms-acal-month td {
	                                    text-align:center;
                                    }

                                    .ms-acal-summary-dayrow td div {
	                                    color: #696158;
                                    }

                                    .ms-acal-summary-itemrow > td {
	                                    display:none !important;
                                    }

                                    .ms-acal-summary-dayrow td div {
	                                    background-color:#F2F1E7;
	                                    border: 1px solid #F2F1E7;
                                    }

                                    .ms-acal-ctrlitem {
	                                    display:none;
                                    }

                                    .ms-acal-header {
	                                    width:300px;
	                                    margin: 5px 10px;
                                    }

                                    .ms-acal-rootdiv {
	                                    font-size:14px;
	                                    color:#696158 !important;
                                    }

                                    .ms-acal-display {
	                                    color:#696158;
	                                    font-size:16px;
                                    }

                                    .ms-acal-month-top {
	                                    color: #696158;
                                    }

                                    .ms-acal-rootdiv tr:first-child{
	                                    font-size:10px;
                                    }

                                    .ms-acal-summary-dayrow > div {
	                                    height:30px;
                                    }

                                    #AsynchronousViewDefault_CalendarView table:first-child td  {
	                                    padding: 1px;
                                    }

                                    tr td div.ms-acal-today{
                                        background-color: #a43a34;
                                        border-color: #a43a34 !important;
                                        text-decoration: none;
                                        color:white !important;
                                    }

                                    .ms-acal-week-top td.ms-acal-hover div, .ms-acal-summary-dayrow td.ms-acal-hover div, .ms-acal-summary-dayrow th.ms-acal-hover
                                    {
	                                    text-decoration:none;
	                                    background-color:#F2F1E7;
	                                    border-color: #F2F1E7 !important;
                                    }

                                    #calendarDisplay
                                    {
	                                    margin:10px;
	                                    font-size:10px;
	                                    width:96%;
                                    }

                                    #calendarClose, #calendarClose:visited{
	                                    color:#a43a34;
	                                    text-decoration:none;
                                    }

                                    #calendarClose:hover {
	                                    font-weight:bold;
	                                    text-decoration:underline;
	                                    cursor:pointer;
                                    }

                                    #calendar
                                    {
	                                    width:100%;
                                    }

                                    #calendar tr:first-child td{
	                                    font-size:12px;
                                    }

                                    #calendarDisplay td {
	                                    border-bottom:1px solid #696158;
	                                    background-color: #F2F1E7;
	                                    padding:5px 10px !important;
                                    }
                                    #calendarDisplay .leftTD {
	                                    width:35%;
	                                    text-align:center;
                                    }

                                    #calendarDisplay .rightTD {
	                                    width:80%;
                                    }
Add HTML to Masterpage

Add this to the bottom of your page right above the ending form tag.

As we can see, this is 100x smaller than the original. Ahhh the magic of jQuery!

Add Javascript to Masterpage

Now this is the most important part, and it must be followed to its entirety. I will go over the details.

Add this javascript just below the HTML we just added, and above the form tag on your page. Make sure you wrap it in a script tag and a $(document).ready(function () {});. 

                                        // calendar -------------------------------
                                        // if the click event does not work, go to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS
                                        // and open the SP.UI.ApplicationPages.Calendar.debug.js file
                                        // find "$addHandler(this.$8_1.ownerDocument, 'click', this.$31_1);" and comment it out
                                        // find "$removeHandler(this.$8_1.ownerDocument, 'click', this.$31_1);" and comment it out	

                                        $('#AsynchronousViewDefault_CalendarView').append($('#calendarDisplay'));
                                        $('#calendarClose').click(function () {
                                            $('#calendarDisplay').hide();
                                        });

                                        $('.ms-acal-header span[id$="nav_header"]').wrap('');

                                        $('#AsynchronousViewDefault_CalendarView').on('click', '.ms-acal-summary-dayrow td', function () {
                                            $('#calendarDisplay tr').not('tr:first').remove();
                                            $('#calendarDisplay').show();
                                            var date = $(this).attr('date');
                                            $('#calendar td:first').text(date);

                                            var sharepointDate = Date.parse(date).toString('yyyy-MM-dd');
                                            var soapEnv =
				                            " \
				                             \
				                             \
				                            CorporateCalendar \
				                             \
				                             \
				                             \
				                             \
				                             \
				                            " + sharepointDate + "\
				                            1500 \
				                             \
				                             \
				                            ";

                                            // Call web service
                                            $.ajax({
                                                url: "http://YOURSITE/_vti_bin/lists.asmx",
                                                type: "POST",
                                                dataType: "xml",
                                                data: soapEnv,
                                                complete: AddEventToCalendar,
                                                contentType: "text/xml; charset=\"utf-8\""
                                            });

                                            function AddEventToCalendar(xData, status) {
                                                //alert(xData.responseText); return false;
                                                var startTime = "";
                                                var endTime = "";
                                                var title = "";
                                                var id = "";
                                                var count = 0;
                                                $(xData.responseXML).find("z\\:row").each(function () {
                                                    title = $(this).attr('ows_Title');
                                                    id = $(this).attr('ows_ID');

                                                    // get time only from "EventDate" (start)					
                                                    startTime = Date.parse($(this).attr("ows_EventDate").substring($(this).attr("ows_EventDate").indexOf(' '))).toString('h:mm tt');

                                                    // get time only from "EndDate" (end)
                                                    endTime = Date.parse($(this).attr("ows_EndDate").substring($(this).attr("ows_EndDate").indexOf(' '))).toString('h:mm tt');

                                                    $('#calendarDisplay tr:last').after('' + startTime + ' - ' + endTime + '' + title + '');
                                                    $('#calendarDisplay tr:last').find('td').wrapInner('');

                                                    count++;
                                                });

                                                if (count == 0) {
                                                    $('#calendarDisplay tr:last').after('No Data to Display');
                                                }
                                            }
                                            return false;
                                        });

OK, deep breath.

As you can see, 10x times smaller than the original code.


  1. The first 5 lines that are commented, this is what you will need to do on all your web/app servers. If this is not followed then if the user clicks on one of the dates on the calendar webpart, it will switch to the day/week view - very annoying I know. This took me a whole day to find this.

    NOTE: My company has a fairly large Sharepoint site, and I have still to this day run into a conflict where commenting out the two lines in the javascript file. However, I cannot 100% promise that it will not cause something to mess up along the way. That's why I say, "comment" it out, not delete it.
  2. There are (3) places (line 14, 41, 67) in the javascript that you will need to substitute "YOURSITE" with your Sharepoint site name.
  3. If you did not name your calendar "CorporateCalendar", change line 25 and 67.
  4. If your calendar does not reside on the root level, change line 39.

I think that's it! Here's the finished product. Sorry about the picture quality I took it while remoted in to my work computer.

Sharepoint Webpart calendar-nodata

Sharepoint Webpart calendar


Clicking on the "October, 2012" will transfer the user to the calendar (big display), and clicking on the "Some Test" will transfer the user to the item.

One more thing I will add, and that is I will once again update the code to accommodate changing the background color of the day box if there is an event for that day, therefore preventing the user from clicking each day to find an event.

If you have any problems, feel free to email me at rscott@designandaligndevelopment.com with questions or concerns.

Tuesday, October 16 2012
-- 0 Comments --
New UPDATED code! @ 02:06 AM by Rob Scott

I've heeded your requests and added a new blog posting for the updated javascript calendar webpart! Sorry this took me so long to put up, and I know a lot of you were frustrated. Hopefully this will smooth things out. Check back for more to come!

Post Comment   

Check if you would like to receive e-mails for replies to this post


Tuesday, October 16 2012
-- 0 Comments --
Facing Issue adding css and js in sharepoint 2010 (Js not reflecting) @ 05:59 AM by sukumar

Dear Rob Scott , This is very nice we are required exact requirement in home page we have to show sharepoint mini calendar.... I am new for sharepoint can you give some screenshot for to add your css and js calendar.... Thank you

Post Comment   

Check if you would like to receive e-mails for replies to this post


Monday, November 19 2012
-- 0 Comments --
Updated Calendar @ 04:52 PM by Lexx

Hi Rob, Thanks a lot for this updates of Mini-Calendar. I tried your code and fix it! :-) Just one concern, you wrote: "One more thing I will add, and that is I will once again update the code to accommodate changing the background color of the day box if there is an event for that day, therefore preventing the user from clicking each day to find an event. " :-) Yes, will be gr8t to know how to do it. Please let us some idea or even better several code as an example. Thanks a lot for your help!

Post Comment   

Check if you would like to receive e-mails for replies to this post



Check if you would like to receive e-mails for replies to this post
2012

May ( 2 )
April ( 1 )
October ( 1 )

Anything in here will be replaced on browsers that support the canvas element