Black Style JS Calendar code, left-right arrow page year, month

Black-style JS calendar code, through the left and right arrows can be paging to a certain year, a month, from the appearance of the gray background with perfect, foreign web site, interface language is English, if you intend to use your own to modify the Chinese Oh, don't tell me you even December and 7 weeks of English words will not Oh!

Example:

<title> Classic JS Calendar </title>

<STYLE>

Body {background-color: #202020;}

td {FONT-FAMILY:TAHOMA;FONT-SIZE:11PX;}

. calendartable {background-color: #494949;}

. calendarnav {background-color: #000000; color:white;text-align:center;height:18px;}

. calendarnavenglish {Color:white;text-align:center}

. calendarnavbar {font-size:10px;cursor:hand;color: #A5BEA5;}

. calendarheadtr {background-color: #494949; Text-align:center;color: #B9B9B9; height:17px;}

. CALENDARHEADTR td {WIDTH:28PX;}

. calendarmaintr {background-color: #333333; Text-align:center;color: #B9B9B9; height:17px;}

. calendarmaintr td {WIDTH:28PX;}

. calendartoday {background-color: #636563; color: #FFFF00; width:90%;height:90%;font-weight:bolder;}

</STYLE>

<script language= "JavaScript" defer>

Date.prototype.getLastDay = function (year,month) {

if (arguments.length==2)

Return (new Date (year,month+1,0). GetDate ())

Else

With (new date ()) return (new Date (getyear (), getmonth (), 0). GetDate ())

}

Date.prototype.FirstDayofWeek = function (year,month) {

if (arguments.length==2)

Return (new Date (year,month,1). Getday ())

Else

With (new date ()) return (new Date (getyear (), GetMonth (), 1). Getday ());

}

Call

Calendar (new Date (). getyear (), new Date (). GetMonth (), new Date (). GetDate ())

function Calendar (usery,userm,userd) {

System variable

var i,j;

var now = new Date (usery,userm,userd);

var year = Now.getyear ();

var Month = Now.getmonth () +1;

var lastday = Now.getlastday (usery,userm);

var firstdayofweek = now. FirstDayOfWeek (Usery,userm);

var today = Now.getdate ();

var monthname = ["January", "February", "March", "April", "may", "June", "July", "August", "September", "October", "" November "," December "]

var weekname = ["Sun", "Mon", "Tur", "Wed", "Thu", "Fri", "Sat"]

User variable

var firstdayinweek=7

var calendarrows = 7,calendarcols=7;

User Color

var tablecellpadding=1,tablecellspacing=1,tableborder=0;

Append to where

Owhere = document.body;

Create Table

var calendartable = document.createelement ("table");

Create navigation

var CALENDARNAVTR = Calendartable.insertrow ();

var calendarnavtd = Calendarnavtr.insertcell ();

Nested tables

var navinnertable = document.createelement ("table")

var navinnertr = Navinnertable.insertrow ();

for (Var i=0;i<3;i++) Navinnertr.insertcell ();

var navspanpy = document.createelement ("<span>");

var navspanpm = document.createelement ("<span>");

var navspanny = document.createelement ("<span>");

var navspannm = document.createelement ("<span>");

With (Navinnertr.cells) {

Item ([0]). appendchild (NAVSPANPY);

Item ([0]). appendchild (NAVSPANPM);

Item ([2]). appendchild (NAVSPANNM);

Item ([2]). appendchild (Navspanny);

Show English Tips

Item ([1]). innertext = monthname[month-1]+ "" +year;

Item ([1]). Width = "100%";

Item ([1]). ClassName = "Calendarnavenglish";

//

Item ([0]). ClassName = "Calendarnavbar";

Item ([2]). ClassName = "Calendarnavbar";

}

Calendarnavtd.appendchild (navinnertable);

Create a calendar header score

var calendarmaintr = new Array ();

for (i=0;i<calendarrows;i++) {

Calendarmaintr[i] = Calendartable.insertrow ();

for (j=0;j<calendarcols;j++) Calendarmaintr[i].insertcell ();

}

Table Properties

With (calendartable) {

cellpadding=tablecellpadding;

cellspacing=tablecellspacing;

Border=tableborder;

Classname= "Calendartable";

}

Navigation content

With (NAVSPANPY) {

InnerHTML = "<<"

onclick = function () {Deletecalendar (); Calendar (Year-1,month-1,new Date (). GetDate ())}

}

With (NAVSPANPM) {

InnerHTML = "<"

onclick = function () {Deletecalendar (); Calendar (Year,month-2,new Date (). GetDate ())}

}

With (CALENDARNAVTD) {

ColSpan = 7;

ClassName = "Calendarnav";

}

With (NAVSPANNM) {

InnerHTML = ">"

onclick = function () {Deletecalendar (); Calendar (Year,month,new Date (). GetDate ())}

}

With (Navspanny) {

InnerHTML = ">>"

onclick = function () {Deletecalendar (); Calendar (Year+1,month-1,new Date (). GetDate ())}

}

Calendar Header

var calendarheadtr = calendarmaintr[0];

With (CALENDARHEADTR) {

for (i=0;i<cells.length;i++) cells[i].innertext=weekname[i];

Classname= "CALENDARHEADTR";

}

Calendar body

var k=1;

for (i=1;i<calendarmaintr.length;i++) {

Calendarmaintr[i].classname= "Calendarmaintr";

for (j=0;j<calendarmaintr[i].cells.length;j++) {

if (I==1&&j==firstdayofweek) {

Createday ();

k++;

else if (k>1&&k<=lastday) {

Createday ();

k++;

}

}

}

Deletenonerow ();

Owhere.appendchild (calendartable);

/*function*/

Calendar Date

function Createday () {

if (k==today) {

var Todayspan = document.createelement ("span");

Todayspan.classname = "Calendartoday";

Todayspan.innertext = k;

Calendarmaintr[i].cells[j].appendchild (Todayspan);

} else {

Calendarmaintr[i].cells[j].innertext=k;

}

}

Delete blank line

function Deletenonerow () {

if (!calendartable.rows[6].innertext) Calendartable.deleterow (6);

if (!calendartable.rows[7].innertext) Calendartable.deleterow (7);

}

To remove a calendar from a page

function Deletecalendar () {

if (calendartable) calendartable.outerhtml= "";

}

}

</SCRIPT> <div style= "text-align:center;margin:30px 0 0 0;" ><HR style= "color: #999; height:1px;" > If the effect can not be displayed, please press CTRL+F5 to refresh this page, more Web code: <a href= ' http://www.veryhuo.com/' target= ' _blank ' </a></div>