Javascript 设计动态响应式周历

Designing a dynamic responsive week calendar

提问by Dvir Azulay

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

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

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

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

And here is a current screenshot of it:

这是它的当前屏幕截图：

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.

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

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

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

1. An event may span for more than 30 minutes, so I use rowspanto 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 tdI need to skip in order not to have extra columns at the end of the table (as rowspanpushes some to the right)

1. 一个事件的持续时间可能超过 30 分钟，所以我用它rowspan来定义它应该持续多少小时。
2. 可能有两个事件发生冲突（我不允许超过两个）。按照目前的设置，它们并排显示，每个占用事件宽度的 50%，并占用尽可能多的高度来表示结束时间。
3. 在后端，我计算了td我需要跳过多少，以便在表的末尾没有多余的列（rowspan将一些列向右推）

My questions are the following:

我的问题如下：

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

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

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.

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

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)

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

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

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

采纳答案by Dvir Azulay

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 shouldbe 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.

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

回答by Jens A. Koch

Using a table is a good approach.

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

Ok, this is a jQuery based solution to the "rowspans are pushed right" problem. The origin of the problem is a wrong table generation in the backend.

好的，这是一个基于 jQuery 的解决方案，用于解决“rowspans are push right”问题。问题的根源在于后端的表生成错误。

For example if a td with rowspan="3" is rendered, then the td's at the same column index position in the next two rows will be affected and pushed to the right. This is undesired.

例如，如果渲染了 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>

The correct solution is a correct table generation in the backend. Rendering td's after the rowspan should simply not happen. If you know, that you are rendering a rowspan="3", then act accordingly. :)

正确的解决方案是在后端正确生成表。在 rowspan 之后渲染 td 根本不应该发生。如果您知道您正在渲染 rowspan="3"，请采取相应措施。:)

Anyway, if it's not possible to modify the table rendering, then use jQuery to fix it:

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

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

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

回答by Ganesh Bora

dhtmlxScheduler- Ajax/JavaScript Event Calendar

dhtmlxScheduler- Ajax/JavaScript 事件日历

dhtmlxScheduler is a JavaScript event calendar that allows you to add a Google-like scheduler to your web app or website. Intuitive drag-and-drop interface allows the end users to quickly manage events and appointments in different views: Day, Week, Month, Year, Agenda, Timeline, etc. Very lightweight (about 20Kb gzipped), highly customizable, and fast, dhtmlxScheduler provides a quick way to add an Ajax-based event calendar on a web page.

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

回答by Alastair

Using CSS and divs, instead of table cells, could be more precise and will certainly be easier to calculate client-side and retain responsiveness. Here's a pseduo-CSS/JS example for the first event:

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

回答by Matteo Bononi 'peorthyr'

what happens when an event is overlapping only partially with another, i mean, 2 overlapping events takes 50% of the witdh, but if one of them will finish sooner and the other later, the one that continue, does it takes all the width of the "next" row or continue at 50% of the width? what happen if the event A is from 8:00 to 8:30 and event B is from 8:00 to 18:00 ? it should be nice that the event B will fullup the width until there is another overlapping event..but i guess it could be a little tricky. just a thought. Happy coding, this is really a nice project.

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

回答by maxhud

That is a perfectly acceptable way of doing it.

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

If I were you I would probably use divs though because they are more manageable and easier to use CSS on and are more standard.

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

Other than that I think you're taking a good approach and you should probably do the front end the same way as the back end because you know it works.

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

As far as handling events I would just sort divs by type using classes and then use event handlers with the types of events you want to use (I don't know what you'd want besides click though) on those corresponding classes.

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