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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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操作Memcache实例介绍
2013/06/14 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
python中使用print输出中文的方法
2018/07/16 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
浅谈python3中input输入的使用
2019/08/02 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
python实现126邮箱发送邮件
2020/05/20 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
测试工程师岗位职责
2013/11/28 职场文书
四年级下册教学反思
2014/02/01 职场文书
母亲节感恩寄语
2014/02/21 职场文书
员工安全生产承诺书
2014/05/22 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书