It has been several days since the previous article.
Improved:
1. browser compatibility (IE, Firefox, Chrome)
2. Add a date Click Event
Introduce CSS (skin)
<Link rel = "stylesheet" type = "text/css" href = "calendar/skin/default/calendar.css"/>
Usage
Var calendar = new Calendar ();
Calendar. dayRenderer = todayx. calendarDayRenderer; // custom date Renderer
Calendar. addSelectedDateChangeListener (function (date, cal) {// Add the selected date Event listener
Var d = DateUtil. format (date, 'Mm-dd ');
Window. location. href = 'index. php? Date = '+ d;
}, 'A'); // This 'A'. The parameter is the id of the event processor. Optional.
Calendar. show ("calendar", 420); // It is displayed as a sub-element of the calendar container whose id is 420 in width.
Custom Renderer
Function calendarDayRenderer (week, day, div, cal, isToday) {// day =-1, indicating Space
If (day =-1 ){
Return "& nbsp ;";
} Else {
Var str = DateUtil. format (div. model. date, 'yyyy-MM-dd ');
Var ___ d = DateUtil. format (div. model. date, 'Mm-dd'); // DateUtil is a tool class in calendar. js.
Var y = div. model. date. getFullYear ();
// Str + = day <10? "0" + day: "" + day;
Var a = document. createElement ("");
A. href = "index. php? Y = "+ y +" & date = "+ ___ d;
If (isToday ){
A. title = "today" + str;
} Else {
A. title = str;
}
A. innerHTML = day;
A. style. display = "block ";
If (isToday ){
A. style. color = 'red ';
}
Return;
}
}
Author: "pcenshao"