<html>
<head>
<title>jsmonthview demo</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script language="javascript">
<!–
//this is jsmonthview 1.1, author is chinese dengkang (2002-08-21).
//i allow your do any modify, but i dont bear any liability.
//browser: ie 4 and later
function definemonthview(thetextobject){ //the month view construct function
this.getonlyname = function( ){ //create one and only name on the document
var thename = "mv"; //the month view elements name prefix, allow modify
var aryname = new array();
aryname[0] = "_monthview"; //the month view main bodys name postfix, can not modify
aryname[1] = "_monthgrid"; //the month view day areas name postfix, can not modify
aryname[2] = "_gopreviousmonth"; //the month view go previous month buttons name postfix, can not modify
aryname[3] = "_gonextmonth"; //the month view go next month buttons name postfix, can not modify
aryname[4] = "_yearlist"; //the month view year lists name postfix, can not modify
aryname[5] = "_monthlist"; //the month view month lists name postfix, can not modify
aryname[6] = "_daylist"; //keep the month view current days element name postfix, can not modify
var i = 0, j = 0, maxi = 2000;
var extag = true;
while ((extag == true) && (i < maxi)){
i++;
extag = false;
for (j = 0; j < aryname.length; j++){
if (document.all.item(thename + i.tostring() + aryname[j]) != null){
extag = true;
}
}
}
if (extag == false){
return(thename + i.tostring());
}else{
return("_" + thename);
}
}
var thename = this.getonlyname();
this.name = thename; //the month view name
this.source = thetextobject; //the month view act on thetextobject
this.minyear = 1970; //year list min value
//return between 1000 and 9999 and <= this.maxyear
this.maxyear = 2030; //year list max value
//return between 1000 and 9999 and >= this.minyear
this.width = 300; //the month view main bodys width
this.height = 200; //the month view main bodys height
this.dateformat = "<yyyy>-<mm>-<dd>"; //the date format
//<yy> or <yyyy> is year, <m> or <mm> is digital format month, <mmm> or <mmmmmm> is character format month, <d> or <dd> is day, other char unchanged
//this function setting year, month and day sequence
//for example:
// <yyyy>-<mm>-<dd> : 2002-04-01
// <yy>.<m>.<d> : 02.4.1
// <yyyy> year <mmmmmm> month <d> day : 2002 year april month 1 day
// <m>/<d>/<yy> : 4/1/02
// <mmm> <dd>, <yyyy> : apr 01, 2002
// <mmmmmm> <d>, <yyyy> : april 1, 2002
// <dd> <mmm> <yyyy> : 01 apr 2002
// <dd>/<mm>/<yyyy> : 01/04/2002
this.unselectbgcolor = "#ffffff"; //the month view default background color
this.selectedbgcolor = "#808080"; //the selected date background color
this.selectedcolor = "#ffffff"; //the selected date front color
this.daybdwidth = "2px"; //the day unit border width
this.daybdcolor = this.unselectbgcolor; //the day unit border color,default is this.unselectbgcolor
this.todaybdcolor = "#ff0000"; //denote todays date border color
this.invalidcolor = "#808080"; //it is not current month day front color
this.validcolor = "#0000ff"; //it is current month day front color
this.weekendbgcolor = this.unselectbgcolor; //the weekend background color, default is this.unselectbgcolor
this.weekendcolor = this.validcolor; //the weekend front color, default is this.validcolor
this.yearliststyle = "font-size:12px; font-family:verdana;"; //the year lists style
this.monthliststyle = "font-size:12px; font-family:verdana;"; //the month lists style
this.monthname = new array(); //month name list, font is include this.monthliststyle
this.monthname[0] = "january";
this.monthname[1] = "february";
this.monthname[2] = "march";
this.monthname[3] = "april";
this.monthname[4] = "may";
this.monthname[5] = "june";
this.monthname[6] = "july";
this.monthname[7] = "august";
this.monthname[8] = "september";
this.monthname[9] = "october";
this.monthname[10] = "november";
this.monthname[11] = "december";
this.weekliststyle = "font-size:16px; font-weight:bolder; font-family:times new roman;";
this.titlestyle = "text-align:center; vertical-align:bottom; cursor:default; color:#000000; background-color:" + this.unselectbgcolor + ";"; //the month view title areas style
this.weekname = new array(); //week name list, font is include this.weekliststyle
this.weekname[0] = "sun";
this.weekname[1] = "mon";
this.weekname[2] = "tue";
this.weekname[3] = "wed";
this.weekname[4] = "thu";
this.weekname[5] = "fri";
this.weekname[6] = "sat";
this.footerstyle = "text-align:left; vertical-align:middle; cursor:hand; color:#000000; background-color:" + this.unselectbgcolor + ";"; //the month footer areas style
this.todayliststyle = "font-size:12px; font-family:verdana;"
this.todaytitle = "today:"; //today tip string, font is include this.footerstyle
this.monthbtstyle = "font-family:marlett; font-size:12px;"; //the change month button style
this.previousmonthtext = "3"; //the go previous month button text
//font is include this.monthbtstyle
this.nextmonthtext = "4"; //the go next month button text
//font is include this.monthbtstyle
this.monthgridstyle = "border-width:1px; border-style:solid; border-color:#000000;"; //the month view main bodys default style
this.headerstyle = "height:32px; background-color:menu;"; //the month view header areas style
this.linebgstyle = "height:10px; background-color:" + this.unselectbgcolor + "; text-align:center; vertical-align:middle;"; //the month view title area and day area compart area background style
this.linestyle = "width:90%; height:1px; background-color:#000000;"; //the month view title area and day area compart area front style
this.daystyle = "cursor:hand; font-size:12px; font-family:verdana; text-align:center; vertical-align:middle;"; //the month view day areas style
this.overdaystyle = "this.style.textdecoration=underline;"; //the mouse over a day style
this.outdaystyle = "this.style.textdecoration=none;"; //the mouse out a day style
this.getoffsetleft = function(theobject){ //return theobjects absolute offsetleft
var absleft = 0;
var theposition = "";
var tmpobject = theobject;
while (tmpobject != null){
theposition = tmpobject.position;
tmpobject.position = "static";
absleft += tmpobject.offsetleft;
tmpobject.position = theposition;
tmpobject = tmpobject.offsetparent;
}
return(absleft);
}
this.getoffsettop = function(theobject){ //return theobjs absolute offsettop
var abstop = 0;
var theposition = "";
var tmpobject = theobject;
while (tmpobject != null){
theposition = tmpobject.position;
tmpobject.position = "static";
abstop += tmpobject.offsettop;
tmpobject.position = theposition;
tmpobject = tmpobject.offsetparent;
}
return(abstop);
}
this.getformatyear = function(theyear){//format theyear to 4 digit
var tmpyear = parseint(theyear,10);
if (tmpyear < 100){
tmpyear += 1900;
if (tmpyear < 1940){
tmpyear += 100;
}
}
if (tmpyear < this.minyear){
tmpyear = this.minyear;
}
if (tmpyear > this.maxyear){
tmpyear = this.maxyear;
}
return(tmpyear);
}
this.getmonthdays = function(theyear, themonth){ //get theyear and themonth days number
var thedays = new array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var themonthday = 0, tmpyear = this.getformatyear(theyear);
themonthday = thedays[themonth];
if (themonth == 1){ //themonth is february
if (((tmpyear % 4 == 0) && (tmpyear % 100 != 0)) || (tmpyear % 400 == 0)){
themonthday++;
}
}
return(themonthday);
}
this.setdateformat = function(theyear, themonth, theday){//format a date to this.dateformat
var thedate = this.dateformat;
var tmpyear = this.getformatyear(theyear);
var tmpmonth = themonth;
if (tmpmonth < 0){
tmpmonth = 0;
}
if (tmpmonth > 11){
tmpmonth = 11;
}
var tmpday = theday;
if (tmpday < 1){
tmpday = 1;
}else{
tmpday = this.getmonthdays(tmpyear, tmpmonth);
if (theday < tmpday){
tmpday = theday;
}
}
thedate = thedate.replace(/<yyyy>/g, tmpyear.tostring());
thedate = thedate.replace(/<yy>/g, tmpyear.tostring().substr(2,2));
thedate = thedate.replace(/<mmmmmm>/g, this.monthname[tmpmonth]);
thedate = thedate.replace(/<mmm>/g, this.monthname[tmpmonth].substr(0,3));
if (themonth < 9){
thedate = thedate.replace(/<mm>/g, "0" + (tmpmonth + 1).tostring());
}else{
thedate = thedate.replace(/<mm>/g, (tmpmonth + 1).tostring());
}
thedate = thedate.replace(/<m>/g, (tmpmonth + 1).tostring());
if (theday < 10){
thedate = thedate.replace(/<dd>/g, "0" + tmpday.tostring());
}else{
thedate = thedate.replace(/<dd>/g, tmpday.tostring());
}
thedate = thedate.replace(/<d>/g, tmpday.tostring());
return(thedate);
}
