1

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

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

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

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

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

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

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

4

1 回答 1

2

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

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

它是在没有任何第三方库的情况下编写的,但它需要一个新的浏览器。然而map, , some, 等函数可以很容易地填充

,Calendar和原型是一种避免巨大方法的方法DayEvent例如,我可以删除渲染方法中的逻辑以完全遵循 MVC 模式,从而简化开发。

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

祝你好运!

于 2013-06-26T10:35:34.847 回答