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 相关文章推荐
使用bootstrap3开发响应式网站
May 12 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 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 读取文件的正确方法
2009/04/29 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
深入理解python中的atexit模块
2017/03/07 Python
Python数据结构之单链表详解
2017/09/12 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Python实现结构体代码实例
2020/02/10 Python
python中JWT用户认证的实现
2020/05/18 Python
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
幼儿园教学管理制度
2014/02/04 职场文书
大学生作弊检讨书
2014/02/19 职场文书
反腐倡廉观后感
2015/06/08 职场文书
幼儿园见习总结
2015/06/23 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL