设计动态响应周历

Question

我正在使用Twitter Bootstrap创建动态响应周日历。

以下是我目前的实施方式：http://jsfiddle.net/dvirazulay/Lhe7C/（此处完整粘贴有点长）

以下是它的当前截图：

我想要实现的是一个完全动态的设计 - 从我的后端生成初始视图没有问题，但有点复杂，因为我当前的实现使用表。我担心在JavaScript方面很难维护它，即删除事件/动态添加它们。

显然，我选择的桌子对我来说很有意义 - 一周的日历基本上就是桌子。我将描述我的设计：

1. 事件可能超过30分钟，因此我使用rowspan来定义应该跨越多少小时。
2. 可能有两个事件发生冲突（我不允许超过两个）。在目前的设置中，它们彼此相邻，每个占据事件宽度的50％，并且需要尽可能多的高度来表示结束时间。
3. 在后端，我计算了我需要跳过多少td才能在表格的末尾没有额外的列（因为rowspan将某些列推到右边）< / LI>

   我的问题如下：

   • 这是正确的方法吗？
   • 我应该将相同的后端逻辑应用于前端，并根据我拥有的事件数量重新计算tr / td的数量，或者是否存在为此更好的解决方案？

   理想情况下，一个好的答案应该描述如何处理前端的事件而不会出现复杂情况或针对此问题的替代（响应！）设计。

   我不想使用现有的插件，因为我已经搜索并尝试了多个插件，我想保持这个非常轻的重量，但是如果你有一个很好的建议来满足要求 - 我会喜欢看看吧！ （jQuery周日历太慢而且杂乱无章）

   注意：我无意支持早于IE9的浏览器。

Answer 1

在研究了这些问题并咨询了一些前端专家之后，我得出结论，将其保留为表格是最佳选择，即使生成它并非易事。

虽然这个决定使得很难在不重新生成整个表的情况下动态更改计划，但应该作为表格的表格元素的好处 - 对齐，宽度，高度，边框等都很容易控制，并且可以很好地跨浏览器工作。

一个重要的注意事项是，这种方法使得时间表的响应性变得微不足道。

Answer 2

使用表格是一种很好的方法。

好的，这是一个基于jQuery的解决方案，对“rowpans is right right”问题。 问题的根源是后端生成错误的表。

例如，如果渲染了rowspan =“3”的td，那么接下来两行中相同列索引位置的td将受到影响并被推到右侧。这是不受欢迎的。

<table border="1">
<tr>
    <td>07:30</td>
    <td rowspan="3">Event 07:30 to 09:00</td>
</tr>
<tr>
    <td>08:00</td>
    <td>Should not be rendered.</td>
</tr>
<tr>
    <td>08:30</td>
    <td>Should not be rendered.</td>
</tr>
<tr>
    <td>09:00</td>
    <td>C</td>
</tr>

正确的解决方案是在后端生成正确的表。 在rowspan之后渲染td应该根本不会发生。 如果您知道，您正在渲染rowspan =“3”，则相应地采取行动。 ：）

无论如何，如果无法修改表格渲染，那么使用jQuery来修复它：

http://jsfiddle.net/9tQvu/3/

Answer 3

这是一种完全可以接受的方式。

如果我是你，我可能会使用div，因为它们更易于管理，更容易使用CSS并且更加标准。

除此之外，我认为你采取了一个很好的方法，你可能应该像后端一样做前端因为你知道它有效。

就处理事件而言，我只是按类使用类对div进行排序，然后在这些相应的类上使用事件处理程序和你想要使用的事件类型（我不知道除了点击之外你想要什么） 。

Answer 4

当一个事件只与另一个事件部分重叠时会发生什么，我的意思是，2个重叠的事件需要50％的witdh，但是如果其中一个事件会更快完成而另一个事件稍后完成，那个事件继续完成，是否需要全部“下一行”的宽度还是在宽度的50％处继续？如果活动A是从8:00到8:30而活动B是从8:00到18:00会发生什么？它应该是好的，事件B将填补宽度，直到有另一个重叠事件..但我想这可能有点棘手。 只是一个想法。编码愉快，这真是一个不错的项目。

Answer 5

dhtmlxScheduler - Ajax / JavaScript事件日历

dhtmlxScheduler是一个JavaScript事件日历，可让您向自己的网络应用或网站添加类似Google的日程安排程序。直观的拖放界面允许最终用户快速管理不同视图中的事件和约会：日，周，月，年，议程，时间线等。非常轻量级（约20Kb gzip），高度可定制，快速，dhtmlxScheduler提供了一种在网页上添加基于Ajax的事件日历的快捷方法。

Answer 6

使用CSS和div而不是表格单元格可以更精确，并且更容易计算客户端并保持响应性。这是第一个事件的pseduo-CSS / JS示例：

.event:first-child {
    height: `(1.5/24)*100`%; /* 6.25%, based on duration */
    position: absolute;
    top: `(10/24)*100`%; /* 41.7%, based on event start */
}