Calendar control source code

<SCRIPT>
/* Alin */
/* Email: caoailin111@sohu.com */
/* QQ: 38062022 */
/* Creation date: 2004-6-13 */
VaR myc_x, myc_y;
VaR myc_timeset = NULL, myc_timeset1 = NULL;
VaR divobj = NULL;
VaR inputname;
Function mycalendar () // build object
{
VaR mydate = new date ();
This. Year = mydate. getfullyear ();
This. month = mydate. getmonth () + 1;
This. Date = mydate. getdate ();

This. format = "yyyy-mm-dd ";
This. Style = mystyle (1 );
This. Show = createcalendar;
This. Input = createinput;
}

Function mystyle (Num) // sets the style
{
If (! Num | isnan (Num) {alert ('the parameter is incorrect. Use the default style! '); Num = 1 ;}
VaR style = new array ();

Style [1] = ". Week {background-color: # dfdfff; font-size: 12px; width: 140px ;}"
+ ". DS {width: 140px; font-size: 12px; cursor: hand }"
+ ". Mover {border: 1px solid black; Background-color: # f4f4f4 ;}"
+ ". Move1 {border: 1px solid # 5d5d5d; Background-color: # f4f4f4; color: # 909eff; font-size: 12px }"
+ ". Tit {background-color: # 909eff; width: 140px; font-size: 12px; color: White; cursor: Default }"
+ ". CS {position: absolute; Border: 1px solid # 909eff; width: 142px; left: 0px; top: 0px; Z-index: 9999 ;}"
+ ". Shadow {position: absolute; left: 0px; top: 0px; font-family: Arial black; font-size: 50px; color: # d4d4d4; Z-index: 1; text-align: center ;}";

Document. Write ("<style type = 'text/CSS '> ");
Document. Write (style [num]);
Document. Write ("</style> ");
}

Function createcalendar ()
{
VaR week = new array ('day', 'yi', '2', '3', '4', '5', '6 ');

Document. write ("<Div class = 'cs 'onselectstart = 'Return false' oncontextmenu = 'Return false' onmousedown = 'if (event. button = 2) This. style. display = \ "None \" 'id = 'py-div '> <Div class = 'shadow'> </div> <Div style = 'position: absolute; left: 0px; top: 0px; Z-index: 1'> ");
// Create a header
Document. write ("<Table class = 'tit' id = 'py-top 'onmousedown = 'py-x = event. x-parentNode.parentNode.style.pixelLeft; myc_y = event. y-parentNode.parentNode.style.pixelTop; setcapture () 'onmouseup = 'releasecapture (); 'onmousemove = 'mycmove (this. parentelement. parentelement); '> <tr> <TD width = 10 onmouseover = 'this. style. color = \ "Black \" 'onmouseout = 'this. style. color = \ "\" 'onclick = 'cutyear () 'style = 'font-family: webdings; cursor: hand; 'title = 'decrease year'> 7 </TD> <TD Title = 'decrease month' onmouseover = 'this. style. color = \ "Black \" 'onclick = 'cutmonth () 'onmouseout = 'this. style. color = \ "\" 'width = 10 style = 'font-family: webdings; cursor: hand; '> 3 </TD> <TD align = center onmouseover = This. classname = 'move1'; onmouseout = This. classname = ''; divhidden (ACC. parentelement. nextsibling); onclick = 'createyear ("+ this. year + ", this); divshow (ACC. parentelement. nextsibling); '> </TD> <TD align = center onclick = 'createmonth ("+ this. month + ", this); divshow (ACC. parentelement. nextsibling) 'onmouseover = This. classname = 'move1'; onmouseout = This. classname = ''; divhidden (ACC. parentelement. nextsibling);> </TD> <TD width = 10 onmouseover = 'this. style. color = \ "Black \" 'onmouseout = 'this. style. color = \ "\" 'onclick = 'addmonth () 'style = 'font-family: webdings; cursor: hand; 'title = 'add month'> 4 </TD> <TD width = 10 style = 'font-family: webdings; cursor: hand; 'onmouseover = 'this. style. color = \ "Black \" 'onmouseout = 'this. style. color = \ "\" 'onclick = 'addyear () 'Title = 'add year'> 8 </TD> </tr> </table> ");

// Create a weekly entry
Document. Write ("<Table class = 'Week'> <tr> ");
For (I = 0; I <7; I ++)
Document. Write ("<TD align = center>" + week [I] + "</TD> ");
Document. Write ("</tr> </table> ");
// Create date entry
Document. Write ("<Table class = 'ds' id = 'my' cellspacing = 2 cellpadding = 0> ");
For (I = 0; I <6; I ++)
{
Document. Write ("<tr> ");
For (j = 0; j <7; j ++)
Document. write ("<TD width = 10% Height = 16 align = center onmouseover = 'mover (this) 'onmouseout = 'mout (this)' onclick = 'if (this. innertext! = \ "\") Getvalue (inputname, this. innertext); myc_div.style.display = \ "None \" '> </TD> ");
Document. Write ("</tr> ");
}
Document. Write ("</table> ");

// Create a watermark
Document. Write ("</div> ");
// Create a selection Layer
Document. write ("<Div style = 'position: absolute; left: 0px; top: 0px; Z-index: 3 'onmouseover = divshow (this) onmouseout = divhidden (this)> </div> ");
Document. Write ("</div> ");


// Display date
Showdate (this. Year, this. month );
Myc_div.style.display = 'none ';
}

Function getvalue (OBJ, value)
{
Eval (OBJ). value = parseint (myc_top.cells [2]. innertext) + "-" + parseint (myc_top.cells [3]. innertext) + "-" + value;
}
Function showdate (year, month)
{
VaR mydate = new date (year, month-1, 1 );
VaR today = new date ();
VaR day = mydate. getday ();
VaR length = new array (, 31 );
Length [1] = (Year % 4 = 0) & (Year % 100! = 0) | (Year % 400 = 0 ))? 29:28;

For (I = 0; I <acc. cells. length; I ++) Y. cells [I]. innerhtml = "";

For (I = 0; I <length [month-1]; I ++)
{
Maid. cells [I + Day]. innerhtml = (I + 1 );
If (new date (year, month-1, I + 1 ). getday () = 6 | new date (year, month-1, I + 1 ). getday () = 0) {ACC. cells [I + Day]. style. color = 'red ';}
}

Myc_top.cells [2]. innertext = year + "year ";
Myc_top.cells [3]. innertext = month + "month ";

With (maid. parentnode. previussibling. Style)
{
Pixelleft = maid. offsetleft;
Pixeltop = maid. offsettop;
Height = acc. clientheight;
Width = acc. clientwidth;
}
ACC. parentelement. parentelement. style. Height = acc. parentelement. offsetheight;
ACC. parentelement. previussibling. innerhtml = year;
}

// Some additional functions --------------------
// --------- Begin -------------------
Function mover (OBJ) {obj. classname = 'mover ';}
Function mout (OBJ) {If (obj. classname = 'mover ') obj. classname = '';}
Function addyear () {var year = parseint (myc_top.cells [2]. innertext); var month = parseint (myc_top.cells [3]. innertext); year ++; showdate (year, month );}
Function addmonth () {var year = parseint (myc_top.cells [2]. innertext); var month = parseint (myc_top.cells [3]. innertext); month ++; If (month> 12) {month = 1; year ++;} showdate (year, month );}
Function cutyear () {var year = parseint (myc_top.cells [2]. innertext); var month = parseint (myc_top.cells [3]. innertext); year --; showdate (year, month );}
Function cutmonth () {var year = parseint (myc_top.cells [2]. innertext); var month = parseint (myc_top.cells [3]. innertext); month --; If (month <1) {month = 12; year --;} showdate (year, month );}
Function divs (OBJ)
{
If (OBJ! = Divobj)
{
OBJ. style. backgroundcolor = "# 909eff ";
OBJ. style. Color = 'black ';
}
If (divobj! = NULL)
{
Divobj. style. backgroundcolor = '';
Divobj. style. Color = '';
}
Divobj = OBJ;
}

Function divshow (OBJ)
{If (myc_timeset! = NULL) cleartimeout (myc_timeset );
OBJ. style. Display = 'block ';
}
Function divhidden (OBJ) {myc_timeset = Window. setTimeout (function () {obj. style. Display = 'none'}, 500 );}
Function createyear (year, OBJ) // select the year to create
{
VaR ystr;
VaR odiv;
Ystr = "<Table class = 'move1' cellspacing = 0 cellpadding = 2 width =" + obj. offsetwidth + "> ";
Ystr + = "<tr> <TD style = 'cursor: Hand 'onclick = 'createyear (" + (year-20) + ", myc_top.cells [2]) 'align = center> flip up </TD> </tr> ";
For (I = year-10; I <year + 10; I ++)
If (year = I)
Ystr + = "<tr style = 'background-color: # 909eff '> <TD style = 'color: black; Height: 16px; cursor: hand 'align = center onclick = 'admin_top. cells [2]. innertext = This. innertext; showdate ("+ I +", parseint (myc_top.cells [3]. innertext); py. parentelement. nextsibling. innerhtml = \ "\" '> "+ I +" year </TD> </tr> ";
Else
Ystr + = "<tr> <TD align = center style = 'cursor: hand' onmouseover = divs (this) onclick = 'relationship _ top. cells [2]. innertext = This. innertext; showdate ("+ I +", parseint (myc_top.cells [3]. innertext); py. parentelement. nextsibling. innerhtml = \ "\" '> "+ I +" year </TD> </tr> ";
Ystr + = "<tr> <TD style = 'cursor: Hand 'onclick = 'createyear (" + (Year + 20) + ", myc_top.cells [2]) 'align = center> flip down </TD> </tr> ";
Ystr + = "</table> ";

Odiv = maid. parentelement. nextsibling;
Odiv. innerhtml = '';
Odiv. innerhtml = ystr;

Showdiv (odiv, obj. offsettop + obj. offsetheight, obj. offsetleft );
}
Function createmonth (month, OBJ) // create a month and select
{
VaR mstr;
VaR odiv;
Mstr = "<Table class = 'move1' cellspacing = 0 cellpadding = 2 width =" + (obj. offsetwidth + 5) + "> ";
For (I = 1; I <13; I ++)
If (month = I)
Mstr + = "<tr style = 'background-color: # 909eff '> <TD style = 'color: black; Height: 16px; cursor: hand 'align = center onclick = 'admin_top. cells [3]. innertext = This. innertext; showdate (parseint (myc_top.cells [2]. innertext), "+ I +"); py. parentelement. nextsibling. innerhtml = \ "\" '> "+ I +" month </TD> </tr> ";
Else
Mstr + = "<tr> <TD align = center style = 'cursor: Hand 'onmouseover = 'divs (this) 'onclick = 'gem_top. cells [3]. innertext = This. innertext; showdate (parseint (myc_top.cells [2]. innertext), "+ I +"); py. parentelement. nextsibling. innerhtml = \ "\" '> "+ I +" month </TD> </tr> ";
Mstr + = "</table> ";
Odiv = maid. parentelement. nextsibling;
Odiv. innerhtml = '';
Odiv. innerhtml = mstr;
Showdiv (odiv, obj. offsettop + obj. offsetheight, obj. offsetleft );
}

Function showdiv (OBJ, top, left)
{
OBJ. style. pixeltop = top;
OBJ. style. pixelleft = left;
}
Function mycmove (OBJ)
{
If (event. Button = 1)
{
VaR x = obj. clientleft;
Var y = obj. clienttop;
OBJ. style. pixel elleft = x + (event. x-myC_x );
OBJ. style. pixeltop = Y + (event. y-myC_y );
Window. Status = myc_y;
}
}
Function showdiv2 (OBJ)
{
Inputname = obj. Name;
VaR E = OBJ;
VaR ot = obj. offsettop;
VaR OL = obj. offsetleft;
While (OBJ = obj. parentelement) {ot + = obj. offsettop; OL + = obj. offsetleft ;}
Myc_div.style.pixeltop = ot + E. offsetheight;
Myc_div.style.pixelleft = ol;
Myc_div.style.display = "Block ";
}
Function createinput (name)
{Myc_div.style.display = 'none ';
Document. Write ("<input type = 'text' name = '" + name + "'size = 20 onfocus = 'showdiv2 (this)'> ");
}

// -------------- End ---------------------

</SCRIPT>

<SCRIPT>
VaR mycalendar = new mycalendar;
Mycalendar ar. Year = 2006;
Mycalendar. Show ();
Mycalendar. Input ("txt1 ");
</SCRIPT>
<Input type = "text" name = "test" onfocus = "showdiv2 (this)" readonly = true>