Tiny calender in SP 2010

Customer want a small calenderview. Like the one in Outlook.

This can be achived using all built in tools with some css tinkering.

You need:

• A calenderlist using a calenderbased view
• A content editor web part

Steps:

1. Insert webpart using calenderview
2. Insert webpart content editor webpart (CEWP)
3. Edit CEWP

<style>
.ms-acal-header TD {
    VERTICAL-ALIGN: top
}
.ms-acal-rootdiv TD {
    VERTICAL-ALIGN: top
}
.ms-acal-rootdiv TH {
    VERTICAL-ALIGN: top
}
.ms-acal-rootdiv {
    OVERFLOW: hidden; FLOAT: right; MARGIN-LEFT: 0px
}
.ms-acal-vitem {
    VISIBILITY: hidden; BACKGROUND-COLOR: #f2f2f2
}
.ms-acal-month-weeksel {
    WIDTH: 5px; VISIBILITY: hidden
}
.ms-acal-summary-dayrow TH {
    CURSOR: pointer; BORDER-TOP: #b6c5c6 0px solid; BORDER-RIGHT: #b6c5c6 0px solid; BORDER-BOTTOM: #b6c5c6 0px solid; BORDER-LEFT: #b6c5c6 0px solid; VISIBILITY: hidden; BACKGROUND-COLOR: #ced8d9
}
.ms-acal-month-top {
    WIDTH: 20px; BORDER-BOTTOM: #b6c5c6 1px solid; COLOR: #919649; PADDING-BOTTOM: 2px; TEXT-ALIGN: center; PADDING-TOP: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px
}
.ms-acal-summary-dayrow TH {
    CURSOR: pointer; BORDER-TOP: #b6c5c6 0px solid; HEIGHT: 0em; BORDER-RIGHT: #b6c5c6 0px solid; BORDER-BOTTOM: #b6c5c6 0px solid; BORDER-LEFT: #b6c5c6 0px solid; VISIBILITY: hidden; BACKGROUND-COLOR: #ced8d9
}
.ms-acal-summary-itemrow TD DIV {
    HEIGHT: 0px; WIDTH: 0px
}
.ms-acal-vlink IMG {
    VISIBILITY: hidden; MARGIN-RIGHT: 3px
}
.ms-acal-vlink A:hover {
   
}</style>

4. Save

Now this view will expand the row if there is an item on that week. Not so pretty, but itll work for this case.

• Onhover on date the events of that day should be displayed
• Date should be bold or different color if their is events on that day.

References:

http://www.sharepointgrind.com/Lists/Posts/Post.aspx?ID=19

http://blog.pathtosharepoint.com/2008/10/06/tiny-sharepoint-calendar-1/

http://erikswenson.blogspot.se/2013/04/small-calendar-for-sharepoint-2010-2013.html