Js Calendar function object

Requirement problem: I wanted to find a js Code on the Internet, but I found that it was either too complicated, difficult to control, or not compatible ......
Problem Analysis: find that the best is the best.
Solution: you can write a calendar by yourself.
Code rendering:
Calendar main program Copy codeThe Code is as follows: var calendar = {
STR: function () {with (this. data) return "" + Y + "Year," + M + "month," + D + ", Day" + WN [W];},
V: function (o, spli, sx) {with (this) return o [sx] = "" + data. Y + spli + data. M + spli + data. D },
T: function () {with (this) return data. TABLE },
DnY: function () {with (this) {calendarChange (data. Y + 1, data. M-1, data. D )}},
DnM: function () {with (this) {calendarChange (data. Y, data. M, data. D )}},
UpY: function () {with (this) {calendarChange (data. Y-1, data. M-1, data. D )}},
UpM: function () {with (this) {calendarChange (data. Y, data. M-2, data. D )}},
Day: function (o) {with (this) {data. D = o; calendarChange (data. Y, data. M-1, data. D )}},
Data: {Y: null, M: null, D: null, W: null, H: null, U: null, YMD: null, YMD_C: "hot", ARR: null, TABLE: null, MN: null, WN: null, SELECT: null, TADAY: new Date (), TADAY_C: "taday", ROWLEN: 7, VALUE: null },
CreatTable: function () {with (this ){
Var table = "<table height = 100% width = 100%> <tr>"
For (var I = 0; I <data. ROWLEN; I ++) {var t = data. WN [I] | ""; table + = "<th>" + t + "</th> ";}
For (var I in data. ARR) {var showText = data. ARR [I] | "", br = I % data. ROWLEN, title, css;
If (! Br) {table + = "</tr> <tr> "};
Data. ARR [I]? Title = data. Y + "-" + data. M + "-" + showText: title = "";
String (data. TADAY. getDate () = String (data. ARR [I])?
(Data. YMD. getFullYear () = data. TADAY. getFullYear () & data. YMD. getMonth () = data. TADAY. getMonth () & data. YMD. getDate () = data. TADAY. getDate ())?
Css = data. TADAY_C + "" + data. YMD_C: css = data. YMD_C: css = "";
Table + = "<td title = '" + title + "'class =" + css + ">" + showText + "</td> ";
} Table + = "</tr> </table>"
Data. TABLE = table; return table;
}},
CalendarStarArr: function (userY, userM, userD) {with (this ){
Var Arr = [];
Var now = new Date (userY, userM, userD );
Var LastDay = now. getLastDay ();
Var FirstDayofWeek = now. FirstDayofWeek ();
Data. YMD = now; data. Y = now. getFullYear ();
Data. M = now. getMonth () + 1; data. D = now. getDate (); data. W = now. getDay ();
While (Arr. length! = FirstDayofWeek) {Arr. push (false )}
For (var I = 0; I <LastDay; I ++) {Arr. push (I + 1 )}
While (Arr. length % data. ROWLEN! = 0) {Arr. push (false )}
Data. ARR = Arr; return Arr;
}},
CalendarChange: function (userY, userM, userD) {with (this ){
CalendarStarArr (userY, userM, userD); creatTable ()
}},
CalendarStar: function (userY, userM, userD) {with (this ){
Data. MN = ["zero", "one", "two", "three", "four", "five", "Six", "Seven", "eight ", "9", "10", "11", "12"];
Data. WN = ["day", "1", "2", "3", "4", "5", "6"];
CalendarChange (userY, userM, userD );
}},
Init: function () {with (this ){
Date. prototype. getLastDay = function () {return (new Date (this. getFullYear (), this. getMonth () + 1, 0). getDate ())}
Date. prototype. FirstDayofWeek = function () {return (new Date (this. getFullYear (), this. getMonth (), 1). getDay ())}
CalendarStar (new Date (). getFullYear (), new Date (). getMonth (), new Date (). getDate ())
}}
}

Code Application explanation:Copy codeThe Code is as follows: var aa = new calendar () // create a new calendar
Aa. init () // calendar Initialization

Copy codeThe Code is as follows: obj. innerHTML = aa. STR () // display the date string
Obj. innerHTML = aa. T () // display the table
Aa. dnY () // next year
Aa. upY () // previous year
Aa. dnM () // next month
Aa. upM () // last month
Aa. day (Number) // change the Number of digits displayed in the calendar (Number requires a numeric parameter)

This Calendar Object implements the core functions of the calendar,
Specifically, where is the calendar,
Which event triggers which function is not written,
In that case, I would lose the original purpose of writing this calendar.
No response. Let me give you an example. Let's take a look.Copy codeThe Code is as follows: <Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> js Calendar effect-wangzf </title>
</Head>
<Style>
Html, body {height: 100%; width: 100% ;}
* {Margin: 0; padding: 0 ;}
. CalendarBox {width: 100% ;}
# Calendar_control {background: # a3a3b4 ;}
# Calendar_control input {min-width: inherit ;}
# CalendarBox {width: 100%; height: 100% ;}
# Calendar_str {cursor: pointer; text-align: center; font-weight: lighter ;}
# Calendar_body td {background: # f0f0f0; cursor: pointer ;}
# Calendar_body td. taday {background: # 0CF ;}
# Calendar_body td. hot {background: # FF6 ;}
# Calendar_body th {background: # 3f526f; color: # fff ;}
# Calendar_body td, # calendar_body th {text-align: center ;}
</Style>
<Script>
Var calendar = {
STR: function () {with (this. data) return "" + Y + "Year," + M + "month," + D + ", Day" + WN [W];},
V: function (spli) {with (this) return "" + data. Y + spli + data. M + spli + data. D },
T: function () {with (this) return data. TABLE },
DnY: function () {with (this) {calendarChange (data. Y + 1, data. M-1, data. D )}},
DnM: function () {with (this) {calendarChange (data. Y, data. M, data. D )}},
UpY: function () {with (this) {calendarChange (data. Y-1, data. M-1, data. D )}},
UpM: function () {with (this) {calendarChange (data. Y, data. M-2, data. D )}},
Day: function (o) {with (this) {data. D = o; calendarChange (data. Y, data. M-1, data. D )}},
Data: {Y: null, M: null, D: null, W: null, H: null, U: null, YMD: null, YMD_C: "hot", ARR: null, TABLE: null, MN: null, WN: null, SELECT: null, TADAY: new Date (), TADAY_C: "taday", ROWLEN: 7, VALUE: null },
CreatTable: function () {with (this ){
Var table = "<table height = 100% width = 100%> <tr>"
For (var I = 0; I <data. ROWLEN; I ++) {var t = data. WN [I] | ""; table + = "<th>" + t + "</th> ";}
For (var I in data. ARR) {var showText = data. ARR [I] | "", br = I % data. ROWLEN, title, css = "";
If (! Br) {table + = "</tr> <tr> "};
Data. ARR [I]? Title = data. Y + "-" + data. M + "-" + showText: title = "";
If (String (data. D) = String (data. ARR [I]) {css + = "" + data. YMD_C ;}
If (data. YMD. getFullYear () = data. TADAY. getFullYear () & data. YMD. getMonth () = data. TADAY. getMonth () & String (data. TADAY. getDate () = String (data. ARR [I]) {css = "" + data. TADAY_C}
Table + = "<td title = '" + title + "'class =" + css + ">" + showText + "</td> ";
} Table + = "</tr> </table>"
Data. TABLE = table; return table;
}},
CalendarStarArr: function (userY, userM, userD) {with (this ){
Var Arr = [];
Var now = new Date (userY, userM, userD );
Var LastDay = now. getLastDay ();
Var FirstDayofWeek = now. FirstDayofWeek ();
Data. YMD = now; data. Y = now. getFullYear ();
Data. M = now. getMonth () + 1; data. D = now. getDate (); data. W = now. getDay ();
While (Arr. length! = FirstDayofWeek) {Arr. push (false )}
For (var I = 0; I <LastDay; I ++) {Arr. push (I + 1 )}
While (Arr. length % data. ROWLEN! = 0) {Arr. push (false )}
Data. ARR = Arr; return Arr;
}},
CalendarChange: function (userY, userM, userD) {with (this ){
CalendarStarArr (userY, userM, userD); creatTable ()
}},
CalendarStar: function (userY, userM, userD) {with (this ){
Data. MN = ["zero", "one", "two", "three", "four", "five", "Six", "Seven", "eight ", "9", "10", "11", "12"];
Data. WN = ["day", "1", "2", "3", "4", "5", "6"];
CalendarChange (userY, userM, userD );
}},
Init: function () {with (this ){
Date. prototype. getLastDay = function () {return (new Date (this. getFullYear (), this. getMonth () + 1, 0). getDate ())}
Date. prototype. FirstDayofWeek = function () {return (new Date (this. getFullYear (), this. getMonth (), 1). getDay ())}
CalendarStar (new Date (). getFullYear (), new Date (). getMonth (), new Date (). getDate ())
}}
}
</Script>
<Body id = "body">
<Table width = "100%" height = "100%" border = "0" cellspacing = "0" cellpadding = "0">
& Lt; tr height = "10%" & gt;
<Td> <table width = "100%" height = "100%" border = "0" cellspacing = "0" cellpadding = "0" id = "calendar_control">
<Tr>
& Lt; th width = "20%" align = "left" scope = "col" & gt;
<Input type = "button" title = "Previous Year" value = "<" id = "calendar_upY"/>
<Input type = "button" title = "January" value = "<" id = "calendar_upM"/> </th>
<Th width = "56%" id = "calendar_str" scope = "col" title = "click to return today."> </th>
& Lt; th width = "24%" align = "right" scope = "col" & gt;
<Input type = "button" title = "next year" value = ">" id = "calendar_dnY"/>
<Input type = "button" title = "Next Month" value = ">" id = "calendar_dnM"/> </th>
</Tr>
</Table> </td>
</Tr>
<Tr>
<Td height = "90%" id = "calendar_body"> </td>
</Tr>
</Table>
<Script>
Calendar. init ()
Function calendarChange (){
Var calendar_body = document. getElementById ("calendar_body ")
Calendar_body.innerHTML = calendar. T () // display the table
Var calendar_str = document. getElementById ("calendar_str ")
Calendar_str.innerHTML = calendar. STR () // display the date string
CalendarControl () // call calendar Control
}
CalendarChange () // calendar update
Function calendarControl (){
Var calendar_str = document. getElementById ("calendar_str ")
Calendar_str.onclick = function () {calendar. init (); calendarChange ()} // returns the current function.
Var calendar_dnY = document. getElementById ("calendar_dnY ")
Calendar_dnY.onclick = function () {calendar. dnY (); calendarChange ()} // function implementation for the next year
Var calendar_dnM = document. getElementById ("calendar_dnM ")
Calendar_dnM.onclick = function () {calendar. dnM (); calendarChange ()} // implement the functions of the following calendar month
Var calendar_upY = document. getElementById ("calendar_upY ")
Calendar_upY.onclick = function () {calendar. upY (); calendarChange ()} // functions of the previous year
Var calendar_upM = document. getElementById ("calendar_upM ")
Calendar_upM.onclick = function () {calendar. upM (); calendarChange ()} // implement the functions of last month
Var calendar_day = document. getElementById ("calendar_body"). getElementsByTagName ("td ");
For (var I in calendar_day) {calendar_day [I]. onclick = function () {var N = Number (this. innerText); if (N) {calendar. day (N); calendarChange () }}// you can specify the date of the current day.
}
</Script>
</Body>
</Html>