Calendar written by jQuery (including calendar styles and functions)

Source: Internet
Author: User

Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Script src = "../JS/connotation. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var c = new Calendar ("c ");
Document. write (c );
</Script>
</Head>
<Body>
<Div>
Normal call: <input type = "text" name = "txt2" onclick = "c. showMoreDay = true; c. show (this);"/> <br/>
<Div style = "height: 262px">
</Div>
Button call: <input type = "text" name = "btntxt" id = "btntxt"/> <input name = "button" value = "*"
Id = "button" type = "button" onclick = "c. showMoreDay = true; c. show (getObjById ('btntxt '), '2017-1-1', this) "/>
<Br/>
<Input type = "text" name = "btntxt3" id = "btntxt3"/> <input name = "button3" value = "*"
Id = "button3" type = "button" onclick = "c. showMoreDay = true; c. show (this, getObjById ('btntxt3 ')"/>
</Div>
</Body>
</Html>

Required jQuery File
Copy codeThe Code is as follows:
Function Calendar (objName)
{
This. style = {
BorderColor: "# 909eff", // border color
HeaderBackColor: "# 909EFF", // header background color
HeaderFontColor: "# ffffff", // header font color
BodyBarBackColor: "# f4f4f4", // calendar title background color
BodyBarFontColor: "#000000", // calendar title Font color
BodyBackColor: "# ffffff", // calendar background color
BodyFontColor: "#000000", // calendar font color
BodyHolidayFontColor: "# ff0000", // holiday font color
WatermarkColor: "# d4d4d4", // background watermark color
MoreDayColor: "# cccccc"
};
This. showMoreDay = false; // whether to display the date of the previous month and next month
This. Obj = objName;
This. date = null;
This. mouseOffset = null;
This. dateInput = null;
This. timer = null;
};
Calendar. prototype. toString = function ()
{
Var str = this. getStyle ();
Str + = '<div Author = "alin" class = "calendar" style = "display: none; "onselectstart =" return false "oncontextmenu =" return false "id =" Calendar "> \ n ';
Str + = '<div Author = "alin" class = "cdrWatermark" id = "cdrWatermark"> </div> <div id = "cdrBody" style = "position: absolute; left: 0px; top: 0px; z-index: 2; width: 140px; "> ';
Str + = this. getHeader ();
Str + = this. getBody ();
Str + = '</div> <div Author = "alin" id = "cdrMenu" style = "position: absolute; left: 0px; top: 0px; z-index: 3; display: none; "onmouseover =" '+ this. obj + '. showMenu (null); "onmouseout =" '+ this. obj + '. hideMenu (); "> </div> ';
Return str;
};
Calendar. prototype. getStyle = function ()
{
Var str = '<style type = "text/css"> \ n ';
Str + = '. calendar {position: absolute; width: 140px! Important; width: 142px; height: 184px! Important; height: 174px; background-color: '+ this. style. bodyBackColor + '; border: 1px solid' + this. style. borderColor + '; left: 0px; top: 0px; z-index: 9999;} \ n ';
Str + = '. cdrHeader {background-color: '+ this. style. headerBackColor + '; width: 140px; height: 22px; font-size: 12px; color:' + this. style. headerFontColor + ';} \ n ';
Str + = '. cdrWatermark {position: absolute; left: 0px; top: 55px; width: 140px; font-family: Arial Black; font-size: 50px; color: '+ this. style. watermarkColor + '; z-index: 1; text-align: center ;}\ n ';
Str + = '. cdrBodyBar {background-color: '+ this. style. bodyBarBackColor + '; font-size: 12px; color:' + this. style. bodyBarFontColor + '; width: 140px; height: 20px;} \ n ';
Str + = '. cdrBody {width: 140px; height: 122px! Important; height: 110px; font-size: 12px; cursor: pointer; color: '+ this. style. bodyFontColor +';} \ n ';
Str + = '. dayOver {height: 16px; padding: 0px; border: 1px solid black; background-color: # f4f4f4;} \ n ';
Str + = '. dayOut {padding: 1px; border: none; height: 16px;} \ n ';
Str + = '. menuOver {background-color: '+ this. style. headerBackColor + '; color:' + this. style. headerFontColor + '; font-size: 12px;} \ n ';
Str + = '. headerOver {border: 1px solid black; background-color: # f4f4f4; color: black; cursor: default;} \ n ';
Str + = '. cdrMenu {font-size: 12px; border: 1px solid #000000; background-color: # ffffff; cursor: default; width: 100%} \ n ';
Str + = 'html> body # Calendar {width: 142px; 174px ;}';
Str + = '</style> \ n ';
Return str;
};
Calendar. prototype. getHeader = function ()
{
Var str = '<table Author = "alin" class = "cdrHeader" cellSpacing = "2" cellPadding = "0"> <tr Author = "alin" align = "center"> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'headerover \ '"onmouseout =" this. className = \ '"id =" previusyear "title =" Previous Year "style =" cursor: pointer; width: 10px; "onclick ="' + this. obj + '. onChangeYear (false); "><</td> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'headerover \ '"onmouseout =" this. className = \ '"id =" previusmonth "title =" last February "style =" cursor: pointer; width: 10px; "onclick ="' + this. obj + '. onChangeMonth (false); "> </td> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'headerover \ '"id =" currentYear "style =" width: 50px; "onclick ="' + this. obj + '. showMenu (true); "onmouseout =" '+ this. obj + '. hideMenu (); this. className = \ '; "> 0 </td> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'headerover \ '"id =" currentMonth "onclick ="' + this. obj + '. showMenu (false); "onmouseout =" '+ this. obj + '. hideMenu (); this. className = \ '; "> 0 </td> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'headerover \ '"onmouseout =" this. className = \ '"id =" nextMonth "title =" next February "style =" cursor: pointer; width: 10px; "onclick ="' + this. obj + '. onChangeMonth (true); ">></td> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'headerover \ '"onmouseout =" this. className = \ '"id =" nextYear "title =" next year "style =" cursor: pointer; width: 10px; "onclick ="' + this. obj + '. onChangeYear (true); ">></td> </tr> \ n ';
Str + = '</table> \ n ';
Return str;
};
Calendar. prototype. getBody = function ()
{
Var n = 0;
Var str = this. getBodyBar ();
Str + = '<table Author = "alin" class = "cdrBody" cellSpacing = "2" cellPadding = "0"> \ n ';
For (I = 0; I <6; I ++)
{
Str + = '<tr Author = "alin" align = "center"> ';
For (j = 0; j <7; j ++)
{
Str + = '<td Author = "alin" class = "dayOut" id = "cdrDay' + (n ++) + '"width =" 13% "> </td> \ n ';
}
Str + = '</tr> ';
}
Str + = '</table> \ n ';
Str + = '<table Author = "alin" class = "cdrBodyBar" cellSpacing = "2" cellPadding = "0"> <tr align = "center" Author = "alin"> <td Author = "alin" style = "cursor: pointer; "onclick =" '+ this. obj + '. getToday (); "> today: '+ new Date (). toFormatString ("mm dd, yyyy") + '</td> </tr> </table> \ n ';
Return str;
};
Calendar. prototype. getBodyBar = function ()
{
Var str = '<table Author = "alin_bar" id = "cdrBodyBar" class = "cdrBodyBar" style = "cursor: move; "cellSpacing =" 2 "cellPadding =" 0 "> <tr Author =" alin_bar "align =" center "> \ n ';
Var day = new Array ('day', 'yi', '2', '3', '4', '5', '6 ');
For (I = 0; I <7; I ++)
{
Str + = '<td Author = "alin_bar">' + day [I] + '</td> \ n ';
}
Str + = '</tr> </table> ';
Return str;
}
Calendar. prototype. getYearMenu = function (year)
{
Var str = '<table Author = "alin" cellSpacing = "0" class = "cdrMenu" cellPadding = "0"> \ n ';
For (I = 0; I <10; I ++)
{
Var _ year = year + I;
Var _ date = new Date (_ year, this. date. getMonth (), this. date. getDate ());
Str + = '<tr Author = "alin" align = "center"> <td Author = "alin" width = "13%" height = "16 "';
If (this. date. getFullYear ()! = _ Year)
{
Str + = 'onmouseover = "this. className = \ 'menuover \ '" onmouseout = "this. className = \'\'"';
}
Else
{
Str + = 'class = "menuOver "';
}
Str + = 'onclick = "'+ this. obj + '. bindDate (\ ''+ _ date. toFormatString ("-") + '\') "> '+ _ year +' year </td> \ n ';
Str + = '</tr> ';
}
Str + = '<tr Author = "alin" align = "center"> <td Author = "alin"> <table Author = "alin" style = "font-size: 12px; width: 100%; "cellSpacing =" 0 "cellPadding =" 0 "> \ n ';
Str + = '<tr Author = "alin" align = "center"> <td Author = "alin" onmouseover = "this. className = \ 'menuover \ '"onmouseout =" this. className = \ '"onclick ="' + this. obj + '. getYearMenu ('+ (year-10) +') "> </td> \ n ';
Str + = '<td Author = "alin" onmouseover = "this. className = \ 'menuover \ '"onmouseout =" this. className = \ '"onclick ="' + this. obj + '. getYearMenu ('+ (year + 10) +') ">></td> <tr> \ n ';
Str + = '</table> </td> </tr> \ n ';
Str + = '</table> ';
Var _ menu = getObjById ("cdrMenu ");
_ Menu. innerHTML = str;
};
Calendar. prototype. getMonthMenu = function ()
{
Var str = '<table Author = "alin" cellSpacing = "0" class = "cdrMenu" cellPadding = "0"> \ n ';
For (I = 1; I <= 12; I ++)
{
Var _ date = new Date (this. date. getFullYear (), I-1, this. date. getDate ());
Str + = '</tr> <tr Author = "alin" align = "center"> <td Author = "alin" height = "16 "';
If (this. date. getMonth () + 1! = I)
{
Str + = 'onmouseover = "this. className = \ 'menuover \ '" onmouseout = "this. className = \'\'"';
}
Else
{
Str + = 'class = "menuOver "';
}
Str + = 'onclick = "'+ this. obj + '. bindDate (\ ''+ _ date. toFormatString ("-") + '\') "> '+ I +' month </td> </tr> \ n ';
}
Str + = '</table> ';
Var _ menu = getObjById ("cdrMenu ");
_ Menu. innerHTML = str;
};
Calendar. prototype. show = function ()
{
If (arguments. length> 3 | arguments. length = 0)
{
Alert ("Sorry! The input parameter is incorrect! ");
Return;
}
Var _ date = null;
Var _ evObj = null;
Var _ initValue = null
For (I = 0; I <arguments. length; I ++)
{
If (typeof (arguments [I]) = "object" & arguments [I]. type = "text ")
{_ Date = arguments [I];}
Else if (typeof (arguments [I]) = "object ")
{_ EvObj = arguments [I];}
Else if (typeof (arguments [I]) = "string ")
{_ InitValue = arguments [I];}
}
_ EvObj = _ evObj | _ date;
InputObj = _ date;
TargetObj = _ evObj
If (! _ Date) {alert ("input parameter error! "); Return ;}
This. dateInput = _ date;
_ Date = _ date. value;
If (_ date = "" & _ initValue) _ date = _ initValue;
This. bindDate (_ date );
Var _ target = getPosition (_ evObj );
Var _ obj = getObjById ("Calendar ");
_ Obj. style. display = "";
_ Obj. style. left = _ target. x + 'px ';
If (document. body. clientHeight-(_ target. y + _ evObj. clientHeight)> = _ obj. clientHeight)
{
_ Obj. style. top = (_ target. y + _ evObj. clientHeight) + 'px ';
}
Else
{
_ Obj. style. top = (_ target. y-_ obj. clientHeight) + 'px ';
}
};
Calendar. prototype. hide = function ()
{
Var obj = getObjById ("Calendar ");
Obj. style. display = "none ";
};
Calendar. prototype. bindDate = function (date)
{
Var _ monthDays = new Array (, 30, 31, 31 );
Var _ arr = date. split ('-');
Var _ date = new Date (_ arr [0], _ arr [1]-1, _ arr [2]);
If (isNaN (_ date) _ date = new Date ();
This. date = _ date;
This. bindHeader ();
Var _ year = _ date. getFullYear ();
Var _ month = _ date. getMonth ();
Var _ day = 1;
Var _ startDay = new Date (_ year, _ month, 1). getDay ();
Var _ previYear = _ month = 0? _ Year-1: _ year;
Var _ previMonth = _ month = 0? 11: _ month-1;
Var _ previDay = _ monthDays [_ previMonth];
If (_ previMonth = 1) _ previDay = (_ previYear % 4 = 0) & (_ previYear0! = 0) | (_ previYear @ 0 = 0 ))? 29:28;
_ PreviDay-= _ startDay-1;
Var _ nextDay = 1;
_ MonthDays [1] = (_ year % 4 = 0) & (_ year0! = 0) | (_ year @ 0 = 0 ))? 29:28;
For (I = 0; I <40; I ++)
{
Var _ dayElement = getObjById ("cdrDay" + I );
_ DayElement. onmouseover = Function (this. Obj + ". onMouseOver (this )");
_ DayElement. onmouseout = Function (this. Obj + ". onMouseOut (this )");
_ DayElement. onclick = Function (this. Obj + ". onClick (this )");
This. onMouseOut (_ dayElement );
_ DayElement. style. color = "";
If (I <_ startDay)
{
// Obtain the date of the previous month
If (this. showMoreDay)
{
Var _ previDate = new Date (_ year, _ month-1, _ previDay );
_ DayElement. innerHTML = _ previDay;
_ DayElement. title = _ previDate. toFormatString ("mm dd, yyyy ");
_ DayElement. value = _ previDate. toFormatString ("-");
_ DayElement. style. color = this. style. moreDayColor;
_ PreviDay ++;
} Else
{
_ DayElement. innerHTML = "";
_ DayElement. title = "";
}
}
Else if (_ day> _ monthDays [_ month])
{
// Obtain the date of the next month
If (this. showMoreDay)
{
Var _ nextDate = new Date (_ year, _ month + 1, _ nextDay );
_ DayElement. innerHTML = _ nextDay;
_ DayElement. title = _ nextDate. toFormatString ("mm dd, yyyy ");
_ DayElement. value = _ nextDate. toFormatString ("-");
_ DayElement. style. color = this. style. moreDayColor;
_ NextDay ++;
} Else
{
_ DayElement. innerHTML = "";
_ DayElement. title = "";
}
}
Else if (I> = new Date (_ year, _ month, 1). getDay () & _ day <= _ monthDays [_ month])
{
// Obtain the date of this month
_ DayElement. innerHTML = _ day;
If (_ day = _ date. getDate ())
{
This. onMouseOver (_ dayElement );
_ DayElement. onmouseover = Function ("");
_ DayElement. onmouseout = Function ("");
}
If (this. isHoliday (_ year, _ month, _ day ))
{
_ DayElement. style. color = this. style. bodyHolidayFontColor;
}
Var _ curDate = new Date (_ year, _ month, _ day );
_ DayElement. title = _ curDate. toFormatString ("mm dd, yyyy ");
_ DayElement. value = _ curDate. toFormatString ("-");
_ Day ++;
}
Else
{
_ DayElement. innerHTML = "";
_ DayElement. title = "";
}
}
Var _ menu = getObjById ("cdrMenu ");
_ Menu. style. display = "none ";
};
Calendar. prototype. bindHeader = function ()
{
Var _ curYear = getObjById ("currentYear ");
Var _ curMonth = getObjById ("currentMonth ");
Var _ watermark = getObjById ("cdrWatermark ");
_ CurYear. innerHTML = this. date. toFormatString ("yyyy ");
_ CurMonth. innerHTML = this. date. toFormatString ("mm Month ");
_ Watermark. innerHTML = this. date. getFullYear ();
};
Calendar. prototype. getToday = function ()
{
Var _ date = new Date ();
This. bindDate (_ date. toFormatString ("-"));
};
Calendar. prototype. isHoliday = function (year, month, date)
{
Var _ date = new Date (year, month, date );
Return (_ date. getDay () = 6 | _ date. getDay () = 0 );
};
Calendar. prototype. onMouseOver = function (obj)
{
Obj. className = "dayOver ";
};
Calendar. prototype. onMouseOut = function (obj)
{
Obj. className = "dayOut ";
};
Calendar. prototype. onClick = function (obj)
{
If (obj. innerHTML! = "") This. dateInput. value = obj. value;
This. hide ();
};
Calendar. prototype. onChangeYear = function (isnext)
{
Var _ year = this. date. getFullYear ();
Var _ month = this. date. getMonth () + 1;
Var _ date = this. date. getDate ();
If (_ year> 999 & _ year <10000)
{
If (isnext) {_ year ++;} else {_ year --;}
}
Else
{
Alert ("year out of range (1000-9999 )! ");
}
This. bindDate (_ year + '-' + _ month + '-' + _ date );
};
Calendar. prototype. onChangeMonth = function (isnext)
{
Var _ year = this. date. getFullYear ();
Var _ month = this. date. getMonth () + 1;
Var _ date = this. date. getDate ();
If (isnext) {_ month ++;} else {_ month --;}
If (_ year> 999 & _ year <10000)
{
If (_ month <1) {_ month = 12; _ year --;}
If (_ month> 12) {_ month = 1; _ year ++ ;}
}
Else
{
Alert ("year out of range (1000-9999 )! ");
}
This. bindDate (_ year + '-' + _ month + '-' + _ date );
};
Calendar. prototype. showMenu = function (isyear)
{
Var _ menu = getObjById ("cdrMenu ");
If (isyear! = Null)
{
Var _ obj = (isyear )? GetObjById ("currentYear"): getObjById ("currentMonth ");
If (isyear)
{
This. getYearMenu (this. date. getFullYear ()-5 );
}
Else
{
This. getMonthMenu ();
}
_ Menu. style. top = (_ obj. offsetTop + _ obj. offsetHeight) + 'px ';
_ Menu. style. left = _ obj. offsetLeft + 'px ';
_ Menu. style. width = _ obj. offsetWidth + 'px ';
}
If (this. timer! = Null) clearTimeout (this. timer );
_ Menu. style. display = "";
}
Calendar. prototype. hideMenu = function ()
{
Var _ obj = getObjById ("cdrMenu ");
This. timer = window. setTimeout (function () {_ obj. style. display = 'none' ;}, 500 );
}
Number. prototype. NaN0 = function ()
{
Return isNaN (this )? 0: this;
}
Date. prototype. toFormatString = function (fs)
{
If (fs. length = 1)
{
Return this. getFullYear () + fs + (this. getMonth () + 1) + fs + this. getDate ();
}
Fs = fs. replace ("yyyy", this. getFullYear ());
Fs = fs. replace ("mm", (this. getMonth () + 1 ));
Fs = fs. replace ("dd", this. getDate ());
Return fs;
}
Var inputObj = null;
Var targetObj = null;
Var dragObj = null;
Var mouseOffset = null;
Function getObjById (obj)
{
If (document. getElementByIdx_x)
{
Return document. getElementByIdx_x (obj );
}
Else
{
Alert ("not supported by browsers! ");
}
}
Function mouseCoords (ev)
{
If (ev. pageX | ev. pageY ){
Return {x: ev. pageX, y: ev. pageY };
}
Return {
X: ev. clientX + document. body. scrollLeft-document. body. clientLeft,
Y: ev. clientY + document. body. scrollTop-document. body. clientTop
};
}
Function getPosition (e)
{
Var left = 0;
Var top = 0;
While (e. offsetParent ){
Left + = e. offsetLeft + (e. currentStyle? (ParseInt (e. currentStyle. borderLeftWidth). NaN0 (): 0 );
Top + = e. offsetTop + (e. currentStyle? (ParseInt (e. currentStyle. borderTopWidth). NaN0 (): 0 );
E = e. offsetParent;
}
Left + = e. offsetLeft + (e. currentStyle? (ParseInt (e. currentStyle. borderLeftWidth). NaN0 (): 0 );
Top + = e. offsetTop + (e. currentStyle? (ParseInt (e. currentStyle. borderTopWidth). NaN0 (): 0 );
Return {x: left, y: top };
}
Function getMouseOffset (target, ev)
{
Ev = ev | window. event;
Var docPos = getPosition (target );
Var mousePos = mouseCoords (ev );
Return {x: mousePos. x-docPos. x, y: mousePos. y-docPos. y };
}
Function closeCalendar (evt ){
Evt = evt | window. event;
Var _ target = evt.tar get | evt. srcElement;
If (! _ Target. getAttribute ("Author") & _ target! = InputObj & _ target! = TargetObj)
{
GetObjById ("Calendar"). style. display = "none ";
}
}
Function dragStart (evt ){
Evt = evt | window. event;
Var _ target = evt.tar get | evt. srcElement;
If (_ target. getAttribute ("Author") = "alin_bar ")
{
DragObj = getObjById ("Calendar ");
MouseOffset = getMouseOffset (dragObj, evt );
}
}
Function drag (evt)
{
Evt = evt | window. event;
If (dragObj)
{
Var mousePos = mouseCoords (evt );
DragObj. style. left = (mousePos. x-mouseOffset. x) + 'px ';
DragObj. style. top = (mousePos. y-mouseOffset. y) + 'px ';
}
}
// Drag to end
Function dragEnd (evt)
{
DragObj = null;
}
Document. onclick = closeCalendar;
Document. onmousedown = dragStart;
Document. onmousemove = drag;
Document. onmouseup = dragEnd;

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.