<title>monthview demo</title>
<script language=javascript>
/*********************************** program features: Date selection
Features: javascript+html imitation of MonthView control in VB
Author: Ken
Contact: boboshu@21cn.com
Development Date: 2002-8-5
\***********************************/
var languagename= "cn"//Content Display language value: "cn" "en"
var currentmonth,currentyear
var nowdate,nowmonth,nowyear
D=new Date ();
Nowdate=d.getdate ()
Nowmonth=d.getmonth ()
Nowyear=d.getyear ()
Currentmonth=nowmonth
Currentyear=nowyear
ARRWEEKCAPTION_CN = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")
Arrweekcaption_en = new Array ("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat")
arrmonthcaption_cn= new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
arrmonthcaption_en= New Array ("January", "February", "March", "April", "may", "June", "July", "August", "September", " October "," November "," December ")
function MonthView () {}
/******************************* Initialization Control
\*******************************/
function Monthview.initialize () {
Output = ' <table cellpadding=0 cellspacing=2 style= "border:1 solid Black;width:300;cursor:default" id= "TblMonthView "Onselectstart=" return false ">"
output+= ' <tr> '
output+= ' <td> '
output+= ' <table width= ' 100% ' cellpadding=0 cellspacing=0> '
output+= ' <tr style= ' padding-top:10;padding-bottom:10;background:menu; "id=" trcaption ">"
output+= ' <td><input type= "button" value= "3" style= "Height:22;font-family:webdings" ></td> '
output+= ' <td align= "center" ><span id= "Spancurrentmonth" style= "Font-size:12"; ></span><span style= "Padding-left:10;font-size:12" id= "Spancurrentyear" ></span></td> "
output+= ' <td align= "right" ><input type= "button" value= "4" style= "Height:22;font-family:webdings" & Gt;</td> '
output+= ' </tr> '
output+= ' </table> '
output+= ' </td> '
output+= ' </tr> '
output+= ' <tr> '
output+= ' <td> '
output+= ' <table width= "100%" cellpadding=0 cellspacing=2 id= "Tblshowday" style= "Font-size:12" >
output+= ' <tr align= ' center ' ><td></td><td></td><td></td><td>< ;/td><td></td><td></td><td></td></tr> '
output+= ' <tr><td colspan=7 height= "1" style= "Background:black" id= "Tdline" ></td></tr> "
output+= ' <tr><td></td><td></td><td></td><td></td><td& Gt;</td><td></td><td></td></tr> '
output+= ' </table> '
output+= ' </td> '
output+= ' </tr> '
output+= ' <tr> '
output+= ' <td> '
output+= ' <table width= "100%" cellpadding=0 cellspacing=2 id= "Tbltoday" style= "Font-size:12" >
output+= ' <tr><td width= ' ></td><td></td></tr> '
output+= ' </table> '
output+= ' </td> '
output+= ' </tr> '
output+= ' </table> '
document.write (Output)
Current year, month display *********
Monthview.setcurrentcaption ()
//*********************************
The display of the week header *********
Monthview.setweekcaption ()
//*********************************
Set the monthly date *********
Monthview.bulidday ()
//*****************************
Show hidden Today date *********
Monthview.setshowhidetoday (True)
//*****************************
}
function Monthview.setcurrentcaption () {
Spancurrentyear.innerhtml=currentyear
if (languagename== "cn") {
Spancurrentmonth.innerhtml=arrmonthcaption_cn[currentmonth]
}else{
Spancurrentmonth.innerhtml=arrmonthcaption_en[currentmonth]
}
}
function Monthview.setweekcaption () {
if (languagename== "cn") {
Arrcaption=arrweekcaption_cn
}else{
Arrcaption=arrweekcaption_en
}
for (var i=0; i<arrcaption.length; i++) {
Tblshowday.rows[0].cells[i].innerhtml=arrcaption[i]
}
}
function Monthview.bulidday () {
Arrmonthcount=new Array (31,28,31,30,31,30,31,31,30,31,30,31)
if ((currentyear% 400 ==0) | | ((currentyear% 100==0) && (currentyear% 4==0))) {
arrmonthcount[1]=29
}
rowday=2
while (Tblshowday.rows.length>rowday) {
Tblshowday.deleterow (Rowday)
}
Firstday=new Date (currentyear,currentmonth,1)
Temprow=tblshowday.insertrow ()
Fill the previous date of the month, 1th *********
for (var j=0; J<firstday.getday (); j + +) {
Tempcell=temprow.insertcell ()
}
//*************************************
for (var i=1;i<=arrmonthcount[currentmonth]; i++) {
Tempcell=temprow.insertcell ()
tempcell.style.textalign= "Center"
Tempcell.innerhtml=i
Tempcell.onclick=monthview.action
if ((I+firstday.getday ())%7 = = 0 && i!=arrmonthcount[currentmonth]) {Temprow=tblshowday.insertrow ()}
}
}
function Monthview.showcurrentdate (direction) {
if (direction== "preview") {
currentmonth--
if (currentmonth<0) {currentmonth=11; currentyear--}
}
if (direction== "next") {
currentmonth++
if (currentmonth>11) {currentmonth=0; currentyear++}
}
Monthview.setcurrentcaption ()
Monthview.bulidday ()
}
function Monthview.setlanguage (itsname) {
Languagename=itsname
Monthview.setcurrentcaption ()
Monthview.setweekcaption ()
Monthview.setshowhidetoday (True)
}
function Monthview.setcaptionbg (itscolor) {
Trcaption.style.background=itscolor
}
function Monthview.setborder (itsborder) {
Tblmonthview.style.border=itsborder
}
function Monthview.setlinecolor (itscolor) {
Tdline.style.background=itscolor
}
function Monthview.setshowhidetoday (flag) {
EL=TBLTODAY.ROWS[0].CELLS[1]
if (flag) {
if (languagename== "cn") {
El.innerhtml= "Today:" +nowyear+ "-" + (nowmonth+1) + "-" +nowdate
}else{
El.innerhtml= "Today:" +nowyear+ "-" + (nowmonth+1) + "-" +nowdate
}
el.style.display= "Block"
}else{
El.style.display= "None"
}
}
function Monthview.action () {
Please modify this function *********
monthview_value=currentyear+ "-" + (currentmonth+1) + "-" +this.innerhtml
Alert (Monthview_value)
}
</script>
<body>
<div>
<script language=javascript>
Monthview.initialize ()
</script>
</div>
<br><br>
<table border=1 style= "font-size:12;width:95%" >
<tr>
<td> Methods </td><td> Description </td><td> Demo </td>
</tr>
<tr>
<td>monthview.initialize () </td>
<td> Initializing Controls </td>
<td><image src= "Http://edu.cnzz.cn/NewsInfo/none.gif" width= "1" height= "1" ></td>
</tr>
<tr>
<td>monthview.setlanguage (<i>par</i>) <br> parameters: "cn" "en" </td>
<td> Set control display language </td>
<td>
<input type= "button" value= "Chinese" >
<input type= "button" value= "English" >
</td>
</tr>
<tr>
<td>monthview.setborder (<i>par</i>) <br> Parameters: Border Width (int) border shape (Solid|dot ...) border color "</td>
<td> Border Settings </td>
<td>
<input type= "button" value= "Changeborder" >
</td>
</tr>
<tr>
<TD>MONTHVIEW.SETCAPTIONBG (<i>par</i>) <br> parameters: Hexadecimal color code </td>
<td> set the background color of the current year and month </td>
<td>
<input type= "button" value= "Infobackground" >
</td>
</tr>
<tr>
<td>monthview.setlinecolor (<i>par</i>) <br> parameters: Hexadecimal color code </td>
<td> set the color of the split line </td>
<td>
<input type= "button" value= "darkred" >
</td>
</tr>
<tr>
<td>monthview.setshowhidetoday (<i>par</i>) <br> parameter:true|false</td>
<td> Show/Hide today's date </td>
<td>
<input type= "button" value= "Hide" >
<input type= "button" value= "Show" >
</td>
</tr>
</table>
</body>
Turn from: Dynamic Network production guide www.knowsky.com
