Javascript calendar reminder system (compatible with all browsers) _ time and date

Source: Internet
Author: User
Tags time and date
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 + =' ';// Quick controlCaleElem + =' ';CaleElem + ='
';
CaleElem + ='

';
CaleElem + ='





';CaleElem + =' ';CaleElem + =' ';CaleElem + =' ';CaleElem + =' ';CaleElem + =' ';CaleElem + ='
';
CaleElem + = '';
CaleElem + ='';
CaleElem + ='
.';
CaleElem + = '';
CaleElem + ='';
CaleElem + ='
';
CaleElem + ='
';
CaleElem + ='

';
CaleElem + = 'X ';
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 ");
}
}
};

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.