JavaScript 日曆事件處理：輕鬆生成 iCal、Google 及 Yahoo 日曆連結

身為開發者，我們常常需要處理日曆事件，特別是當網站或應用程式需要讓使用者將事件新增到他們的個人日曆時。這篇文章將介紹如何使用 JavaScript 來建立一個 Calendar 類別，讓您輕鬆生成 iCal 格式的事件資料，以及 Google Calendar 和 Yahoo Calendar 的連結。

為什麼需要自訂日曆事件處理？#

雖然現代瀏覽器大多支援 iCal 格式，但直接提供 .ics 檔案下載可能會影響使用者體驗。透過生成 iCal 格式的連結，使用者可以直接在瀏覽器中開啟事件，並選擇要新增到哪個日曆服務。

程式碼#

在下面的程式碼中，包括時間處理和程式碼的結構：

1
import moment from "moment";
2

3
/**
4
 * 產生日曆事件連結的工具類別
5
 */
6
export class Calendar {
7
  /**
8
   * @param {Object} event - 事件資訊
9
   * @param {String} event.DTSTART - 開始時間 (格式：YYYYMMDDTHHMMSSZ)
10
   * @param {String} event.DTEND - 結束時間 (格式：YYYYMMDDTHHMMSSZ)
11
   * @param {String} event.SUMMARY - 標題
12
   * @param {String} event.DESCRIPTION - 描述
13
   * @param {String} event.TZID - 時區 (例如：Asia/Taipei)
14
   */
15
  constructor(event) {
16
    this.event = {
17
      ...event,
18
      DTSTART: this.formatTime(event.DTSTART),
19
      DTEND: this.formatTime(event.DTEND)
20
    };
21
  }
22

23
  /**
24
   * 轉換時間格式
25
   * @param {String} time - 原始時間
26
   * @returns {String} - 轉換後的時間
27
   */
28
  formatTime(time) {
29
    return moment(time).utc().format("YYYYMMDDTHHmmss") + "Z";
30
  }
31

32
  /**
33
   * 產生 iCal 格式的文字
34
   * @returns {String} - iCal 格式的文字
35
   */
36
  generateICS() {
37
    const { DTSTART, DTEND, SUMMARY, DESCRIPTION, TZID } = this.event;
38
    const icsMSG = `BEGIN:VCALENDAR
39
VERSION:2.0
40
BEGIN:VEVENT
41
DTSTART;VALUE=DATE;TZID=${TZID}:${DTSTART}
42
DTEND;VALUE=DATE;TZID=${TZID}:${DTEND}
43
SUMMARY:${SUMMARY}
44
DESCRIPTION:${DESCRIPTION}
45
END:VEVENT
46
END:VCALENDAR`;
47
    return "data:text/calendar;charset=utf-8," + encodeURIComponent(icsMSG);
48
  }
49

50
  /**
51
   * 產生 Google Calendar 的連結
52
   * @returns {String} - Google Calendar 的連結
53
   */
54
  generateGoogleCalendarURL() {
55
    const { DTSTART, DTEND, SUMMARY, DESCRIPTION, TZID } = this.event;
56
    return `https://calendar.google.com/calendar/u/0/r/eventedit?dates=${DTSTART}/${DTEND}&text=${encodeURIComponent(SUMMARY)}&details=${encodeURIComponent(DESCRIPTION)}&ctz=${encodeURIComponent(TZID)}`;
57
  }
58

59
  /**
60
   * 產生 Yahoo Calendar 的連結
61
   * @returns {String} - Yahoo Calendar 的連結
62
   */
63
  generateYahooCalendarURL() {
64
    const { DTSTART, DTEND, SUMMARY, DESCRIPTION, TZID } = this.event;
65
    return `https://calendar.yahoo.com/?v=60&TYPE=20&VIEW=d&ST=${DTSTART}&ET=${DTEND}&TITLE=${encodeURIComponent(SUMMARY)}&desc=${encodeURIComponent(DESCRIPTION)}&vtz=${encodeURIComponent(TZID)}`;
66
  }
67
}

如何使用 Calendar 類別#

1
// 引入 Calendar 類別
2
import { Calendar } from './path-to-calendar';
3

4
// 定義事件資訊
5
const event = {
6
  DTSTART: '20240617T120000Z', // 開始時間 (格式：YYYYMMDDTHHMMSSZ)
7
  DTEND: '20240617T130000Z',   // 結束時間 (格式：YYYYMMDDTHHMMSSZ)
8
  SUMMARY: '會議',             // 標題
9
  DESCRIPTION: '團隊會議',     // 描述
10
  TZID: 'Asia/Taipei'          // 時區
11
};
12

13
// 建立 Calendar 實例
14
const calendar = new Calendar(event);
15

16
// 生成 iCal 連結
17
const icalLink = calendar.generateICS();
18
console.log('iCal 連結:', icalLink);
19

20
// 生成 Google Calendar 連結
21
const googleCalendarLink = calendar.generateGoogleCalendarURL();
22
console.log('Google Calendar 連結:', googleCalendarLink);
23

24
// 生成 Yahoo Calendar 連結
25
const yahooCalendarLink = calendar.generateYahooCalendarURL();
26
console.log('Yahoo Calendar 連結:', yahooCalendarLink);

現在，就有了三個連結：

icsLink：可以直接在瀏覽器中開啟 iCal 事件。
googleCalendarLink：在 Google Calendar 中新增事件。
yahooCalendarLink：在 Yahoo Calendar 中新增事件。

結論#

透過這個 Calendar 類別，可以更方便地處理日曆事件，讓使用者輕鬆地將事件新增到他們的日曆中。這不僅提升了使用者體驗，也讓網站更具互動性。

WARNING
使用注意事項：

在大部分的桌面瀏覽器中，點擊 iCal 連結會下載 .ics 檔案。

在 iOS 裝置上，點擊 iCal 連結可能會直接開啟行事曆應用程式，但有時也可能下載檔案。

在 Android 裝置上，點擊 iCal 連結通常會下載檔案。