Instructions for use:
The program is simpler, there are instructions in the code, here to say how to use.
The first is to instantiate a calendar and set the parameters.
Parameter description:
Year: Years to display
Month: The Month to display
Selectday: Select Date
Onselectday: Triggering on Select date
Ontoday: Triggered on today's date
OnFinish: When the calendar is finished, it triggers
The general Selectday is set to the selected date and a function is set in Onselectday to set the style of the date.
For example, Selectday is set to 10th this month and is styled to onselect on that day:
Copy Code code 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, the style of today's date is set to Ontoday in the instance:
Ontoday:function (o) {o.classname = "ontoday";},
In OnFinish, you can put a program that requires a calendar to be set.
Can pass this. Year and This.month gets the years and months that the current calendar displays.
This is also set for dates that have data, such as a list of dates with data for the current month in the instance, and then set the corresponding date according to the list:
Copy Code code as follows:
var flag = [10,15,20];
for (var i = 0, len = flag.length i < len; i++) {
This. days[flag[i]].innerhtml = "<a href=" javascript:void (0); ' onclick=\ ' alert (' date is: "+this. year+ "/" +this. month+ "/" +flag[i]+ ""), Return false;\ ">" + flag[i] + "</a>";
}
In the example, the list of dates is fixed, and the actual application can get the corresponding date list according to the year month.
Personal recommendations are obtained using the year months via Ajax.
There are two useful methods in the program Premonth (show one months) and Nextmonth (show the next one months).
Test code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>blog Calendar Control _WWW.JB51.NET_ Cloud Habitat Community </title> </pead> <body> <script Type= "Text/javascript" > var $ = function (ID) {return "string" = = typeof ID? document.getElementById (ID): ID; }; var Class = {Create:function () {return function () {this.initialize.apply (this, arguments); }} object.extend = function (destination, source) {for (var property in source) {Destination[property] = source[ Property]; return destination; var Calendar = Class.create (); Calendar.prototype = {initialize:function (container, options) {this. Container = $ (Container);//container (table structure) this. days = [];//Date objects list this. SetOptions (options); This. Year = This.options.Year; This. Month = tHis.options.Month; This. Selectday = This.options.SelectDay? New Date (This.options.SelectDay): null; This.onselectday = This.options.onSelectDay; This.ontoday = This.options.onToday; This.onfinish = This.options.onFinish; This. Draw (); },//Set default properties Setoptions:function (options) {this.options = {//default value Year:new Date (). getFullYear (),//Show year month:new Dat E (). getmonth () + 1,//display month selectday:null,//Select Date onselectday:function () {},//on select date triggers ontoday:function () {},//on today's date triggers on Finish:function () {}//calendar to be triggered after finished; Object.extend (this.options, Options | | {}); },//Last one months premonth:function () {//First get the Date object of one months var d = new Date (this. Year, this. Month-2, 1); Then set the property this. Year = D.getfullyear (); This. Month = D.getmonth () + 1; Re-draw the calendar this. Draw (); },//Next one month nextmonth:function () {var d = new Date (this. Year, this. Month, 1); This. Year = D.getfullyear (); This. Month = D.getmonth () + 1; This. Draw (); },//Draw calendar draw:function () {//To save the date list var arr = []; Use the date value of the first day of the month in the week as the month offDays of the day for (var i = 1, firstday = new Date (this). Year, this. Month-1, 1). Getday (); I <= FirstDay; i++) {Arr.push (" ");} Use the date value of the last day of the month in one months as the number of days for the month for (var i = 1, monthday = new Date (this). Year, this. Month, 0). GetDate (); I <= monthday; i++) {Arr.push (i);} var frag = document.createdocumentfragment (); This. days = []; while (Arr.length > 0) {//Insert a tr var row = document.createelement ("tr") every week; There are 7 days per week for (var i = 1; I <= 7; i++) {var cell = document.createelement ("TD"); cell.innerhtml = " "; if (Arr.length > 0) {var d = arr.shift (); cell.innerhtml = D; if (d > 0) {this. DAYS[D] = cell; To determine whether or not today if (this. Issame New Date (this. Year, this. Month-1, D), New Date ()) {this.ontoday (cell);} Determines whether to select the date if (this. Selectday && this. Issame New Date (this. Year, this. Month-1, D), this. Selectday)) {this.onselectday (cell);} } row.appendchild (cell); } frag.appendchild (row); ///First empty content and then insert (ie table can not use innerHTML) while (this. Container.haschildNodes ()) {this. Container.removechild (this. Container.firstchild); } this. Container.appendchild (Frag); This.onfinish (); Issame:function (d1, D2) {return (d1.getfullyear () = D2.getfullyear () && d1.getmonth () = = D2.get Month () && d1.getdate () = = D2.getdate ()); } }; </script> <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 ">2008</span> year <span id=" Idcalendarmonth ">8</span> month <table" 0 " > <thead> <tr> <td> date </td> <td> two </td> <td> </td> <td> three </t D> <td> four </td> <td> five </td> <td> six </td> </tr> </thead> <tbody id= " Idcalendar "> </tbody> </table> </div> <script language=" JavaScript "> var cale = new Calen Dar ("Idcalendar", {selectday:new Date (). Setdate (), Onselectday:function (o) {o.classname = "onselect";}, Ontoday: Function (o) {o.classname = "ontoday";}, Onfinish:function () {$ ("idcalendaryear"). InnerHTML = this. year; $ ("Idcalendarmonth"). InnerHTML = this. Month; var flag = [10,15,20]; for (var i = 0, len = flag.length i < len; i++) {this. days[flag[i]].innerhtml = "" + Flag[i] + ""; } }}); $ ("Idcalendarpre"). onclick = function () {cale. Premonth (); $ ("Idcalendarnext"). onclick = function () {cale. Nextmonth (); } </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
