支持多日事件的动态javascript事件日历

Question

好的，所以我现在已经在一段时间内（几个月）对这个问题进行了抨击。但我似乎无法找到一个简单的解决方案来创建一个使用Javascript的日历，它允许我动态添加事件并支持多日事件。

我的第一种方法是使用具有年 - 月 - 日关联ID的div，因此我可以轻松添加事件，这里的问题是无法支持多日事件，但添加单日事件很容易。

我最近的做法是解析谷歌日历，他们显然使用表，这是一个很好的解决方案，因为它很容易支持多日事件块（使用colspan），但是在表上添加/渲染事件似乎是完全不同的壮举，因为我不能简单地将它们添加到列/单元格块。我必须生成一个新行，然后如果这是一个推动事件的多日事件，那么我将不得不重新渲染日历的这些部分。 这是我目前的“动态”的做法的链接，我一直在努力：https://r3dux.com/css/caldyn.php

，这里是一个静态的版本，以显示它应该看起来像事件就可以了：https://r3dux.com/css/cal.php

我不想使用任何形式的第三方日历。我想用纯Javascript，NO Jquery或其他框架来做到这一点。

如果你可以简单地给我一些建议或不同的方法来解决这个问题，那将是非常有用的。

基本要求是，它具有多日的活动支持，可以适应一个“周”视图（只显示当前和下周），并允许我显示每一天的个人开始/结束时间一个事件。我还需要以某种方式支持夏令时和标准时间的日程安排活动。比如，如果它现在是DST并且将来是STD的时间表，那么我希望用户在DST期间选择的时间是事件的安排时间，因此交换机发生时，时间不会改变一小时。

Answer 1

首先，我会考虑重构renderCalendar函数 - 它是巨大的！用代码实现多日事件并不容易，更不用说了。

我创建了一个fiddle，它基于一些旧的，未完成的代码（目标是创建类似Google的日历），这可能可以作为如何执行此操作的建议。它离你想要的很远，但也许你可以从中得到一些想法。

它没有任何第三方库编写，但它需要一个新的浏览器。但是，map,some等功能可以很容易地被polyfilled所采用。

Calendar，Day和Event原型可用作避免巨大方法的一种方法。我可以例如去除渲染方法中的逻辑以完全遵循MVC模式，这简化了开发。

要动态添加事件，请将Event改为Calendar.events并致电Calendar.render()。它已经“支持”多日事件和单一事件，但它绝对需要一些工作。

祝你好运！