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