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

Dynamic javascript event calendar with multi-day event support

本文关键字:活动 javascript 活动日 日历 动态 支持      更新时间:2023-09-26

好吧,我已经思考这个问题有一段时间了(几个月)。但我似乎找不到一个简单的解决方案来用Javascript创建一个日历,让我可以动态地向其中添加事件并支持多日事件。

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

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

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

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

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

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

首先,我会考虑重构renderCalendar函数——它非常巨大!用这种代码想象,更不用说实现多日事件了。

我根据一些旧的、未完成的代码创建了一个fiddle(目标是创建一个类似谷歌的日历),也许可以作为如何做到这一点的建议。这与你想要的相去甚远,但也许你可以从中汲取一些想法。

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

CalendarDayEvent原型可以避免使用庞大的方法。例如,我可以删除呈现方法中的逻辑,以完全遵循MVC模式,从而简化开发。

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

祝你好运!