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 25 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
原生JS实现层叠轮播图
May 17 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
ES6的异步终极解决方案分享
Jul 11 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
基于JS实现table导出Excel并保留样式
May 19 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
PHP 中文处理技巧
2010/04/25 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
Python实例之wxpython中Frame使用方法
2014/06/09 Python
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
python 求10个数的平均数实例
2019/12/16 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
如何理解Python中的变量
2020/06/01 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
教师学习培训邀请函
2014/02/04 职场文书
上课看小说检讨书
2014/02/22 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
工作证明格式及范本
2014/09/12 职场文书
班主任自我评价范文
2015/03/11 职场文书
改进工作作风心得体会
2016/01/23 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python