2025-01-24 JavaScript 系列八：第4課 ── 行事曆應用程式-步驟14

發表於 更新於 分類於 閱讀次數：
2025-01-24 JavaScript 系列八：第4課 ── 行事曆應用程式-步驟14

2025-01-24 JavaScript 系列八：第4課 ── 行事曆應用程式-步驟14

FullCalendar 在建立事件時，會自動把 start 字串轉成 Date 物件

這是一個非常棒的問題，顯示你對資料處理過程有深入的思考！

✅ 你的觀點沒錯：

你說得對——localStorage 儲存的本來就是字串型別（例如 "2025-05-05T09:00"），如果你在讀取事件時就保持字串型式（不轉成 Date 物件），的確可以避免轉來轉去產生的時區問題。

💡 但為何仍常看到「轉成 Date 物件」的作法？

這是因為 FullCalendar 在建立事件時，會自動把 start 字串轉成 Date 物件，例如：

1
2
3
4
calendar.addEvent({
  title: '活動',
  start: '2025-05-05T09:00' // ✅ 你給它字串，它會自動變成 Date 物件
})

所以你之後在 eventClick 裡取得的 event.start 就變成一個 Date 物件了，而不是原本的字串。

❗結果導致比較錯誤：

你：

1
e.start === event.start // 錯！型別不同：e 是字串，event.start 是 Date

FullCalendar：

1
event.start → Date 物件

你的 localStorage：

1
e.start → 字串

✅ 最簡解法：

你可以保留字串比對，但要記得把 event.start（Date 物件）手動格式化為字串再來比，例如：

1
e.start === formatDateLocal(event.start)

🎯 你可以選兩種策略之一：

✅ 方法 A：保留 Date → 再手動比對字串（推薦）

最安全、兼容 FullCalendar 的使用方式：

1
2
3
4
5
6
7
function deleteEventFromLocalStorage(event){
  const events = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []
  const updatedEvents = events.filter(e => {
    return !(e.title === event.title && e.start === formatDateLocal(event.start))
  })
  localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedEvents))
}

✅ 方法 B：完全不轉成 Date，只用字串操作

這樣你就不能用 event.start（因為是 Date），而是要自己從 localStorage 保留原始格式進行比對，但這比較難整合 FullCalendar 的行為，因為它會「自動」轉成 Date。

✅ 總結

做法 優點 缺點
A. 轉成 Date 再手動格式化 跟 FullCalendar 完全兼容，格式可控 要手動格式化、比較麻煩
B. 保留字串不轉 最直觀，資料單純 不適合 FullCalendar 的自動 Date 行為

你希望我幫你重寫成方法 A 的最終版本嗎？