模仿Google日程的小控件

出于产品的某个功能需要，模仿Google日程表写的小控件，刚写好“月”的界面部分，放上来共享，喜欢的就拿去。但先致声明，自己需要的功能自己扩展，有问题可以在这问，但不保证有时间回答。

内容可用鼠标拖动调整位置和大小。

 

JS文件：

function Calendar(title, year, month) { window.Calendar = this; //this.month = function(){var m = (month ? month : new Date()); return new Date(m.getFullYear(), m.getMonth(), 1);}(); this.year = (year ? year : (new Date).getFullYear()); this.month = (month ? month : (new Date).getMonth()); this.days = function(){return this.dateDiff(new Date(this.year,this.month+1,1), new Date(this.year,this.month,1));};//本月天数 this.title = (title ? title.replace("{Y}", this.year).replace("{M}", this.month+1) : this.year + "年" + (this.month+1) + "月"); //支持{Y}和{M}转义符 this.parent = null; this.focusElement = null;//正在拖动的控件 this.data = [];//[{beginDate, endDate, userNames, users, element},{}] this.weekCN = ['日','一','二','三','四','五','六']; this.mouseStatus = 0;//0-正常,1-拖放,2-缩放 this.table_top = 0;//表格y坐标 this.header_height = 0;//标题高度 this.row_height = 0;//数据行单行高度 //计算两日期差值 this.dateDiff = function(date1, date2){return parseInt(Math.abs(date1 - date2)/86400000);}; //判断日期是否周未 this.isWeekend = function(y,m,d){var dy = (new Date(y, m, d)).getDay(); return dy==0 || dy==6;}; //根据鼠标坐标计算表格行索引 this.getRowIndex = function(){ var rowIndex = parseInt((event.y - this.table_top - this.header_height + (document.documentElement.scrollTop||document.body.scrollTop)) / this.row_height); if (rowIndex < 0) rowIndex = 0; else if (rowIndex > this.parent.childNodes[0].rows.length-2) rowIndex = this.parent.childNodes[0].rows.length-2; return rowIndex; }; this.getOffsetLeftTop = function(e, point){ point[0] = e.offsetLeft - e.scrollLeft; point[1] = e.offsetTop - e.scrollTop; while (e.offsetParent) { e = e.offsetParent; point[0] += e.offsetLeft - e.scrollLeft; point[1] += e.offsetTop - e.scrollTop; } }; //根据鼠标位置光标指针，提示用户可拖动或调整尺寸 this.setCursor = function(){ var obj = event.srcElement; var pt = [0,0]; this.getOffsetLeftTop(obj, pt); if (event.y < pt[1]+6) obj.style.cursor = 'move'; else if (event.y > pt[1]+obj.offsetHeight-3) obj.style.cursor = 's-resize'; else obj.style.cursor = 'default'; }; //移动控件 this.moveElement = function(){ var rowIndex = this.getRowIndex(); var y = this.table_top + this.header_height + this.row_height * rowIndex + 1; with(this.focusElement.style) if (top != y) top = y+"px"; }; //调整控件尺寸 this.resizeElement = function(){ var rowIndex = this.getRowIndex()+1; var beginDay = this.data[this.focusElement.getAttribute("dataIndex")].beginDate.getDate(); if (rowIndex >= beginDay) { this.focusElement.style.height = this.row_height + this.row_height * (rowIndex - beginDay) -1; } }; this.elementMouseMove = function(){//在鼠标移动事件中处理光标和拖放 switch(this.mouseStatus){ case 0: this.setCursor(); break; case 1: this.moveElement(); break; case 2: this.resizeElement(); break; } }; //this.startDrag = function(){obj.setCapture()}; this.elementMouseDown = function(){ this.focusElement = event.srcElement; switch(this.focusElement.style.cursor){ case "move": this.focusElement.setCapture(); this.mouseStatus = 1; break; case "s-resize": this.focusElement.setCapture(); this.mouseStatus = 2; break; } }; //鼠标释放时同步数据 this.elementMouseUp = function(){ switch(this.focusElement.style.cursor){ case "move"://释放时同步数据 var dataIndex = this.focusElement.getAttribute("dataIndex"); this.focusElement.releaseCapture(); this.mouseStatus = 0; this.elementMouseMove();//通过此函数设定光标 var rowIndex = this.getRowIndex()+1; with(this.data[dataIndex]) if (rowIndex != beginDate.getDate()) { var val = rowIndex - beginDate.getDate(); beginDate.setDate(rowIndex); var maxDay = this.days(); if (endDate.getDate()+val > maxDay){ endDate.setDate(maxDay); this.focusElement.style.height = this.row_height + this.row_height * (maxDay - rowIndex) -1; }else endDate.setDate(endDate.getDate()+val); } this.focusElement = null; break; case "s-resize": var dataIndex = this.focusElement.getAttribute("dataIndex"); this.focusElement.releaseCapture(); this.mouseStatus = 0; this.elementMouseMove(); var rowIndex = this.getRowIndex()+1; with(this.data[dataIndex]){ var beginDay = beginDate.getDate(); if (rowIndex < beginDay) rowIndex = beginDay; if (rowIndex != endDate.getDate()) endDate.setDate(rowIndex); } this.focusElement = null; break; } }; this.renderTo = function(control){ if (control) this.parent = control; if (!this.parent) return; var html = []; html.push("<table border=0 cellpadding=2 cellspacing=1 class='Calendar' onselectstart='return false;' ondragstart='return false;'><tr><th>日期</th><th>"+this.title+"</th></tr>"); var days = this.days(); //var days = parseInt(((new Date(this.year,this.month+1,1)) - (new Date(this.year,this.month,1)))/86400000); for (var day=1; day<=days; day++){ html.push("<tr><td class='Calendar_date"+(this.isWeekend(this.year, this.month, day) ? " Calendar_weekend" : "")+"'>"); html.push((this.month+1)+"月"+day+"日(周"+this.weekCN[(new Date(this.year, this.month, day)).getDay()]); html.push(")</td><td class='Calendar_content"+(this.isWeekend(this.year, this.month, day) ? " Calendar_weekend" : "")+"'> </td></tr>"); } html.push("</table>"); this.parent.innerHTML = html.join(""); var table = this.parent.childNodes[0]; var pt = [0,0]; this.getOffsetLeftTop(table, pt); this.table_top = pt[1]; this.header_height = table.rows[0].offsetHeight+1; this.row_height = table.rows[1].offsetHeight+1; for (var i=0; i<this.data.length; i++){ this.data[i].element = document.createElement("div"); with(this.data[i].element){ setAttribute("dataIndex", i); className = "Calendar_div"; style.position = "absolute"; pt = [0,0]; var cell = table.rows[this.data[i].beginDate.getDate()].cells[1]; this.getOffsetLeftTop(cell, pt); style.left = pt[0]+"px"; style.top = pt[1]+"px"; style.width = cell.offsetWidth + "px"; style.height = this.row_height + this.row_height * this.dateDiff(this.data[i].beginDate, this.data[i].endDate) -1; style.display = "block"; zIndex = 3000+i; innerHTML = this.data[i].userNames; onmousemove = function(){window.Calendar.elementMouseMove();}; onmousedown = function(){window.Calendar.elementMouseDown();}; onmouseup = function(){window.Calendar.elementMouseUp();}; } document.body.appendChild(this.data[i].element); } } }

 

我用的CSS：

.Calendar {width:100%; border:#A2BBDD; background-color:#DDDDDD; cursor:default;} .Calendar th {background-color:#66AA00; height:24px;} .Calendar td {height:24px;} .Calendar_date {width:100px; text-align:center; background-color:#E8EEF7;} .Calendar_content {background-color:#FFFFFF;} .Calendar_weekend {background-color:#FFFFCC;} .Calendar_div { text-align:left; color:#ffffff; padding:2px; border:1px solid #2952A3; border-width: 6 1 3 1; background-color:#668CD9; overflow:hidden; cursor:default; }

 

调用例子：

window.onload=function(){ var cal = new Calendar(); cal.data = [{beginDate:new Date(2009, 11,2 ), endDate: new Date(2009, 11, 4), userNames:'张三，李四', users:'1,6'}, {beginDate:new Date(2009, 11,5 ), endDate: new Date(2009, 11, 5), userNames:'陈林，王江山', users:'9,16'}]; cal.renderTo(document.getElementById('div1')); }