JS写的Calendar日历控件

本文档详细介绍了使用JavaScript编写的wpCalendar日历控件,该控件可自定义显示样式,支持拖动,有多种主题,并且能够响应用户交互,如点击、拖动等。通过wpCalendar对象的redraw方法重绘日历,实现不同日期样式的设置,包括当前日期、选中日期等。此外,还提供了不同浏览器间事件处理的兼容性方案。
摘要由CSDN通过智能技术生成

<!--
//----------------------------------------------------------------------------
//  主调用函数是 wpCalendar(this,[object])wpCalendar(this),[object]是控件输出的控件名,举两个例子:
//  一、<input name=txt><input type=button value="Show Calendar" οnclick="showCalendar(this,document.all.txt)">
//  二、<input οnfοcus="showCalendar(this)">
//  本日历的年份限制是(1000 - 9999)
//  按ESC键关闭该控件
//  在年和月的显示地方点击时会分别出年与月的下拉框
//  控件外任意点击一点即可关闭该控件


document.writeln('<iframe id=wpCalendarLayer name=wpCalendarLayer frameborder=0 οnmοuseοut="wpCalendar.correctPosition()" style="position: absolute; width: 153; height: 208; z-index: 9998; display: none"></iframe>');

var wpConsts = new function(){
 this._isIE = (navigator.userAgent.indexOf("MSIE")>0);
 this.MouseButton = this._isIE?{
  LEFTBUTTON : 1,
  RIGHTBUTTON : 0,
  MIDDLEBUTTON: 4
 }:
 {
  LEFTBUTTON : 0,
  RIGHTBUTTON : 2,
  MIDDLEBUTTON: 1
 };
};

var wpEvents = new function(){
 var self = this;
    this.arrEvents = [];
 this.addListener = function(obj, eventName, oCallback){
     var ret;
  if(wpConsts._isIE){
   ret = obj.attachEvent("on" + eventName, oCallback);
  }
  else{
   ret = obj.addEventListener(eventName, oCallback, false);
  }
  if(ret)this.arrEvents.push({"obj":obj, "eventName": eventName, "oCallback":oCallback});
  return ret;
 };
 
 this.clearListener = function(obj, eventName){
     for(var i=0;i<this.arrEvents.length;i++){
         if(this.arrEvents[i].obj == obj && this.arrEvents[i].eventName == eventName){
             this.removeListener(obj, eventName, this.arrEvents[i].oCallback);
         }
     }
 };
 
 this.removeListener = function(obj, eventName, oCallback){
     if(wpConsts._isIE){
   obj.detachEvent("on" + eventName, oCallback);
  }
  else{
   obj.removeEventListener(eventName, oCallback, true);
  }
 };

 this.initWinEvents = function(oWin){
  if(!oWin)return;
  __firefox(oWin);
 };

 /*使得firefox兼容IE的event*/
 function __firefox(oWin){
  if(!oWin)oWin = window;
  HTMLElement.prototype.__defineGetter__("runtimeStyle", self.__element_style);
  oWin.constructor.prototype.__defineGetter__("event", function(){return self.__window_event(oWin);});
  Event.prototype.__defineGetter__("srcElement", self.__event_srcElement);
 }
 this.__element_style = function(){
  return this.style;
 }
 this.__window_event = function(oWin){
  return __window_event_constructor();
 }
 this.__event_srcElement = function(){
  return this.target;
 }
 function __window_event_constructor(oWin){
  if(!oWin)oWin = window;
  if(document.all){
   return oWin.event;
  }
  var _caller = __window_event_constructor.caller;
  while(_caller!=null){
   var _argument = _caller.arguments[0];
   if(_argument){
    var _temp = _argument.constructor;
    if(_temp.toString().indexOf("Event")!=-1){
     return _argument;
    }
   }
   _caller = _caller.caller;
  }
  return null;
 }
 if(window.addEventListener){
  __firefox();
 }
 /*end firefox*/
};


function wpCalendar(){
 //==================================================== 参数设定部分 =======================================================
 this.bmoveable = true;   //设置日历是否可以拖动
 this.datestyle = "yyyy-M-d";  //added in Ver 2.1
 this.cellwidth = 21;   //设置单个单元格的宽度
 this.cellheight = 20;   //设置单元格的高度
 this.versioninfo= "wpCanlendar Version:2.59&#13;作者:WalkingPoison"; //版本信息
 this.tgtObject = null;
 this.srcButton = null;  //点击的按钮
 this.outerDate = "";  //存放对象的日期
 this.oCalendar = window.frames.wpCalendarLayer.document;   //存放日历对象
 this.Style  = document.getElementById("wpCalendarLayer").style; //存放日历层的style
 this.MonthinMM = this.datestyle.indexOf("MM")>=0?true:false;  //added in Ver 2.1
 this.Dateindd = this.datestyle.indexOf("dd")>=0?true:false;
 this.themename = "Classic";      //主题设置,决定日历的外观
 this.theme  = null;      //根据主题设置得到对应的主题,在redraw函数中根据themename自动设置
 this.ScrollYearOnClick = false;   //设置年的下拉选择框内的年份是通过点击还是mouseover来滚动

 try{this.IE6 = (parseFloat(window.navigator.appVersion.match(/MSIE (/d+/./d+)/)[1])>=5.5)}
 catch(e){this.IE6 = false}
 this.testspeed = false;     //测试机器速度,以便自动决定是否使用Filter。如果设置为true,则下面的playfilter参数设置无效。
 this.testtimeout= 120;      //测试标准,单位是毫秒,小于这个数值的就认为机器速度足够快
 this.playfilter = this.IE6;     //设置是否使用Filter

 this.year  = new Date().getFullYear(); //定义年的变量的初始值
 this.month  = new Date().getMonth()+1; //定义月的变量的初始值
 this.date  = new Date().getDate();  //定义日的变量的初始值
 this.Days  = new Array(39);   //定义写日期的数组
 this.DateCell = new Array(39);   //存放日期单元格
 
 this.followcodes= "";      //存放执行完点击日历以后需要执行的操作代码

 this.tmpTdClass = "";
 this.redraw  = function (){    //定义redraw方法,用于重绘整个日历
  //==================================================== WEB 页面显示部分 =====================================================
  if(this.cellwidth<21)this.cellwidth=21;
  if(this.cellheight<20)this.cellheight=20;
  this.theme = typeof theme[this.themename] == "object"? theme[this.themename] : theme["Classic"];
  var strFrame;  //存放日历层的HTML代码
  strFrame='<style>';
  with(this.theme){
   strFrame+='BODY{font-family:'+fontFamily+';}';
   strFrame+='INPUT{color:'+buttonFontColor+';border-right:'+buttonBorderColor+' 1px solid;border-top:'+buttonBorderColor+' 1px solid;border-left:'+buttonBorderColor+' 1px solid;';
   strFrame+='border-bottom:'+buttonBorderColor+' 1px solid;background-color:'+buttonColor+';font-family:'+fontFamily+';}';
   strFrame+='table.main{border:1px solid '+borderColor+';width:' + (this.getCalendarWidth()-2) + 'px;height:' + this.getMainHeight() + 'px;background-color:'+bgColorMain+';}';
   strFrame+='table.dragbar{border-top:1px solid '+dragBarColor+';border-left:1px solid '+dragBarColor+';border-right:1px solid '+dragBarColorDark+';border-bottom:1px solid '+dragBarColorDark+';}';
   strFrame+='table.head{background-color:'+headBgColor+';}';
   strFrame+='td.head{background-color:'+headBgColor+';}';
   strFrame+='span.year{z-index: 9999;position:absolute;top:3px;left:20px;border: 1px solid '+borderColor+'}';
   strFrame+='table.year{width:' + (this.getYearWidth()-4) + 'px;height:140px;background-color:'+bgColorMain+';cursor:default;}';
   strFrame+='span.month{z-index: 9999;position: absolute;top: 3px;left: ' + (this.getYearWidth() + 19) + 'px;border:'+borderColor+' 1px solid}';
   strFrame+='table.month{width:' + (this.getMonthWidth()-4) + 'px;height:168px;background-color:'+bgColorMain+';cursor:default;}';
   strFrame+='TD{font-size: 12px;}';
   strFrame+='a{color:' + normalDayFontColor + ';}';
   strFrame+='table.datecell{border-top:1px solid '+dragBarColor+';border-left:1px solid '+dragBarColor+';border-right:1px solid '+dragBarColorDark+';border-bottom:1px solid '+dragBarColorDark+';}';
   strFrame+='TD.calendarhead{color: '+headFontColor+'; background-color: '+headBgColor+';border:1px solid '+headBgColor+';}';
   strFrame+='TD.mouseoverYM{text-align:center;color: '+mouseOverFontColor+'; background-color: '+mouseOverColor+';}';
   strFrame+='td.normalYM{text-align:center;color:'+normalDayFontColor+';background-color:'+normalDayColor+';}';
   strFrame+='td.selectedYM{text-align:center;color:'+selectedDayFontColor+';background-color:'+selectedDayColor+';}';
   strFrame+='TD.dragbar{font-size:12px;color:'+dragBarFontColor+';width:21px;border-bottom:1px solid '+dragBarColor+';border-right:1px solid '+dragBarColor+';border-left:1px solid '+dragBarColorDark+';border-top:1px solid '+dragBarColorDark+';}';
   strFrame+='TD.mouseover{color: '+mouseOverFontColor+'; background-color: '+mouseOverColor+';border:1px solid '+borderColor+';}';
   strFrame+='TD.normalday,TD.grayday,TD.today,TD.graytoday{border-left:1px solid '+borderColorDark+';border-top:1px solid '+borderColorDark+';border-right:1px solid '+borderColor+';border-bottom:1px solid '+borderColor+';}';
   strFrame+='TD.selectedday,TD.selectedgrayday{border-left:1px solid '+borderColor+';border-top:1px solid '+borderColor+';border-right:1px solid '+borderColorDark+';border-bottom:1px solid '+borderColorDark+';}';
   strFrame+='TD.normalday{color:'+normalDayFontColor+';background-color:'+normalDayColor+';}';
   strFrame+='TD.grayday{color:'+grayDayFontColor+';background-color:'+grayDayColor+';}';
   strFrame+='TD.today{color:'+todayFontColor+';background-color:'+todayColor+';}';
   strFrame+='TD.selectedday{color:'+selectedDayFontColor+';background-color:'+selectedDayColor+';}';
   strF

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值