Design and Align Development, WebSite Design, and Graphics

Sharepoint Calendar WebPart - A Different Approach Pt 1

Written 05/03/12Jump To Part 2

Have you ever noticed how plain, ugly, and more over difficult it is to use the Sharepoint Calendar Webpart?? I've come to find out over the last few months of designing and implementing my company's changes that I usually have 3 options.

Buy a webpart to suite your needs (not my thing).
Build your own webpart (can be challenging at times).
Use a bunch of CSS and jQuery to modify the webpart to suite your needs! (my favorite).

First thing is first, let's get our jQuery libraries and plugins needed for this project. One library that I will discuss later in this post is jQuery hoverIntent plugin by Brian Cherne. The date.js plugin is for converting date/times in javascript. You will need the date plugin pack. You can find the jQuery minified version here: jquery-1.7.2.min.js, or you can use the CDN (I recommend Google's), by using:

Create the Calendar List

Next we want to create a Calendar. I named mine "CorporateCalendar". In your root (or where ever you desire), create a List, choose Calendar, and set the default view to be "Calendar". Once this is created, you'll have a full view of the current month. For testing purposes, lets add in some dummy data so we can determine that our script (custom javascript) is working successfully once completed.

On a page that you want the mini-calendar displayed:

Edit the page, and click inside the section where you want the Sharepoint calendar webpart to reside.
In the top ribbon, under "Lists and Libaries", find your Calendar List that we created earlier.
Click Add, and then edit the properies of the sharepoint calendar webpart.

Sharepoint Calendar WP Appearance Properties

Sharepoint Calendar WP Advanced Properties

Add Some CSS to the Calendar Webpart

You will now have a calendar webpart that looks nothing like we want it to be. Customizing the sharepoint calendar webpart with CSS is basically our only option, since the Out-Of-The-Box one has no apparent ways of styling it otherwise.

I wanted to get rid of being able to add events, as well as showing the events on the calendar wepart itself. The following CSS does just that. And yes I know that I could combine some of these styles. I wanted to keep them seperate in case any of you would like to see which each does, and change accordingly.

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

                                    .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, 
                                       tr td div.ms-acal-today{
                                            background-color: #a43a34;
                                            border-color: #a43a34 !important;
                                            text-decoration: none;
                                            color:white !important;
                                    }

NOTE: You will have to change the font and border colors to reflect your color palatte.

Below is the Sharepont calendar webpart now viewed with our CSS in place.

Building the Day View

Now the interesting part. How to get the Calendar List events onto a pop-up styled div that somewhat resembles a day planner? 99% of the time I do not use HTML tables. This was a little different in the case that it's easier to view when writing the jQuery to place the events.

Each td is assigned a class (yes I know this wasn't necessary, but easier for readability purposes. The first row in the table is used for the calendar date. Each "leftTD" is used for the timeframe, and "middleTD" is used for displaying our calendar events.

Below is our CSS for the table above.

                                    .calendarDisplayCSS {
	                                    position:absolute;
	                                    width:800px;
	                                    height:1000px;
                                    }

                                    #calendarDisplay { 
	                                    position:absolute; 
	                                    height:630px; 
	                                    top:50px; 
	                                    left:600px; 
	                                    width: 470px; 
	                                    background-color:white;
	                                    border: 1px solid #666; 
	                                    border-bottom:none;
	                                    overflow-y: scroll;
                                    }

                                    #cal-holder { 
	                                    border-collapse: collapse; 
                                    }
    	    
                                    #cal-holder .leftTD { 
	                                    width:40px; 
	                                    text-align:right; 
	                                    font-size:14px !important; 
	                                    border-right: 1px solid #666;
                                    }
    		
                                    #cal-holder .middleTD { 
	                                    width: 630px; 
                                    }
       		
                                    #cal-holder td { 
	                                    height:30px; 
	                                    font-size:12px; 
	                                    background: #ffffff; /* Old browsers */
	                                    background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 79%, #ededed 100%); /* FF3.6+ */
	                                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(79%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
	                                    background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 79%,#ededed 100%); /* Chrome10+,Safari5.1+ */
	                                    background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 79%,#ededed 100%); /* Opera 11.10+ */
	                                    background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 79%,#ededed 100%); /* IE10+ */
	                                    background: linear-gradient(top,  #ffffff 0%,#f6f6f6 79%,#ededed 100%); /* W3C */
	                                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
                                    }

                                    #cal-holder tr:nth-child(odd) td { 
	                                    border-bottom: 1px solid #666;
                                    }

                                    #cal-holder tr:nth-child(even) td { 
	                                    border-bottom: 2px dotted #666;
                                    }

                                    #cal-holder .blue { 
	                                    margin:1px; 
	                                    display:inline-block; 
	                                    background: rgb(99,182,219); /* Old browsers */
	                                    background: -moz-linear-gradient(top,  rgba(99,182,219,1) 0%, rgba(48,157,207,1) 100%); /* FF3.6+ */
	                                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(99,182,219,1)), color-stop(100%,rgba(48,157,207,1))); /* Chrome,Safari4+ */
	                                    background: -webkit-linear-gradient(top,  rgba(99,182,219,1) 0%,rgba(48,157,207,1) 100%); /* Chrome10+,Safari5.1+ */
	                                    background: -o-linear-gradient(top,  rgba(99,182,219,1) 0%,rgba(48,157,207,1) 100%); /* Opera 11.10+ */
	                                    background: -ms-linear-gradient(top,  rgba(99,182,219,1) 0%,rgba(48,157,207,1) 100%); /* IE10+ */
	                                    background: linear-gradient(top,  rgba(99,182,219,1) 0%,rgba(48,157,207,1) 100%); /* W3C */
	                                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63b6db', endColorstr='#309dcf',GradientType=0 ); /* IE6-9 */
                                    }

                                    .blue div { 
	                                    padding:5px; 
	                                    font-size:12px; 
	                                    color:white; 
                                    }

The CSS above is self-explanitory. One thing to note here is the Line 57 - if you do not want your divs to span all the way across the calendar, meaning the divs dynamically created are only as wide as the text that is contained, then remove this line. For positioning on your page, depending on where your calendar is located, adjust lines 10-11.

Jump To Part 2

Friday, August 24 2012

-- 1 Comment --

Complete Code for calendar webpart @ 11:37 AM by saggii

hey thanks for the post but can you help me providing the complete textfile in one go? That would be helpful. Thanks in advance.

Post Comment

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

Posted by Rob Scott @ 07:34 AM Tuesday, September 25 2012

sure no problem. i have actually re-done this calendar to make it a little sleaker looking and faster. i'll look your email up and send it to you. Thanks for the comment =)

Wednesday, September 26 2012

-- 1 Comment --

Calendar @ 02:34 AM by Alex

Hi Rob, I edited native calendar.aspx at the root of site, added CEWP and pasted refs to jquery, script tags for CSS, javascripts, and html, and magic happends, calendar appeared in new style, when I clicked on date with event on it, it's show me tab below of main calendar with all my events! Thanks a lot for your help and beautiful calendar! n.b. At first I tried to do it on SharePoint Designer, created aspx page and did the same, but no luck, calendar shout be on root. But I'll try to resolve it.

Post Comment

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

Posted by Rob Scott @ 08:56 AM Wednesday, September 26 2012

Appreciate it. I sent you an email regarding your latest reply. Glad you got it working. I'll have to update this blog so others can get the updated code.

	Close
8am

9am

10am

11am

12pm

1pm

2pm

3pm

4pm

5pm