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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
将查询条件的input、select清空
Jan 14 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
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
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
PHP排序算法类实例
2015/06/17 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
限制复选框的最大可选数
2006/07/01 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
学年自我鉴定
2014/01/16 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
运动会入场词60字
2014/02/15 职场文书
关于爱国的标语
2014/06/24 职场文书
师范生小学见习总结
2015/06/23 职场文书
国际贸易实训总结
2015/08/03 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS