Black style JS calendar code, left and right arrows page year, month

Black style JS calendar code, left and right arrows page year, month

The black style JS calendar code can be turned over to a year or month through the left and right arrows. In terms of appearance, it works perfectly with the gray background, the interface language is in English. If you want to use it, you can change it to Chinese. Don't tell me that you can't even use English words for December or 7 weeks!

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", "l", "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 a navigation

Var calendarNavTR = calendarTable. insertRow ();

Var calendarNavTD = calendarNavTR. insertCell ();

// Nested table

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 );

// Display the English prompt

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 the calendar Header

Var calendarMainTR = new Array ();

For (I = 0; I <calendarRows; I ++ ){

CalendarMainTR [I] = calendarTable. insertRow ();

For (j = 0; j <calendarCols; j ++) calendarMainTR [I]. insertCell ();

}

// Table attributes

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 subject

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 empty rows

Function deleteNoneRow (){

If (! CalendarTable. rows [6]. innerText) calendarTable. deleteRow (6 );

If (! CalendarTable. rows [7]. innerText) calendarTable. deleteRow (7 );

}

// Remove the calendar from the page

Function deleteCalendar (){

If (calendarTable) calendarTable. outerHTML = "";

}

}

</SCRIPT> <div style = "text-align: center; margin: 30px 0 0 0;">