设计一个动态的响应星期日历 [英] Designing a dynamic responsive week calendar

问题描述

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

I'm creating a dynamic responsive week calendar, using Twitter Bootstrap.

以下是我目前的实施： http://jsfiddle.net/dvirazulay/Lhe7C / （在这里完整地粘贴一段时间）

Here's my current implementation: http://jsfiddle.net/dvirazulay/Lhe7C/ (was a little long to paste in here in full)

以下是它的一个截图：

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

What I'm trying to achieve is a design which will be fully dynamic - generating the initial view from my back-end is no issue, but is a little complicated, as my current implementation uses tables. I fear it will be hard to maintain it on the JavaScript side of things, i.e removing events/adding them on the fly.

显然，我选择了表格，因为它有意义对我来说 - 一个星期的日历基本上是一张桌子。我将描述我的设计：

Obviously, I picked tables as it made sense to me - a week calendar is basically a table. I'll describe my design:

1. 一个事件可能会持续30分钟以上，所以我使用 rowspan 来定义应该跨越多少小时。 可能有两个事件发生冲突（我不允许超过两个）。按照当前的设置，它们彼此相邻显示，每个占用事件宽度的50％，并且需要表示结束时间的高度。


2. 开在后端方面，我计算了多少 td 我需要跳过，以避免在表的末尾添加额外的列（如 rowspan



1. An event may span for more than 30 minutes, so I use rowspan to define how many hours it should span on.
2. There might be two events conflicting (I don't allow more than two). As it currently set-up, they show up next to each other, each taking 50% of the event width and taking as much as height as they need to represent the ending time.
3. On the back-end side, I calculate how many td I need to skip in order not to have extra columns at the end of the table (as rowspan pushes some to the right)

我的问题如下：

• 这是否正确？


• 我是否应该将相同的后端逻辑应用于前端并重新计算 tr / td 的金额，以根据我拥有的事件数量显示，或者是否有更好的解决方案？

• Is this the right approach?
• Should I apply the same back-end logic to the front-end, and re-calculate the amount of tr/td to show according to the amount of events I have, or is there a better solution for this?

理想情况下，一个好的答案应该描述如何在前端处理事件，而无需并发症或针对此问题的备用（响应！）设计。

Ideally, a good answer should describe how to handle events on the front-end side without complications or an alternate (responsive!) design for this issue.

我不想使用现有的插件，因为我已经搜索并尝试了多个插件，并且我希望保持这个非常轻的重量，但是如果您有为满足要求的人提供了一个很好的建议 - 我很想看看！ （例如，jQuery的周历过于缓慢和混乱）

I don't want to use an existing plugin, as I've searched and tried multiple ones, and I want to keep this really light weight, but if you have a great suggestion for one that fulfills the requirements - I would love to check it out! (jQuery week calendar is too slow and cluttered for example)

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

Note: I have no intention to support browsers older than IE9.

推荐答案

在研究完这些问题并咨询了一些前端专家之后，我认为将其保留为表是最佳选择，即使生成它也不是微不足道的。

After researching the issues and consulting with a few front-end experts, I've concluded that keeping it as tables is the best option, even if generating it is not trivial.

虽然这个决定很难在不重新生成整个表的情况下动态改变计划，但是应作为表格支付表格 - 对齐，宽度，高度，边框等都易于控制，并且跨浏览器很好用。

While this decision makes it hard to dynamically change the schedule without re-generating the whole table, the benefits of styling elements that should be a table as a table pay up - aligning, widths, heights, borders, etc. are all easy to control and work great cross-browser.

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

An important note is that this approach is making the responsiveness of the schedule a trivial quality.

这篇关于设计一个动态的响应星期日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！