The calendar reminder plug-in (created in pure javascript + css, without any additives) has simplified code and data can be read from the database. Function introduction:
1. Normal calendar functions.
2. etc.
3. Receive Array
For example:
The Code is as follows:
New Calendar ("id"). show (
{
"20091120": "What have you done today... ",
"2009320": "What have you done today... "
}
);
There are three types of calendar reminder styles.
A. Today
B. the prompt style for the current month
C. The prompt style for the current month
The mouse overwrites the prompt content on the specified date.
4 ......
It is mainly divided into two types of use.
1. Provide
POr other
Element
IdTo the Calendar. Method Name:
Show ()
For example, var cr = Calendar ("p1 ");
Cr. show (/* data-this array is optional. If it is passed, a prompt function */);
2. Provide
Input [type = 'text']The
IdPass
Calendar. Method Name:
Pop ()
For example, var cr = Calendar ("input2 ");
Cr. pop ();
I will not talk about anything else. If you think it is better, you can support it. Haha.
Please let me know if you have any questions or good ideas. Thank you.
Detailed usage and examples are provided in the compressed package.
Demo address
Http://img.jb51.net/online/calendar/demo-1.html
Http://img.jb51.net/online/calendar/demo-2.html
Packaging http://www.jb51.net/codes/12595.html
The Code is as follows:
/*
* Calendar
* Language 0: Chinese, 1: English
* 1.Put calendar into the element html use 'show ()'
* 2. Pop-up calendar use 'pop ()'
*/
Var Calendar = function (instanceId, language, startYear, endYear ){
If (typeof instanceId = "string "){
This. Date = new Date ();
This. Year = this. Date. getFullYear ();
This. Month = this. Date. getMonth ();
This. Week = this. Date. getDay ();
This. Today = this. Date. getDate ();
This. InstanceId = instanceId;
This. Language = language | 1;
This. StartYear = startYear | this. Year-5;
This. EndYear = endYear | this. Year + 1;
// If instance is input [type = 'text'] object
This. popContainer_id = 'popcalendarcontainer ';
// Message store
This. msgStore = [];
This. caleContainer_id = 'calendarcontainer ';
This. caleTop = {
Today_view_id: 'calendartodayview ',
Week_view_id: 'calendarweekview ',
Lq_year_id: 'linkquickyear ',
Lq_month_id: 'linkquickmonth ',
Sq_year_id: 'selectquickyear ',
Sq_month_id: 'selectquickmonth ',
Close_id: 'calendarclose ',
Prev_month_id: 'toprevmonth ',
Back_today_id: 'backday ',
Next_month_id: 'tonextmonth'
}
This. daysContainer_id = 'calendardayscontainer ';
This. msgContainer_id = 'calendartipscontainer ';
This. curDayClass = 'calendarcurrentday ';
This. tipDayClass = 'calendartipday ';
This. oldTipDayClass = 'calendaroldtipday ';
}
};
/* Calendar language */
Calendar. lang = {
Weeks :[
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
],
WeeksMenu :[
["," 1 "," 2 "," 3 "," 4 "," 5 "," 6 "],
["SUN", "MON", "TUR", "WED", "THU", "FRI", "SAT"]
]
};
/* Create calendar element */
Calendar. prototype. _ getViewElement = function (){
// Create page html element
Var caleElem = "";
// Create Start
CaleElem + ='
';
//
CaleElem + ='
';// Top day viewCaleElem + ='
| ';// Link or select controlCaleElem + ='
';
CaleElem + ='';
CaleElem + ='
';CaleElem + ='
';CaleElem + ='
';
CaleElem + = '';
CaleElem + ='';
CaleElem + =' | ';CaleElem + ='
. | ';CaleElem + ='
';
CaleElem + = '';
CaleElem + ='';
CaleElem + =' | ';CaleElem + ='
';CaleElem + ='
';
CaleElem + =' | ';// Quick controlCaleElem + ='
';
CaleElem + ='';
CaleElem + = 'X ';
CaleElem + =' ';
CaleElem + ='';
CaleElem + = '«';
CaleElem + = '';
CaleElem + = '»';
CaleElem + =' ';
CaleElem + =' | ';CaleElem + ='
';
//
//
CaleElem + ='
';
// Week menu
CaleElem + ='
';
For (var I = 0; I <7; I ++ ){
CaleElem + = ''+ Calendar. lang [" weeksMenu "] [this. Language] [I] + '';
}
CaleElem + ='
';
// Days view
CaleElem + ='
';For (var tr = 0; tr <6; tr ++ ){CaleElem + ='
';For (var td = 0; td <7; td ++ ){CaleElem + ='
| ';}CaleElem + ='
';}CaleElem + ='
';
CaleElem + ='
';
//
CaleElem + ='
';
//
CaleElem + ='
';
//
// Create End
Return caleElem;
};
/* Get Month Data */
Calendar. prototype. _ getMonthViewArray = function (year, month ){
Var monthArray = [];
// From the beginning day of the week
Var beginDayOfWeek = new Date (year, month, 1). getDay ();
// This month total days
Var daysOfMonth = new Date (year, month + 1, 0). getDate ();
// 42: 7*6 matrix
For (var I = 0; I <42; I ++)
MonthArray [I] = "";
For (var j = 0; j <daysOfMonth; j ++)
MonthArray [j + beginDayOfWeek] = j + 1;
Return monthArray;
};
/* Search the index of option in the select */
Calendar. prototype. _ getOptionIndex = function (selectObject, value ){
For (var j = 0; j <selectObject. options. length; j ++ ){
If (value = selectObject. options [j]. value)
Return j;
}
};
/* Bind year data into 'year select '*/
Calendar. prototype. _ bindyear1_select = function (){
Var oYear = this. find (this. caleTop. sq_year_id );
Var oYearLen = 0;
For (var I = this. StartYear; I <= this. EndYear; I ++, oYearLen ++)
OYear. options [oYearLen] = new Option (I, I );
};
/* Bind Month data into 'month select '*/
Calendar. prototype. _ bindmonth1_select = function (){
Var oMonth = this. find (this. caleTop. sq_month_id );
Var oMonthLen = 0;
For (var I = 0; I <12; I ++, oMonthLen ++)
OMonth. options [oMonthLen] = new Option (I + 1, I + 1 );
};
/* Bind data */
Calendar. prototype. _ bindAllData = function (curYear, curMonth ){
Var cr = this;
// Bind default Data into 'select: year'
This. _ bindyear1_select ();
// Bind default Data into 'select: month'
This. _ bindmonth1_select ();
// Change the 'select: Year' and 'select: month' value
This. changeSelectValue (curYear, curMonth );
// Bind default data into 'current day view and current week view'
This. find (this. caleTop. week_view_id). innerHTML = Calendar. lang ['dones'] [this. Language] [this. Week];
This. find (this. caleTop. today_view_id). innerHTML = this. Today;
// Get days and bind into 'calendarmain'
// Add current day class and mouse event
Var daysOfMonthArray = this. _ getMonthViewArray (curYear, curMonth );
Var spans = this. find (this. daysContainer_id, "span ");
Var curYMD = this. Year + "+ (this. Month + 1) +" + this. Today;
Var selectYear = this. find (this. caleTop. sq_year_id). value;
Var selectMonth = this. find (this. caleTop. sq_month_id). value;
For (var I = 0; I <spans. length; I ++ ){
Spans [I]. innerHTML = daysOfMonthArray [I];
Var selectYMD = selectYear + "" + selectMonth + "" + spans [I]. innerHTML;
If (curYMD = selectYMD)
Spans [I]. className = this. curDayClass;
Else
Spans [I]. className = "";
}
// If not some days has pop message
If (this. msgStore! = "")
This. _ initPopMsg (this. msgStore );
}
/* Bind event */
Calendar. prototype. _ bindAllEvent = function (){
Var cr = this;
// 'Toprevmonth, toNextMonth, backToday, today view' event
This. find (this. caleTop. prev_month_id). onclick = function () {cr. goPrevOrNextMonth (this );};
This. find (this. caleTop. next_month_id). onclick = function () {cr. goPrevOrNextMonth (this );};
This. find (this. caleTop. back_today_id). onclick = function () {cr. backToday ();};
This. find (this. caleTop. today_view_id). onclick = function () {cr. backToday ();};
// 'Year and month select 'onchange event
This. find (this. caleTop. sq_year_id). onchange = function () {cr. updateSelect ();};
This. find (this. caleTop. sq_month_id). onchange = function () {cr. updateSelect ();};
// Quick link event
This. find (this. caleTop. lq_year_id). onclick = function (){
Cr. showHide (cr. caleTop. lq_year_id, "none ");
Cr. showHide (cr. caleTop. sq_year_id, "block ");
};
This. find (this. caleTop. lq_month_id). onclick = function (){
Cr. showHide (cr. caleTop. lq_month_id, "none ");
Cr. showHide (cr. caleTop. sq_month_id, "block ");
};
// Remove the link dotted line
Var oLink = this. find (this. caleContainer_id, "")
For (var I = 0; I <oLink. length; I ++ ){
OLink [I]. onfocus = function () {this. blur ();}
}
}
/* Bind calendar for calendar view */
Calendar. prototype. _ initCalendar = function (){
This. _ bindAllEvent ();
This. _ bindAllData (this. Year, this. Month );
};
/* Change the quick select value */
Calendar. prototype. changeSelectValue = function (year, month ){
Var ymArray = [], selectArray = [], linkArray = [];
// Store the 'Year' and 'month' to Array
YmArray [0] = year; ymArray [1] = month + 1;
// Store the 'selectyear _ id' and 'selectmonth _ id' to Array
SelectArray [0] = this. caleTop. sq_year_id; selectArray [1] = this. caleTop. sq_month_id;
LinkArray [0] = this. caleTop. lq_year_id; linkArray [1] = this. caleTop. lq_month_id;
For (var I = 0; I <selectArray. length; I ++ ){
Var selectObject = this. find (selectArray [I]);
// Get the return index
Var index = this. _ getOptionIndex (selectObject, ymArray [I]);
// Reset the 'Year', 'month' select and link value
SelectObject. options [index]. selected = "selected ";
This. find (linkArray [I]). innerHTML = selectObject. value;
}
This. resetLinkSelect ();
};
/* Search next or previons month */
Calendar. prototype. goPrevOrNextMonth = function (obj ){
Var curMonthSelect = this. find (this. caleTop. sq_month_id );
Var curMonth = parseInt (curMonthSelect. value );
Var curYear = this. find (this. caleTop. sq_year_id). value;
// If 'Next' get current month select + 1
// If 'prev' get current month select-1
If (obj. id = this. caleTop. next_month_id)
CurMonthSelect. value = curMonth + 1;
Else
CurMonthSelect. value = curMonth-1;
Var getNowMonth = curMonthSelect. value-1;
If (getNowMonth =-1 & curMonth = 1) getNowMonth = 0;
If (getNowMonth =-1 & curMonth = 12) getNowMonth = 11;
This. _ bindAllData (curYear, getNowMonth );
};
/* If 'select: Year' and 'select: month' change value update data */
Calendar. prototype. updateSelect = function (){
Var yearSelectValue = this. find (this. caleTop. sq_year_id). value;
Var monthSelectValue = this. find (this. caleTop. sq_month_id). value;
// Re-bind Panel Data
This. _ bindAllData (yearSelectValue, monthSelectValue-1 );
};
/* Back to taday: re-load '_ bindAllData ()'*/
Calendar. prototype. backToday = function (){
This. _ bindAllData (this. Year, this. Month );
};
/* Find the instance object or children of instance object by Id */
Calendar. prototype. find = function (elemId, childTag ){
If (! ChildTag)
// Return: object
Return document. getElementById (elemId );
Else
// Return: object array
Return this. find (elemId). getElementsByTagName (childTag );
};
/* Set element css */
Calendar.prototype.css = function (oId, selector ){
Var o = this. find (oId );
Selector ['left']? O. style. left = selector ['left']: "";
Selector ['top']? O. style. top = selector ['top']: "";
Selector ['position']? O. style. position = selector ['position']: "";
}
/* Check calendar show or hidden */
Calendar. prototype. showHide = function (objectId, dis ){
Return this. find (objectId). style. display = dis;
};
/* Init the top quick menu link and select */
Calendar. prototype. resetLinkSelect = function (){
This. showHide (this. caleTop. sq_year_id, "none ");
This. showHide (this. caleTop. sq_month_id, "none ");
This. showHide (this. caleTop. lq_year_id, "block ");
This. showHide (this. caleTop. lq_month_id, "block ");
};
/* Put this calendar into the html of instance */
Calendar. prototype. show = function (msgData ){
Var obj = this. find (this. InstanceId );
If (obj ){
Obj. innerHTML = this. _ getViewElement ();
// Init calendar event and data
This. _ initCalendar ();
// This function don't have 'close'
This. showHide (this. caleTop. close_id, "none ");
If (typeof msgData = 'object '){
This. msgStore = msgData;
This. _ initPopMsg (this. msgStore );
}
}
};
/* Init pop message */
Calendar. prototype. _ initPopMsg = function (){
Var cr = this;
Var selectYear = this. find (this. caleTop. sq_year_id). value;
Var selectMonth = this. find (this. caleTop. sq_month_id). value;
Var daysOfMonthArray = this. _ getMonthViewArray (selectYear, selectMonth );
Var spans = this. find (this. daysContainer_id, "span ");
For (var key in this. msgStore ){
Var keyMD = key. substring (4 );
Var keyY = key. substring (0, 4 );
For (var I = 0; I <spans. length; I ++ ){
Var getMD = selectMonth + "" + spans [I]. innerHTML;
If (getMD = keyMD ){
If (selectYear = keyY)
Spans [I]. className = this. tipDayClass + "" + keyY;
Else
Spans [I]. className = this. oldTipDayClass + "" + keyY;
Spans [I]. onmouseover = function (){
Var hoverDate = this. className. split ("") [1] + "" + selectMonth + "" + this. innerHTML;
Var y = this. className. split ("") [1],
M = selectMonth,
D = this. innerHTML;
Cr. find (cr. msgContainer_id). innerHTML = cr. _ getMsgHtml (y, m, d );
Cr. showHide (cr. msgContainer_id, "block ");
}
}
}
}
Cr. find (cr. caleContainer_id). onmouseout = function (){
Cr. showHide (cr. msgContainer_id, "none ");
}
};
/* Get message */
Calendar. prototype. _ getMsgHtml = function (y, m, d ){
Var date = y + m + d;
Var showDate = y + "-" + m + "-" + d;
Var msgHtml ='
'+ ShowDate + ':
'+ This. msgStore [date] +'
';
Return msgHtml;
}
/* Pop-up the calendar */
Calendar. prototype. pop = function (){
Var cr = this;
Var obj = this. find (this. InstanceId );
If (obj ){
// Instance object click then pop-up the calendar
Obj. onclick = function (e ){
Var e = window. event | e;
Var x = e. x | e. pageX,
Y = e. y | e. pageY;
If (! Cr. find (cr. popContainer_id )){
// Create the pop-up p
Var oDiv = document. createElement ("p ");
ODiv. id = cr. popContainer_id;
Document. body. appendChild (oDiv );
} Else {
Cr. showHide (cr. popContainer_id, "block ");
}
Cr. find (cr. popContainer_id). innerHTML = cr. _ getViewElement ();
// Init calendar event and data
Cr. _ initCalendar ();
// Set days click event
Cr. popDaysClickEvent (obj );
// Set position
Cr.css (cr. popContainer_id, {position: "absolute", left: x + "px", top: y + "px "});
// Close panel event
Cr. find (cr. caleTop. close_id). onclick = function () {cr. showHide (cr. popContainer_id, "none ");};
};
}
};
/* Click the pop calendar days event [For INPUT] */
Calendar. prototype. popDaysClickEvent = function (obj ){
Var cr = this;
Var spans = cr. find (cr. daysContainer_id, "span ");
For (var I = 0; I <spans. length; I ++)
Spans [I]. onclick = function (){
If (this. innerHTML! = ""){
Var getYear = cr. find (cr. caleTop. sq_year_id). value;
Var getMonth = cr. find (cr. caleTop. sq_month_id). value;
Obj. value = getYear + "-" + getMonth + "-" + this. innerHTML;
Cr. showHide (cr. popContainer_id, "none ");
}
}
};
