使用Google日曆Feed的簡單日曆預定顯示

Question

我想在網站上顯示使用Google日曆Feed的只讀月日曆。所有在Google日曆中有事件的日子都會在網站日曆上顯示爲突出顯示的日期。 jQuery UI Datepicker能夠很好地工作嗎？還是有更簡單的日曆？

Answer 1

我用jQuery的UI日期選擇器和谷歌日曆API的V3事件列表（播放與API here）。我不會展示一個有效的例子，因爲我想讓我的api密鑰保密。

我顯示日期選擇器內聯和風格與默認（箭頭）光標，它看起來像一個靜態的日曆。 Google日曆以json的形式返回事件，並使用它的「beforeShowDay」函數將它們應用到日期選擇器中的相關日期。

我需要了解一些有關Google日曆Feed的信息。

我使用了「singleEvents = true」選項，因此任何重複事件都會返回所有日期。

我使用「fields = items」選項只返回相關數據（如摘要和日期）以提高性能。

我用「timeMin」和「timeMax」選項來指定要返回的日期範圍（我使用的是在今天的日期之前和之後一年計算的日期）。谷歌預計這些日期的格式爲：「yyyy-mm-ddT00：00：00 + 00：00」。

在返回的json中，變量「start.date」和「end.date」中找到全天事件日期，但對於所有日期事件，結束日期是第二天！如果事件不是全天，那麼您需要在「start.dateTime」和「end.dateTime」變量中查找日期。

使用谷歌的V3 api的一個原因是，不像V2，它會返回事件顏色（在colorId變量中） - 但顏色不是十六進制值，它只是一個整數，你必須轉換，所以有意義的東西。