使用Google日历Feed的简单日历预订显示

Question

我想显示一个只读月份日历，显示使用Google日历Feed的网站上的预留日期。在谷歌日历中有活动的所有日子都会在网站日历上显示为突出显示的日期。 jQuery UI Datepicker可以很好地适用于此，还是有更简单的日历？

Answer 1

我使用了jQuery UI datepicker和google calendar api V3事件列表（使用api here）。我不会展示一个有效的例子，因为我想把我的api密钥保密。

我使用默认（箭头）光标显示内联和样式的日期选择器，使其看起来像静态日历。 Google日历会在json中返回事件，并使用其“beforeShowDay”函数将它们应用于datepicker中的相关日期。

我需要了解一些有关Google日历Feed的信息。

我使用了“singleEvents = true”选项，因此任何重复事件都会返回所有日期。

我使用“fields = items”选项仅返回相关数据（如摘要和日期）以提高性能。

我使用“timeMin”和“timeMax”选项来指定要返回的日期范围（我使用的日期是在今天日期之前和之后的一年计算的）。 Google希望这些日期的格式如下：“yyyy-mm-ddT00：00：00 + 00:00”。

在返回的json中，全天事件日期可在变量“start.date”和“end.date”中找到，但对于所有日期事件，结束日期是第二天！如果事件不是全天，那么您需要在“start.dateTime”和“end.dateTime”变量中查找日期。

使用谷歌V3 api的一个原因是，与V2不同，它会返回事件颜色（在colorId变量中） - 但颜色不是十六进制值，它只是一个你需要转换的整数，所以有意义。