New algorithm for JavaScript blog-style calendar control_time and date

Instructions for use:

The program is relatively simple and there are instructions in the code. Here is how to use it.
The first step is to instantiate a Calendar and set the parameters.
Parameter description:
Year: The year to be displayed
Month: The month to be displayed
SelectDay: Select the date
onSelectDay: Trigger on the selected date
onToday: Trigger on today's date
onFinish: Triggered after the calendar is drawn

Generally, SelectDay is set to the selected date, and a function is set in onSelectDay to set the style of this date.
For example, in the example, SelectDay is set to today. On the 10th of the month and set the style to onSelect on that day:

Copy the code The code is as follows:

SelectDay : new Date().setDate(10),
onSelectDay: function(o){ o.className = "onSelect"; },

and onToday is used to set the style of today’s date ,
For example, in the example, set the style of today's date to onToday:

onToday: function(o){ o.className = "onToday"; },
You can put the required settings in onFinish Calendar program.
You can get the year and month displayed by the current calendar through this.Year and this.Month.
The dates with data are also set here. For example, in the example, there is a list of dates with data in the current month, and then the corresponding dates are set according to this list:

Copy code The code is as follows:

var flag = [10,15,20];
for(var i = 0, len = flag.length; i < len; i ){
this.Days[flag[i]].innerHTML = "" flag[i] "";
}

This date list is fixed in the example. In actual applications, the corresponding date list can be obtained according to the year and month.
I personally recommend using the year and month to obtain it through ajax.

There are also two useful methods in the program: PreMonth (displays the previous month) and NextMonth (displays the next month).

Test code:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Blog style calendar control_www.jb51.net_Script Home</title> <style type="text/css"> .Calendar { font-family:Verdana; font-size:12px; background-color:#e0ecf9; text-align:center; width:200px; height:160px; padding:10px; line-height:1.5em; } .Calendar a{ color:#1e5494; } .Calendar table{ width:100%; border:0; } .Calendar table thead{color:#acacac;} .Calendar table td { font-size: 11px; padding:1px; } #idCalendarPre{ cursor:pointer; float:left; padding-right:5px; } #idCalendarNext{ cursor:pointer; float:right; padding-right:5px; } #idCalendar td.onToday { font-weight:bold; color:#C60; } #idCalendar td.onSelect { font-weight:bold; } </style> <div class="Calendar"> <div id="idCalendarPre"> </div><<<div id="idCalendarNext"> </div>>><span id="idCalendarYear"> </span>2008<span id="idCalendarMonth">year </span>8<table cellspacing="0"> <thead> <tr> <td></td> </tr> </thead> </table> </div>