类似Google Calendar效果的简单实现[收藏]

From：http://blog.csdn.net/wanyongping/archive/2007/11/02/1862884.aspx

目前只是简单的实现了行选择的效果。

后面的功能也是利用DIV来实现的并结合Ajax方法将登陆的数据保存到数据库中。

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< title > Calender Event Page </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=shift_jis" >
< script  language ="javascript" > ...
var divCount = 0;
var drawFlag = false;
var initPointY = 20;
function drawTdPanel()...{
    var pointX, pointY;
    var iHeight;
    pointY = event.y;
    if (pointY < 20) return ;
    if ((pointY / 20) > 0)...{
        iHeight = pointY -initPointY;
        iHeight = (Math.floor(iHeight / 20)*20);
        divCount = divCount + 1;
        var objDiv = document.createElement("Div");
        objDiv.id = "EventPanel" + divCount;
        objDiv.style.position = "absolute";
        objDiv.style.top = initPointY + "px";        
        objDiv.style.background = "#9999CC";
        objDiv.style.zindex = "3";
        objDiv.style.width = "85%";
        objDiv.style.height = iHeight + "px";
        
        var objDivPanel = document.getElementById("divPanel");
        objDivPanel.appendChild(objDiv);
    }
}

function DrawDivOnMouseDown()...{
    if (event.y < 20) return ;
    
    drawFlag = true;
    initPointY = event.y ;
    initPointY = (Math.floor((initPointY) / 20) - 1) * 20;
    drawTdPanel();
}


function DrawDivOnMouseMove()...{
    window.status = "X:" + event.x + ",Y:" + event.y;
    if (drawFlag == true)...{
        var objDivPanel = document.getElementById("divPanel");
        objDivPanel.innerHTML = "";
        drawTdPanel();
    }
}

function DrawDivOnMouseUp()...{
    drawFlag = false;
}

function drawEventPanel()...{
}
</ script >
</ head >

< body >
< div  id ="divPanel"   onMouseDown ="DrawDivOnMouseDown();"  onMouseMove ="DrawDivOnMouseMove();"  onMouseUp ="DrawDivOnMouseUp();"  style ="position:absolute; filter:alpha(opacity=80); border:1px solid #FF0000; background-color:#FFFFCC; z-index:2; width:85%; height:300px; left:111px; top: 16px;"   >
    
</ div >
< div  style ="top:20px;border:1px solid #FF0033; " >
< table  id ="CalenderEventTable"  width ="100%"  border ="1"  cellpadding ="0"  cellspacing ="0" >
   < tr >
     < td  width ="10%"  rowspan ="2"  align ="center"  valign ="top" > 00:00 </ td >
     < td  width ="90%" > &nbsp; </ td >
   </ tr >
   < tr >
     < td > &nbsp; </ td >
   </ tr >
   < tr >
     < td  rowspan ="2"  align ="center"  valign ="top" > 01:00 </ td >
     < td > &nbsp; </ td >
   </ tr >
   < tr >
     < td > &nbsp; </ td >
   </ tr >
   < tr >
     < td  rowspan ="2"  align ="center"  valign ="top" > 02:00 </ td >
     < td > &nbsp; </ td >
   </ tr >
   < tr >
     < td > &nbsp; </ td >
   </ tr >
   < tr >
     < td  rowspan ="2"  align ="center"  valign ="top" > 03:00 </ td >
     < td > &nbsp; </ td >
   </ tr >
   < tr >
     < td > &nbsp; </ td >
   </ tr >
   < tr >
     < td  rowspan ="2"  align ="center"  valign ="top" > 04:00 </ td >
     < td > &nbsp; </ td >
   </ tr >
   < tr >
     < td > &nbsp; </ td >
   </ tr >
</ table >
</ div >
</ body >
</ html >