javascript 日历提醒系统( 兼容所有浏览器 )


Posted in Javascript onApril 07, 2009

功能介绍:
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.3water.com/online/calendar/demo-1.html
http://img.3water.com/online/calendar/demo-2.html
打包下载地址 https://3water.com/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+= '<div id='+this.caleContainer_id+'>'; 
        // <Top> 
        caleElem+= '<div id="calendarTopContainer"><table cellpadding="0" cellspacing="0"><tr>'; 
        // Top day view 
        caleElem+= '<td id='+this.caleTop.today_view_id+'></td>'; 
        // Link or select control 
        caleElem+= '<td>'; 
        caleElem+= '<div id='+this.caleTop.week_view_id+'></div>'; 
        caleElem+= '<table id="calendarYearMonthContainer" cellpadding="0" cellspacing="0">'; 
        caleElem+= '<tr>'; 
        caleElem+= '<td>'; 
        caleElem+= '<a id='+this.caleTop.lq_year_id+' href="javascript:void(0);"></a>'; 
        caleElem+= '<select id='+this.caleTop.sq_year_id+'></select>'; 
        caleElem+= '</td>'; 
        caleElem+= '<td>.</td>'; 
        caleElem+= '<td>'; 
        caleElem+= '<a id='+this.caleTop.lq_month_id+' href="javascript:void(0);"></a>'; 
        caleElem+= '<select id='+this.caleTop.sq_month_id+'></select>'; 
        caleElem+= '</td>'; 
        caleElem+= '</tr>'; 
        caleElem+= '</table>'; 
        caleElem+= '</td>'; 
        // Quick control 
        caleElem+= '<td>'; 
        caleElem+= '<div id="calendarCloseContainer">'; 
        caleElem+= '<a id='+this.caleTop.close_id+' href="javascript:void(0);">x</a>'; 
        caleElem+= '</div>'; 
        caleElem+= '<div id="calendarQuickContainer">'; 
        caleElem+= '<a id='+this.caleTop.prev_month_id+' href="javascript:void(0);">«</a>'; 
        caleElem+= '<a id='+this.caleTop.back_today_id+' href="javascript:void(0);"> </a>'; 
        caleElem+= '<a id='+this.caleTop.next_month_id+' href="javascript:void(0);">»</a>'; 
        caleElem+= '</div>'; 
        caleElem+= '</td>'; 
        caleElem+= '</tr></table cellpadding="0" cellspacing="0"></div>'; 
        // </Top> 
        // <Calendar View> 
        caleElem+= '<div id="calendarMainContainer">'; 
        // Week menu 
        caleElem+= '<div id="calendarWeeksContainer">'; 
        for(var i = 0; i < 7; i ++){ 
        caleElem+= '<span>'+Calendar.lang["weeksMenu"][this.Language][i]+'</span>'; 
        } 
        caleElem+= '</div>'; 
        // Days view 
        caleElem+= '<table id='+this.daysContainer_id+' cellpadding="0" cellspacing="0">'; 
        for(var tr = 0; tr < 6; tr ++){ 
        caleElem+= '<tr>'; 
        for(var td = 0; td < 7; td ++){ 
        caleElem+= '<td><span></span></td>'; 
        } 
        caleElem+= '</tr>'; 
        } 
        caleElem+= '</table>'; 
        caleElem+= '</div>'; 
        // </Calendar View> 
        caleElem+= '</div>'; 
        // <Calendar msg> 
        caleElem+= '<div id='+this.msgContainer_id+'></div>'; 
        // </Calendar msg> 
        // 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._bindYearIntoSelect = 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._bindMonthIntoSelect = 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._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.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, "a" ) 
    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 = '<div>'+showDate+':</div><div>'+ this.msgStore[date] +'</div>'; 
    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.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" ); 
            } 
        } 
};
Javascript 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
JS获取时间的方法
Jan 21 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 #Javascript
javascript 兼容鼠标滚轮事件
Apr 07 #Javascript
javascript 有趣而诡异的数组
Apr 06 #Javascript
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 #Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 #Javascript
javascript 获取图片颜色
Apr 05 #Javascript
Mozilla 表达式 __noSuchMethod__
Apr 05 #Javascript
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
php文件系统处理方法小结
2016/05/23 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
js更优雅的兼容
2010/08/12 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
python实现udp数据报传输的方法
2014/09/26 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Python 面向对象部分知识点小结
2020/03/09 Python
数控技术应届生求职信
2013/11/13 职场文书
人事专员岗位职责
2013/11/20 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
酒桌上的开场白
2015/06/01 职场文书
焦裕禄观后感
2015/06/03 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
工作服管理制度范本
2015/08/06 职场文书
2016年国培研修日志
2015/11/13 职场文书