New algorithm for JavaScript blog-style calendar control

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 the current day
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 The 10th of the month and the style is set to onSelect on that day:

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, the style of today’s date is set to onToday:

onToday: function(o){ o.className = "onToday"; },
You can put the program that needs to set the calendar in onFinish.
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 based on this list:

var flag = [10,15,20]; 
for(var i = 0, len = flag.length; i < len; i++){ 
this.Days[flag[i]].innerHTML = "<a href=&#39;javascript:void(0);&#39; onclick=\"alert(&#39;日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"&#39;);return false;\">" + flag[i] + "</a>"; 
}

In the example, it is This date list is fixed. In actual applications, the corresponding date list can be obtained according to the year and month.
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:

 
 
 
 
 
 
 
 
 
 
<<
 
>>
 
2008年 8月 
 
 
 
日
 
一
 
二
 
三
 
四
 
五
 
六
 
 
 
 
 
 
 
 
 

For more articles related to the new algorithm of JavaScript blog-style calendar control, please pay attention to the PHP Chinese website!