设计动态响应周历

Question

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

这是我目前的实现:http://jsfiddle.net/dvirazulay/Lhe7C/(有点长时间在这里完全粘贴)

以下是它的当前截图:

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

显然,我选择了桌子,因为它对我来说很有意义 - 一周的日历基本上就是一张桌子.我将描述我的设计:

1. 一个事件可能超过30分钟,所以我用它rowspan来定义它应该跨越多少小时.
2. 可能有两个事件冲突(我不允许超过两个).在目前的设置中,它们彼此相邻,每个占据事件宽度的50%,并且需要尽可能多的高度来表示结束时间.
3. 在后端,我计算td我需要跳过多少才能在表的末尾没有额外的列(因为rowspan向右推一些)

我的问题如下:

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

理想情况下,一个好的答案应该描述如何处理前端的事件而不会出现复杂情况或者针对此问题的替代(响应!)设计.

我不想使用现有的插件,因为我已经搜索并尝试了多个插件,我想保持这个非常轻便,但是如果你有一个很好的建议来满足要求 - 我很想检查出来!(例如,jQuery周日历太慢而且杂乱无章)

注意:我无意支持IE9以前的浏览器.

Answer 1

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

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

需要注意的是，这种方法使计划的响应能力变得微不足道。