Create a Calendar View with JQuery UI Datepicker

jQuery UI's Datepicker widget is widely used in form to select a date. Today I'm going to show you how to use Datepicker to create a calendar month view.

Demo can be found here

1. Let's begin with those two sample appointments

//sample appointments
var appointment2= new Object;
appointment2.date=new Date(2010, 2, 25);//25th March (month start from 0)
appointment2.note="iPad2 goes Australia";

var appointment1= new Object;
appointment1.date=new Date(2010, 2, 30);
appointment1.note="Go to movie";

var appointments = [appointment1, appointment2];

2. Display Datepicker in inline mode and enlarge it

Define Div to display it inline

By default, the datepicker is very small. But we can change font size to make it bigger.

 div.ui-datepicker {
   font-size: 300%;
}

3. initialize Datepicker and highlight appointment date

$(function(){
 
 $('#calendarMonthView').datepicker({ 
     beforeShowDay: highlightDays
 });
 
       addNote();
});

function highlightDays(date) {
    for (var i = 0; i < appointments.length; i++) {
 
     if (appointments[i].date.getDate() == date.getDate()&&appointments[i].date.getMonth() == date.getMonth()) {
      
//"highlight" is the css class will be added.
//appointments[i].note will be added as "title" attribute
        return [false,"highlight",appointments[i].note]; 
                 }
         }
     return [true, ""];//enable all other days
 
} 

4. add note text

we have highlight very appointment date with "highlight" css class, so we just iterate them to add note text.

function addNote(){
 
  $('.highlight').each(function(index) {
  
   var noteId="note"+index;

   var top = $(this).offset().top;
   var left = $(this).offset().left;

   var noteDiv = '
' + this.title + '
';
   $('body').append( noteDiv );
   $("#"+noteId).css("top", Math.round(top)+"px").css("left", Math.round(left)+"px");
   
    });

}

we need a little bit work on the css for the note text.

.highlight {

  background-color: red;
}

 .note {
  font-size: 80%;
    position: absolute;  
 color:red;
    z-index: 1000;
}