A CodePen by Sara Soueidan. Custom Calendar Widget - Inspired by: http://dribbble.com/shots/513118-Calendar ====================================================== Uses jQuery UI DatePicker Widget.

index.html

<div id="datepicker"></div>

script.js

var events = [
    { Title: "Breakfast with Mom", Date: new Date("11/13/2012") },
    { Title: "Rachel's Birthday", Date: new Date("11/25/2012") },
    { Title: "Meeting with Client", Date: new Date("12/02/2012") }
];  


$('#datepicker').datepicker({  
      inline: true,  
       showOtherMonths: true,  
      dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      beforeShowDay: function(date) {
          var result = [true, '', null];
          var matching = $.grep(events,     function(event) {
            return event.Date.valueOf() === date.valueOf();
        });
        
        if (matching.length) {
            result = [true, 'highlight', null];
        }
        return result;
    },
    onSelect: function(dateText) {
        var date,
            selectedDate = new Date(dateText),
            i = 0,
            event = null;
        
        while (i < events.length && !event) {
            date = events[i].Date;

            if (selectedDate.valueOf() === date.valueOf()) {
                event = events[i];
            }
            i++;
        }
        if (event) {
            alert(event.Title);
        }
    }  
 });  
/*The part of the script that attaches events to dates is borrowed from: http://jsfiddle.net/Zrz9t/1151/   */

style.css

@import url(http://fonts.googleapis.com/css?family=Ultra);

body{
  background:url("http://media-cache-ec6.pinterest.com/upload/276830708316411235_EZfnmx2t.jpg");
}
.ui-widget{
  width:321px; height:auto;
  margin:30px auto;
  font:12px/1 Arial;
  box-shadow: 
    0 0 10px 5px #1A1414,
    0 2px 2px -1px grey;
  border-radius:10px;
  position:relative;
	z-index:10;
}
.ui-widget:before, .ui-widget:after{
	content:""; 
	display:block;
	height:100%; 
	position:absolute;
	box-shadow:0 1px 2px 1px rgba(3,3,3,0.4);
	background:#B4AE9F; 
	border-radius:10px;
}
.ui-widget:before{ 
	width:98%;  
	top:5px; left:3px; 
	z-index:-10; 	
}
.ui-widget:after{
	width:96%; 
	top:10px; left:6px; 
	z-index:-20; 
}
.ui-widget a {
	text-decoration: none;
	font-size:14px;
}
.ui-datepicker table{
	width:100%;
}
.ui-datepicker-header{
	width:100%;
	height:50px;
	background: url("http://media-cache-ec4.pinterest.com/upload/276830708316411236_yZqe68ac.jpg");
  background-size:cover;
	border-radius: 7px 7px 0 0;
	box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.4), inset 0 -5px 10px -5px #571711;
	color:#EFDEB7;
	overflow:hidden;
}
.ui-datepicker-title {
	text-align:center; 
	font: 20px/1 "Ultra"; 
	text-shadow:1px -1px #31241C;
	margin-top:15px;
}
.ui-datepicker-year{
	color:#C59070;
}
    .ui-datepicker-prev, .ui-datepicker-next {  
        display: inline-block;  
        width: 30px;  
        height: 30px;  
        text-align: center;  
        cursor: pointer;  
        margin-top:20px;

    } 
    .ui-icon{
    	display:none;
    }
    .ui-datepicker-prev {  
        float: left; 
        margin-left:15px;  
    }  
    .ui-datepicker-next {  
        float:right; 
        margin-right:15px; 
    }  
    .ui-datepicker-next:before{
      content:"►"; color:#440B05;font-size:16px;
    }
    .ui-datepicker-prev:before{
    	content:"◄"; color:#440B05;font-size:16px;
    }
    thead{
    	background: linear-gradient(#D2D2D2,#868686);  
    	height:30px; 
    	box-shadow: 0 1px 2px 1px #6F6961;
    }
    thead  th{
    	text-transform:uppercase; 
    	color:#535252; 
    	font-size:11px;
    	text-shadow:0 1px rgba(255,255,255,0.4);
    	border-bottom: 1px solid #6F6961; 
    	border-top:1px solid rgba(255,255,255,0.6);
    	border-left:1px solid grey;
    }
    
  .ui-datepicker-calendar{
   	background: url("http://media-cache-ec2.pinterest.com/upload/276830708316411241_WVs774Pa.jpg")0 30px repeat; 
    background-size:100%;
   	border-radius: 0 0 10px 10px;
   	border-collapse: collapse;/*removes default spacing between cells*/
   	font-weight:bold;
   	
   }
td, td a{
    	height:40px; 
    	text-align: center; 
    	font-family:arial;
    }
   td a.ui-state-default{
   	color:#655B4A;
   }
   .ui-state-disabled{
   	color:#A89F90 !important;
   }
   a.ui-state-active{
  line-height:40px;
  display:block;
  background: 
    url('http://media-cache-lt0.pinterest.com/upload/276830708316411244_RMB1iYCw.jpg')
    right center no-repeat;
  color:#AE7514 !important;
   }
table.ui-datepicker-calendar tbody td.highlight > a {
  line-height:40px;
  display:block;
  background: url("http://media-cache-ec4.pinterest.com/upload/276830708316411430_2hONwsBf.jpg") 10px 28px no-repeat;
}