javascript 日历提醒系统( 兼容所有浏览器 )_时间日期
功能介绍:
1.正常的日历功能。
2.等等等
3.接收 数组
例如:
new Calendar("id").show(
{
"20091120": "今天干了嘛嘛。。。",
"2009320": "今天干了嘛嘛。。。"
}
);
日历提示样式分为3类。
a. 当日
b.当年当月当日提示样式
c.当月当日提示样式
鼠标覆盖在有提示的日期上自动出现提示内容
4.。。。。。
主要分为2种用处。
1.提供一个 div 或其他 element 将该容器的 id 传给 Calendar。方法名为: show()
例: var cr = Calendar("div1");
cr.show( /*data - 该数组为可选项,如果传则有提示功能*/ );
2.提供一个 input[type='text'] 的元素 将该元素的 id 传给 Calendar。方法名为: pop()
例: var cr = Calendar("input2");
cr.pop();
其他的就不多说了。觉得好的话,就支持下。呵呵。
有什么问题或好的想法,请告诉我。谢谢
详细的用法和例子在压缩包里有。
演示地址
http://img.jb51.net/online/calendar/demo-1.html
http://img.jb51.net/online/calendar/demo-2.html
打包下载地址 http://www.jb51.net/codes/12595.html
/*
* 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: 'backToday',
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"]
],
weeksMenu:[
["日","一","二","三","四","五","六"],
["SUN","MON","TUR","WED","THU","FRI","SAT"]
]
};
/* Create calendar element */
Calendar.prototype._getViewElement = function(){
// Create page html element
var caleElem = "";
// Create Start
caleElem+= '
//
caleElem+= '
//
//
caleElem+= '
// Week menu
caleElem+= '
for(var i = 0; i caleElem+= ''+Calendar.lang["weeksMenu"][this.Language][i]+'';
}
caleElem+= '
// Days view
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 monthArray[i] = " ";
for( var j = 0; 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 if( value == selectObject.options[j].value )
return j;
}
};
/* Bind year data into 'Year select' */
Calendar.prototype._bindYearIntoSelect = function(){
var oYear = this.find( this.caleTop.sq_year_id );
var oYearLen = 0;
for( var i = this.StartYear; i oYear.options[oYearLen] = new Option( i , i );
};
/* Bind Month data into 'Month select' */
Calendar.prototype._bindMonthIntoSelect = function(){
var oMonth = this.find( this.caleTop.sq_month_id );
var oMonthLen = 0;
for( var i = 0; i 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._bindYearIntoSelect();
// Bind default Data into 'select:Month'
this._bindMonthIntoSelect();
// 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['weeks'][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[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, "a" )
for( var i = 0; 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 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 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 = '
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 div
var oDiv = document.createElement("div");
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[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" );
}
}
};

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

JavaScript是一種廣泛應用於Web開發的程式語言,而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能,我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統,並提供具體的程式碼範例。首先,我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備,可以擷取即時的影像數
