javascript - 设计动态响应式周历

Question

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

这是我当前的实现： http: //jsfiddle.net/dvirazulay/Lhe7C/（完整粘贴在这里有点长）

这是它的当前屏幕截图：

在此处输入图像描述

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

显然，我选择了对我来说有意义的表格——周历基本上就是一张桌子。我将描述我的设计：

一个事件可能跨越 30 分钟以上，所以我用rowspan它来定义它应该跨越多少小时。
可能有两个事件发生冲突（我不允许超过两个）。按照目前的设置，它们彼此相邻显示，每个占据事件宽度的 50%，并占据代表结束时间所需的高度。
在后端，我计算td我需要跳过多少列才能在表的末尾没有多余的列（rowspan将一些推到右边）

我的问题如下：

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

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

我不想使用现有的插件，因为我已经搜索并尝试了多个插件，并且我想保持这个非常轻的重量，但是如果您对满足要求的插件有很好的建议 - 我很乐意检查出来！（例如，jQuery 周历太慢且杂乱无章）

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

score 4 · Accepted Answer

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

虽然这个决定使得在不重新生成整个表格的情况下很难动态更改时间表，但应该将表格作为表格的样式元素的好处得到了回报 - 对齐、宽度、高度、边框等都很容易控制并且工作出色的跨浏览器。

一个重要的注意事项是，这种方法使日程安排的响应能力变得微不足道。

score 1 · Accepted Answer

使用表格是一个好方法。

好的，这是一个基于 jQuery 的“rowspans are push 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>

正确的解决方案是在后端生成正确的表。在行跨度之后渲染 td 根本不应该发生。如果你知道，你正在渲染一个 rowspan="3"，那么就采取相应的行动。:)

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

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

score 1 · Accepted Answer

dhtmlxScheduler - Ajax/JavaScript 事件日历

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

score 0 · Accepted Answer

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

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

除此之外，我认为您采取了一种很好的方法，您可能应该以与后端相同的方式来做前端，因为您知道它有效。

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

使用 CSS 和 div，而不是表格单元格，可能会更精确，并且肯定会更容易计算客户端并保持响应能力。这是第一个事件的伪 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 */
}

javascript - 设计动态响应式周历

6 回答 6

Related

Reference