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

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

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

下一步:
點擊行事曆內的活動，可以刪除活動。請使用 javascript 內建的 confirm 函式，確認「是否刪除此筆活動？」後刪除

很好！你現在要實作的功能是：
👉 點擊行事曆內的活動，跳出 confirm，確認後刪除活動，並從 localStorage 移除

✅ 第一步：加入 eventClick 事件處理

在你初始化 FullCalendar 的 new Calendar(...) 裡，新增：

1
2
3
4
5
6
7
eventClick(info) {
  const confirmed = confirm(`是否刪除活動「${info.event.title}」？`)
  if (confirmed) {
    info.event.remove() // ✅ 從行事曆上移除
    deleteEventFromLocalStorage(info.event) // ✅ 自 localStorage 移除
  }
}

✅ 第二步：新增 deleteEventFromLocalStorage 函式

在 <script setup> 裡的 saveEventToLocalStorage() 下方，加上這段：

1
2
3
4
5
6
7
8
9
10
function deleteEventFromLocalStorage(event) {
  const events = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []

  // 依照 title 和 start 完全比對
  const updatedEvents = events.filter(e => {
    return !(e.title === event.title && e.start === event.start)
  })

  localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedEvents))
}

✅ 完整位置說明

1
2
3
4
5
6
7
8
9
10
11
12
calendar = new window.FullCalendar.Calendar(calendarRef.value, {
  ...
  events: loadEventsFromLocalStorage(),
  dateClick(info) { ... },
  eventClick(info) {       // ✅ ← 加這裡
    const confirmed = confirm(`是否刪除活動「${info.event.title}」？`)
    if (confirmed) {
      info.event.remove()
      deleteEventFromLocalStorage(info.event)
    }
  }
})

要我幫你一起加一個「活動刪除成功」的提示嗎？💡