Problem generation requirement: I got the memo feature when I was working on OA and wanted to display the requirement in the form of calendar. I wanted to find a js Code on the Internet, but I found it either too complicated, either difficult to control or poor compatibility ......
Problem Analysis: find that the best is the best.
Solution: you can write a calendar by yourself.
Code rendering:
Calendar main program
The 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 ="
";}
For (var I in data. ARR) {var showText = data. ARR [I] | "", br = I % data. ROWLEN, title, css;
If (! Br) {table + ="
"For (var I = 0; I
"};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 + ="
| "+ ShowText +" | ";} 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 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:
The Code is as follows:
Var aa = new calendar () // create a new calendar
Aa. init () // calendar Initialization
The 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.
The Code is as follows:
Js Calendar effect-wangzf
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 ="
";}
For (var I in data. ARR) {var showText = data. ARR [I] | "", br = I % data. ROWLEN, title, css = "";
If (! Br) {table + ="
"For (var I = 0; I
"};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 + ="
| "+ ShowText +" | ";} 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 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
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
