支持多日活动的动态 javascript 活动日历

Question

好的，所以我一直在努力解决这个问题一段时间（几个月）。但我似乎找不到一个简单的解决方案来使用 Javascript 创建日历，允许我动态添加事件并支持多天事件。

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

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

这是一个静态版本，用于显示它应该是什么样子的事件：https://r3dux.com/css/cal.php

我不想使用任何类型的第三方日历。我想用纯 Javascript、没有 Jquery 或其他框架来做到这一点。

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

基本要求是它支持多天活动，可以调整为“周”视图（仅显示当前和下一周），并允许我显示每个日期的单独开始/结束时间事件。我还需要以某种方式支持跨夏令时和标准时间安排事件。就像，如果它当前是 DST 并且在未来安排一个事件，当它是 STD 时，我希望用户在 DST 期间选择的时间是安排事件的时间，所以当切换发生时时间不会改变一个小时。

Answer 1

首先，我会考虑重构renderCalendar 函数——它很大！使用该代码很难想象，更不用说实现多日事件了。

我创建了一个fiddle，基于一些旧的、未完成的代码（目标是创建一个类似谷歌的日历），它也许可以作为如何做的建议。它与您想要的相差甚远，但也许您可以从中汲取一些想法。

它是在没有任何第三方库的情况下编写的，但它需要一个新的浏览器。 map、some 等函数可以很容易地使用polyfilled。

Calendar、Day 和 Event 原型是一种避免使用庞大方法的方法。我可以例如去掉渲染方法中的逻辑，完全遵循MVC模式，方便开发。

要动态添加事件，请将Event 推送到Calendar.events 并调用Calendar.render()。它已经“支持”多日活动和单次活动，但它肯定需要一些工作。

祝你好运！