设计动态响应式周历答案

【问题标题】：Designing a dynamic responsive week calendar设计动态响应式周历
【发布时间】：2012-07-01 12:03:48
【问题描述】：

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

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

这是它的当前截图：

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

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

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

我的问题如下：

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

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

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

注意：我无意支持 IE9 之前的浏览器。

【问题讨论】：

任何你可以在 GitHub 上开源的方式。我愿意贡献
@jonperl，我最终保留了我的后端和 AJAX 刷新解决方案，但我仍然对它（或它的源代码）感到不舒服。只要我有空闲时间，我就会尝试对其进行概括并将其移植到 JavaScript 并将其部署到 GitHub。会通知您，感谢您的关注！
不想从头开始设计它为什么你不能尝试完整的日历
你有没有最终发布这个项目的完整源代码？

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

dhtmlxScheduler - Ajax/JavaScript 事件日历

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

【讨论】：

fullcalendar 没有响应，也没有给出事件持续时间的非常精确的指示。
@dvir-azulay 不是在询问产品建议，而是在询问处理事件时间表的最佳开发方法。无论哪种方式，dhtmlxScheduler 的 Touch 模块都没有响应。

【解决方案2】：

使用 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 */
}

【讨论】：

【解决方案3】：

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

【讨论】：

我认为它看起来有点奇怪，就像俄罗斯方块一样，如果它们仅在事件重叠的时间内重叠（例如，每个 50% 宽度）。我非常喜欢@dvir-azulay 在Monday from 1200-1330 上的处理方式。

【解决方案4】：

使用表格是个好方法。

好的，这是一个基于 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/

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

只是想知道，display: table 会给你最好的吗？为什么不呢？
@AdamLynch，很抱歉回复晚了（实际上我很久以前就读过它并告诉自己我应该回复），但与 HTML 表格相比，CSS 表格没有太多好处。对我来说，当标签名称是描述性的时，读取表的源代码会更清晰，而不是搜索类属性或 CSS 文件。我很想听听display: table 和它的朋友们如何比桌子更好地解决这个问题:)
感谢您的回复。我不是这方面的专家，我之前一直在为响应式日历使用表格与 CSS。我问的更多是出于好奇:)

【解决方案6】：

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

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

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

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

【讨论】：

实际上很难用一张表来维护。我必须从中获取所有事件并重新计算我必须使用的 TD/TR 数量，然后构建它。我感觉不对...你能描述一下如何用 DIV 正确设计它吗？我发现很难为表格数据问题考虑 DIV
我可以通过 JavaScript 使用表格和位置元素，但这会扼杀我的响应能力 - 除非我在调整大小时更新它。这是某种标准吗？如果有更好的 JS 处理方式，表格对我来说是完美的