类似Google Calendar效果的简单实现

来源：互联网发布：python网络编程第3版编辑：程序博客网时间：2024/06/10 08:42

2007/11/02

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

后面的功能也是利用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>

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>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>