类似Google Calendar效果的简单实现

最新推荐文章于 2020-09-17 10:16:17 发布

wanyongping

最新推荐文章于 2020-09-17 10:16:17 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： calendar google function div border javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/wanyongping/article/details/1862884

本文介绍了一种使用DIV元素和Ajax技术实现的日程安排功能。通过鼠标操作可以在日历视图上创建和调整事件块，并将这些事件保存到数据库中。

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>

<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%"> </td>

</tr>

<tr>

<td> </td>

</tr>

<tr>

<td rowspan="2" align="center" valign="top">01:00</td>

<td> </td>

</tr>

<tr>

<td> </td>

</tr>

<tr>

<td rowspan="2" align="center" valign="top">02:00</td>

<td> </td>

</tr>

<tr>

<td> </td>

</tr>

<tr>

<td rowspan="2" align="center" valign="top">03:00</td>

<td> </td>

</tr>

<tr>

<td> </td>

</tr>

<tr>

<td rowspan="2" align="center" valign="top">04:00</td>

<td> </td>

</tr>

<tr>

<td> </td>

</tr>

</table>

</div>

</body>

</html>

评论 2

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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