iT邦幫忙

0

Day 10|把日期時間整理成 Google Calendar 可使用的事件格式

  • 分享至 

  • xImage
  •  

一、今天的學習目標
前面已經完成 /add 指令的基本驗證,包含:
日期格式
時間格式
日期是否存在
時間是否合法
不能建立過去的行程

今天的目標是把已經驗證好的資料,整理成 Google Calendar 之後可以使用的格式。
主要要完成:
開始時間 startDateTime
↓
結束時間 endDateTime
↓
calendarEvent

二、今天完成的功能
目前使用者輸入:
title:吃晚餐
date:20261121
time:1200

程式會先整理成:
日期:2026-11-21
時間:12:00

接著組成開始時間:

const startDateTime =
    `${formattedDate}T${formattedTime}:00`;

最後得到:
2026-11-21T12:00:00

這是之後 Google Calendar 可以使用的日期時間格式。

三、自動建立結束時間
目前 /add 只有讓使用者輸入開始時間,還沒有讓使用者另外輸入結束時間。
所以我先設定每個行程預設為 1 小時。
const endDate = new Date(eventDate);

endDate.setHours(endDate.getHours() + 1);

例如:
開始:12:00
結束:13:00

JavaScript 也可以自動處理跨日。
例如:
2026-11-21 23:30
↓
加一小時
↓
2026-11-22 00:30

接著把 endDate 的年月日時分重新取出:

const endYear = endDate.getFullYear();

const endMonth =
    String(endDate.getMonth() + 1).padStart(2, '0');

const endDay =
    String(endDate.getDate()).padStart(2, '0');

const endHour =
    String(endDate.getHours()).padStart(2, '0');

const endMinute =
    String(endDate.getMinutes()).padStart(2, '0');

最後重新組成:

const endDateTime =
    `${endYear}-${endMonth}-${endDay}T${endHour}:${endMinute}:00`;

結果:
startDateTime:2026-11-21T12:00:00
endDateTime:2026-11-21T13:00:00

四、建立 calendarEvent
開始時間和結束時間都準備完成後,就可以把資料整理成一個 Google Calendar 事件物件。

const calendarEvent = {
    summary: title,

    start: {
        dateTime: startDateTime,
        timeZone: 'Asia/Taipei'
    },

    end: {
        dateTime: endDateTime,
        timeZone: 'Asia/Taipei'
    }
};

這裡:
summary → 行程名稱
start → 開始時間
end → 結束時間
timeZone → 時區

因為目前使用的是台灣時間,所以設定:
timeZone: 'Asia/Taipei'

五、遇到的問題與解法
今天在測試 endDate 時,Terminal 一開始顯示:2026-11-21T05:00:00.000Z
https://ithelp.ithome.com.tw/upload/images/20261008/20184393QbKXEoLAEC.png
成功加入行程後,終端機回傳的卻是跟我預計開始的時間相同
https://ithelp.ithome.com.tw/upload/images/20261008/2018439373EEwIDRcA.png

原本以為時間算錯,但後來發現最後的 Z 代表 UTC。
台灣時間是:
UTC + 8

所以:
UTC 05:00

台灣 13:00

時間本身沒有錯,只是顯示方式不同。
另外今天也用到:
padStart(2, '0')

它可以把:
9

補成:
09

讓日期和時間維持固定格式。

六、測試結果
新增過去的時間:
輸入2025年3月21日的時間
https://ithelp.ithome.com.tw/upload/images/20261010/20184393QY7rJ5Jyee.png
如預期跳出「無法建立過去的行程」
https://ithelp.ithome.com.tw/upload/images/20261010/20184393eAMBvSRZul.png

新增未來的行程

https://ithelp.ithome.com.tw/upload/images/20261010/20184393Pw9qHyfnPg.png

目前 /add 的流程變成:
輸入 title / date / time
↓
驗證資料
↓
產生 startDateTime
↓
產生 endDateTime
↓
加入 Asia/Taipei
↓
建立 calendarEvent

目前還沒有真的把資料送進 Google Calendar。
七、今天的心得
今天比較明顯理解到,使用者輸入的資料和 API 真正需要的資料格式不一定相同。
Discord 裡輸入:
20261121
1200

對使用者比較方便。
但程式最後需要整理成:
2026-11-21T12:00:00

並且還要補上開始時間、結束時間和時區。
所以目前整個流程其實是:
使用者輸入
↓
驗證
↓
整理格式
↓
建立事件資料
↓
之後再送給 Google Calendar API


*提醒邦友,使用第三方服務/API 時,請務必評估資安風險與隱私保護
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言