calendar.js(摘)

最新推荐文章于 2024-09-14 07:32:25 发布
最新推荐文章于 2024-09-14 07:32:25 发布
阅读量1k 收藏
点赞数
文章标签： calendar function border button null 日历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhjk_001/article/details/1770176
版权
//HowtoUse:  show(this,this.value)
//head里加入此文件引用type="text/javascript" src="js/calendar.js"
  var calendar=this;
  this.calendarPad=null;
  this.prevMonth=null;
  this.nextMonth=null;
  this.prevYear=null;
  this.nextYear=null;
  this.goToday=null;
  this.calendarClose=null;
  this.calendarAbout=null;
  this.head=null;
  this.body=null;
  this.today=[];
  this.currentDate=[];
  this.sltDate;
  this.target;
  this.source;

  /************** 加入日历底板及阴影 *********************/
  this.addCalendarPad=function(){
   document.write("<div id='divCalendarpad' style='position:absolute;top:100;left:0;width:255;height:167;display:none;'>");
   document.write("<iframe frameborder=0 height=168 width=255></iframe>");
   document.write("<div style='position:absolute;top:4;left:4;width:248;height:164;background-color:#336699;'></div>");
   document.write("</div>");
   calendar.calendarPad=document.all.divCalendarpad;
  }
  /************** 加入日历面板 *********************/
  this.addCalendarBoard=function(){
   var BOARD=this;
   var divBoard=document.createElement("div");
   calendar.calendarPad.insertAdjacentElement("beforeEnd",divBoard);
   divBoard.style.cssText="position:absolute;top:0;left:0;width:250;height:166;border:1 outset;background-color:buttonface;";

   var tbBoard=document.createElement("table");
   divBoard.insertAdjacentElement("beforeEnd",tbBoard);
   tbBoard.style.cssText="position:absolute;top:0;left:0;width:100%;height:10;font-size:9pt;";
   tbBoard.cellPadding=0;
   tbBoard.cellSpacing=1;
   tbBoard.bgColor="#333333";

  /************** 设置各功能按钮的功能 *********************/
   /*********** Calendar About Button ***************/
   trRow = tbBoard.insertRow(0);
   calendar.calendarAbout=calendar.insertTbCell(trRow,0,"-","center");
   calendar.calendarAbout.οnclick=function(){calendar.about();}
   /*********** Calendar Head ***************/
   tbCell=trRow.insertCell(1);
   tbCell.colSpan=5;
   tbCell.bgColor="#99CCFF";
   tbCell.align="center";
   tbCell.style.cssText = "cursor:default";
   calendar.head=tbCell;
   /*********** Calendar Close Button ***************/
   tbCell=trRow.insertCell(2);
   calendar.calendarClose = calendar.insertTbCell(trRow,2,"x","center");
   calendar.calendarClose.title="关闭";
   calendar.calendarClose.οnclick=function(){calendar.hide();}

   /*********** Calendar PrevYear Button ***************/
   trRow = tbBoard.insertRow(1);
   calendar.prevYear = calendar.insertTbCell(trRow,0,"&lt;&lt;","center");
   calendar.prevYear.title="上一年";
   calendar.prevYear.οnmοusedοwn=function(){
    calendar.currentDate[0]--;
    calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
   }
   /*********** Calendar PrevMonth Button ***************/
   calendar.prevMonth = calendar.insertTbCell(trRow,1,"&lt;","center");
   calendar.prevMonth.title="上一月";
   calendar.prevMonth.οnmοusedοwn=function(){

    calendar.currentDate[1]--;
    if(calendar.currentDate[1]==0){
     calendar.currentDate[1]=12;
     calendar.currentDate[0]--;
    }
    calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
   }
   /*********** Calendar Today Button ***************/
   calendar.goToday = calendar.insertTbCell(trRow,2,"今天","center",3);
   calendar.goToday.title="选择今天";
   calendar.goToday.οnclick=function(){
    calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2];
    calendar.target.value=calendar.sltDate;
    calendar.hide();
    //calendar.show(calendar.target,calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2],calendar.source);
   }
   /*********** Calendar NextMonth Button ***************/
   calendar.nextMonth = calendar.insertTbCell(trRow,3,"&gt;","center");
   calendar.nextMonth.title="下一";
   calendar.nextMonth.οnmοusedοwn=function(){
    calendar.currentDate[1]++;
    if(calendar.currentDate[1]==13){
     calendar.currentDate[1]=1;
     calendar.currentDate[0]++;
    }
    calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
   }
   /*********** Calendar NextYear Button ***************/
   calendar.nextYear = calendar.insertTbCell(trRow,4,"&gt;&gt;","center");
   calendar.nextYear.title="下一年";
   calendar.nextYear.οnmοusedοwn=function(){
    calendar.currentDate[0]++;
    calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);

   }

   trRow = tbBoard.insertRow(2);
   var cnDateName = new Array("周日","周一","周二","周三","周四","周五","周六");
   for (var i = 0; i < 7; i++) {
    tbCell=trRow.insertCell(i)
    tbCell.innerText=cnDateName[i];
    tbCell.align="center";
    tbCell.width=35;
    tbCell.style.cssText="cursor:default;border:1 solid #99CCCC;background-color:#99CCCC;";
   }

   /*********** Calendar Body ***************/
   trRow = tbBoard.insertRow(3);
   tbCell=trRow.insertCell(0);
   tbCell.colSpan=7;
   tbCell.height=97;
   tbCell.vAlign="top";
   tbCell.bgColor="#F0F0F0";
   var tbBody=document.createElement("table");
   tbCell.insertAdjacentElement("beforeEnd",tbBody);
   tbBody.style.cssText="position:relative;top:0;left:0;width:245;height:103;font-size:9pt;"
   tbBody.cellPadding=0;
   tbBody.cellSpacing=1;
   calendar.body=tbBody;
  }
  /************** 加入功能按钮公共样式 *********************/
  this.insertTbCell=function(trRow,cellIndex,TXT,trAlign,tbColSpan){
   var tbCell=trRow.insertCell(cellIndex);
   if(tbColSpan!=undefined) tbCell.colSpan=tbColSpan;

   var btnCell=document.createElement("button");
   tbCell.insertAdjacentElement("beforeEnd",btnCell);
   btnCell.value=TXT;
   btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;";
   btnCell.οnmοuseοver=function(){
    btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;";

   }
   btnCell.οnmοuseοut=function(){
    btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;";
   }
  // btnCell.οnmοusedοwn=function(){
  //  btnCell.style.cssText="width:100%;border:1 inset;background-color:#F0F0F0;";
  // }
   btnCell.οnmοuseup=function(){
    btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;";
   }
   btnCell.οnclick=function(){
    btnCell.blur();
   }
   return btnCell;
  }
  this.setDefaultDate=function(){
   var dftDate=new Date();
   calendar.today[0]=dftDate.getYear();
   calendar.today[1]=dftDate.getMonth()+1;
   calendar.today[2]=dftDate.getDate();
  }

  /****************** Show Calendar *********************/
  this.show=function(targetObject,defaultDate,sourceObject){
   if(targetObject==undefined) {
    alert("未设置目标对像. /n方法: ATCALENDAR.show(obj 目标对像,string 默认日期,obj 点击对像);/n/n目标对像:接受日期返回值的对像./n默认日期:格式为/"yyyy-mm-dd/",缺省为当日日期./n点击对像:点击这个对像弹出calendar,默认为目标对像./n");
    return false;
   }
   else    calendar.target=targetObject;
   if(sourceObject==undefined) calendar.source=calendar.target;
   else calendar.source=sourceObject;

   var firstDay;
   var Cells=new Array();

   if(defaultDate==undefined || defaultDate==""){
    var theDate=new Array();
    calendar.head.innerText = calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2];
    theDate[0]=calendar.today[0]; theDate[1]=calendar.today[1]; theDate[2]=calendar.today[2];
   }
   else{
   
    var theDate=defaultDate.split("-");
    calendar.head.innerText = defaultDate;
   }
   calendar.currentDate[0]=theDate[0];
   calendar.currentDate[1]=theDate[1];
   calendar.currentDate[2]=theDate[2];
   theFirstDay=calendar.getFirstDay(theDate[0],theDate[1]);
   theMonthLen=theFirstDay+calendar.getMonthLen(theDate[0],theDate[1]);
   //calendar.setEventKey();

   calendar.calendarPad.style.display="";
   var theRows = Math.ceil((theMonthLen)/7);
   //清除旧的日历;
   while (calendar.body.rows.length > 0) {
    calendar.body.deleteRow(0)
   }
   //建立新的日历;
   var n=0;day=0;
   for(i=0;i<theRows;i++){
    theRow=calendar.body.insertRow(i);
    for(j=0;j<7;j++){
     n++;
     if(n>theFirstDay && n<=theMonthLen){
      day=n-theFirstDay;
      calendar.insertBodyCell(theRow,j,day);
     }

     else{
      var theCell=theRow.insertCell(j);
      theCell.style.cssText="background-color:#F0F0F0;cursor:default;";
     }
    }
   }

   //****************调整日历位置**************//
   var offsetPos=calendar.getAbsolutePos(calendar.source);//计算对像的位置;
   if((document.body.offsetHeight-(offsetPos.y+calendar.source.offsetHeight-document.body.scrollTop))<calendar.calendarPad.style.pixelHeight){
    var calTop=offsetPos.y-calendar.calendarPad.style.pixelHeight;
   }
   else{
    var calTop=offsetPos.y+calendar.source.offsetHeight;
   }
   if((document.body.offsetWidth-(offsetPos.x+calendar.source.offsetWidth-document.body.scrollLeft))>calendar.calendarPad.style.pixelWidth){
    var calLeft=offsetPos.x;
   }
   else{
    var calLeft=calendar.source.offsetLeft+calendar.source.offsetWidth;
   }
   //alert(offsetPos.x);
   calendar.calendarPad.style.pixelLeft=calLeft;
   calendar.calendarPad.style.pixelTop=calTop;
  }
  /****************** 计算对像的位置 *************************/
  this.getAbsolutePos = function(el) {
   var r = { x: el.offsetLeft, y: el.offsetTop };
   if (el.offsetParent) {
    var tmp = calendar.getAbsolutePos(el.offsetParent);
    r.x += tmp.x;
    r.y += tmp.y;
   }
   return r;
  };

  //************* 插入日期单元格 **************/
  this.insertBodyCell=function(theRow,j,day,targetObject){
   var theCell=theRow.insertCell(j);
   if(j==0) var theBgColor="#FF9999";
   else var theBgColor="#FFFFFF";
   if(day==calendar.currentDate[2]) var theBgColor="#CCCCCC";
   if(day==calendar.today[2]) var theBgColor="#99FFCC";
   theCell.bgColor=theBgColor;
   theCell.innerText=day;
   theCell.align="center";
   theCell.width=35;
   theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";
   theCell.οnmοuseοver=function(){
    theCell.bgColor="#FFFFCC";
    theCell.style.cssText="border:1 outset;cursor:hand;";
   }
   theCell.οnmοuseοut=function(){
    theCell.bgColor=theBgColor;
    theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";
   }
   theCell.οnmοusedοwn=function(){
    theCell.bgColor="#FFFFCC";
    theCell.style.cssText="border:1 inset;cursor:hand;";
   }
   theCell.οnclick=function(){
    if(calendar.currentDate[1].length<2) calendar.currentDate[1]="0"+calendar.currentDate[1];
    if(day.toString().length<2) day="0"+day;
    calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+day;
    calendar.target.value=calendar.sltDate;
    calendar.hide();
   }
  }
  /************** 取得月份的第一天为星期几 *********************/
  this.getFirstDay=function(theYear, theMonth){
   var firstDate = new Date(theYear,theMonth-1,1);
   return firstDate.getDay();
  }
  /************** 取得月份共有几天 *********************/

  this.getMonthLen=function(theYear, theMonth) {
   theMonth--;
   var oneDay = 1000 * 60 * 60 * 24;
   var thisMonth = new Date(theYear, theMonth, 1);
   var nextMonth = new Date(theYear, theMonth + 1, 1);
   var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime())/oneDay);
   return len;
  }
  /************** 隐藏日历 *********************/
  this.hide=function(){
   //calendar.clearEventKey();
   calendar.calendarPad.style.display="none";
  }
  /************** 从这里开始 *********************/
  this.setup=function(defaultDate){
   calendar.addCalendarPad();
   calendar.addCalendarBoard();
   calendar.setDefaultDate();
  }
  /************** 关于AgetimeCalendar *********************/
  this.about=function(){
   /*//alert("Agetime Calendar V1.0/n/nwww.agetime.com/n");
   popLeft = calendar.calendarPad.style.pixelLeft+4;
   popTop = calendar.calendarPad.style.pixelTop+25;
   var popup = window.createPopup();
   var popupBody = popup.document.body;
   popupBody.style.cssText="border:solid 2 outset;font-size:9pt;background-color:#F0F0F0;";
   var popHtml = "<span style='color:#336699;font-size:12pt;'><U>关于 AgetimeCalendar</U></span><BR><BR>";
   popHtml+="版本: v1.0<BR>日期: 2004-03-13";
   popupBody.innerHTML=popHtml;
   popup.show(popLeft,popTop,240,136,document.body); */
   var strAbout = "About AgetimeCalendar/n/n";
   strAbout+="-/t: 关于/n";
   strAbout+="x/t: 隐藏/n";
   strAbout+="<</t: 上一年/n";
   strAbout+="</t: 上一月/n";

  strAbout+="今日/t: 返回当天日期/n";
   strAbout+=">/t: 下一月/n";
   strAbout+="<</t: 下一年/n";
   alert(strAbout);
  }  calendar.setup();

 
zhjk_001
关注
微信小程序日历的预订系统
ashcn2001的博客
08-28 1645
废话不多说,从晚上摘了一个日历,修改为可预订系统 ,现在记录一下备忘,我已经把这个日历系统定制为组件,以便以后方便调用. calendar文件夹下 的三个文件为 calendar.js // components/calendar/calendar.js Component({ /** * 组件的属性列表 */ properties: { workDayNum: { // 激活几个工作日 type: Number, value: 7
阿里最新Java面试题，摘选最具代表性49题，看了答案也不过如此
Java_supermanNO1的博客
10-16 4938
本文转载自：阿里最新Java面试题，摘选最具代表性49题，看了答案也不过如此 不想当将军的士兵不是好士兵，不想成为架构师的Java程序员不是好程序员！为什么要成为架构师，为什么要进大厂？ 那年十八 母校舞会 站着如喽啰 那时候 我含泪 发誓各位 必须看到我 1. 面向对象的特征有哪些方面? 答：面向对象的特征主要有以下几个方面： 抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括...
客户端日历控件
11-25
完美的客户端日历控件,无需刷新页面，使用非常方便。
js客户端日历控件
weixin_34124939的博客
12-06 124
有两个版本：无时间日期控件，带时间日期控件这是那个没时间的。calendar.js//HowtoUse:  show(this,this.value)//head里加入此文件引用type="text/javascript" src="js/calendar.js"  var calendar=this;  this.calendarPad=null;  this.prevMonth=null;  ...
Calendar.js 开源项目教程
最新发布
gitblog_00737的博客
09-14 834
Calendar.js 开源项目教程 calendar.js 一个简单实用的 JavaScript 日历控件！原生 JavaScript 编写，不依赖任何第三方库。支持日期、月份和年份试图切换；支持单选、多选、范围和星期选择模式；界面简介、配置简单、使用方便！ ...
ios客户端学习－日历控件
蚂蚁搬家
12-19 426
日历控件代码下载资料： http://code4app.com/category/calendar
calendar.js
10-21
这是一款非常好用的日期公农历转换，公农历节日查询，节气查询，天干地支查询等融为一体的js文件，作者是：https://github.com/jjonline/calendar.js【githup地址】。 文件中被我加入了公农历节日的查询功能。 使用时只需要require引入文件即可，如果不是node开发环境，也可以直接去修改这个文件的js代码，不用去暴露对象，改为正常引入使用的。 文件体积不大，但里面包含了非常多的函数，可根据需求去调用，js具体使用方法，可以参考我的博客文档：https://blog.csdn.net/s_y_w123/article/details/102662479
前端面试题
IT_Jiangxiaobai的博客
05-19 5207
01-HTML~02-CSS 1.每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？ 要点一 : 该标签告知浏览器浏览文档要使用的HTML规范 , 告知浏览器以何种规范解析页面 要点二 : 声明对大小写不敏感 2.常用浏览器有哪些，内核都是什么？ 答： 常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等 浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 firefo
英语四级单词
热门推荐
xxiyy0411的博客
12-18 2万+
// ==UserScript== // @name 背单词 // @description 边上网边刷英语四级单词 // @namespace Xiaomaxin // @version 1.31 // @author Xiaomaxin // @include * // @require http://cdn.bootcss.com
Kalendae 三个日历 时间连选
x890113f的博客
05-21 644
 工作中要求一个三联日历，时间可连选一个时间段，如下图 经过一段时间的搜索和查找最终选定用Kalendae日期控件，原因是有一个可参考的demo,可网上针对这个时间控件的描述千篇一律的将demo中的方法简单的进行了描述，可学习和借鉴的东西少之又少，无奈，改吧（本人做java的 看js代码还是有点费劲）。 一步一步来，这里使用的方法是原js代码生改（生改：就是硬改，硬改：就是直接改）。 ...
Calendar.js:一个JavaScript日历库，可完全响应并与所有现代浏览器兼容
03-09
欢迎使用Calendar.js： 这是一个JavaScript日历库，可完全响应并与所有现代浏览器兼容。 功能包括： 添加，更新和删除事件，并具有完整的自定义颜色支持。 完整的API可通过公共功能获得。 拖放事件。 可配置的翻译文本。 日，周，月和所有事件视图。 在CSS / SASS中完全样式化（包括按钮）。 动作的自定义事件（添加/更新/删除事件，跳过月份等）。 导出为CSV，XML，JSON和TEXT。 全屏模式（双击标题栏）。 搜索支持。 每天，每周，每月或每年重复一次（支持排除天数）。 首先，请下载源代码并运行“ index.html”文件。 这将显示启用了大多数选项的日历示例。 为了进一步帮助配置，所有内容都在未最小化的“ src / calendarjs.js” JavaScript文件中进行了记录。
js 日历文件 calendar.js
11-22
返回当前日期和时间 使用方式：
日历calendar.js
ZZC's Blog
09-19 1678
//  主调用函数是 setday(this,[object])和setday(this)，[object]是控件输出的控件名，举两个例子：//  一、//  二、 注：*号表示比较关键的改动说明：1.受到iframe的限制，如果拖动出日历窗口，则日历会停止移动。*///==================================================== 参数设定部
js日历（calendar）
chujian0939的博客
01-19 724
效果还不错 View Code // JavaScript Document /* [Discuz!] (C)2001-2007 Comsenz Inc. This is NOT a freeware, use is subjec...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值