Javascript Calendar function object_javascript skills

Source: Internet
Author: User
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 + =" ";} Table + ="
"+ ShowText +"
"
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 + =" ";} Table + ="
"+ ShowText +"
"
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.