I have a calendar implemented with a table since a calendar is a tabular data. I am wondering about how to implement events so that the position of the div event is updated as one scrolls resizes the window (which also resizes the table).
Plunker: http://plnkr.co/edit/bCZl31OZuCVN0q8vnGp0?p=preview
If you resize the frame which divides the editor and the preview you see that the event is moved to a different date (from the correct 17th of October).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table,td,tr{border:1px solid gray;border-collapse:collapse;}
td{height:40px;}
</style>
</head>
<body>
<div class="events">
<div class="event" style="background:red;position:relative; top:110px; left:200px; width:100px;">Meet John Doe</div>
</div>
<table width="100%">
<tbody>
<tr>
<td>
</td><td>
1
</td><td>
2
</td><td>
3
</td><td>
4
</td><td>
5
</td><td>
6
</td>
</tr><tr>
<td>
7
</td><td>
8
</td><td>
9
</td><td>
10
</td><td>
11
</td><td>
12
</td><td>
13
</td>
</tr><tr>
<td>
14
</td><td>
15
</td><td>
16
</td><td>
17
</td><td>
18
</td><td>
19
</td><td>
20
</td>
</tr><tr>
<td>
21
</td><td>
22
</td><td>
23
</td><td>
24
</td><td>
25
</td><td>
26
</td><td>
27
</td>
</tr><tr>
<td>
28
</td><td>
29
</td><td>
30
</td><td>
31
</td><td>
</td><td>
</td><td>
</td>
</tr>
</tbody></table> </body>
</html>