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

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

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

info.event.extendedProps.location 是 FullCalendar 中的自訂欄位

info.event.extendedProps.location 是 FullCalendar 中的自訂欄位，意思是說：

你可以在建立事件時，除了標準的欄位（如 title, start, end），還能加上你自己額外需要的資訊，這些資料就會被包在 extendedProps 裡。

🔍 什麼是 extendedProps？

它是 FullCalendar 提供的一個「容器」，讓你加入任何你想要的額外欄位，不影響原本功能。
例如：地點、說明、講者、費用、分類代碼等都可以放進去。

✅ 什麼時候用到？

你會用到 extendedProps 的情境包括：

情境 欄位內容 用法範例
活動地點 location extendedProps.location = "教室 B2"
活動說明 description 在 Modal 彈窗顯示詳細描述
活動主辦人 host 可以過濾出某個主辦人的活動
活動類型 type = "會議" 或 "旅遊" UI 中可以不同顏色呈現

✅ 建立活動時加入自訂欄位

1
2
3
4
5
6
7
8
9
const event = {
  title: '考試',
  start: '2025-05-01T10:00',
  extendedProps: {
    location: '台北101',
    description: '期中考，記得帶學生證'
  }
}
calendar.addEvent(event)

✅ 點擊活動時讀取自訂欄位

1
2
3
4
5
6
eventClick(info) {
  const location = info.event.extendedProps.location
  const desc = info.event.extendedProps.description

  alert(`活動地點：${location}\n說明：${desc}`)
}

是否要我幫你修改目前的程式碼，加入 location 欄位的功能？（可在表單新增一格輸入欄）