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

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

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

按鈕並不會在格子中

你觀察得很準確！🧐
dateClick 裡的 info.dayEl 預設是整個日期格的 td 元素，但 FullCalendar 6.x 的 DOM 結構變得比較嚴謹，它不會讓你直接在格子 (td) 裡加東西，因為裡面是用內部的 div 結構組成的。

✅ 解決方式：把按鈕加到 info.dayEl.querySelector('.fc-daygrid-day-frame') 裡！

你可以這樣改 👇：

1
const cellEl = info.dayEl.querySelector('.fc-daygrid-day-frame')

然後再 appendChild(button) 就可以把按鈕放進格子裡了 ✅

🔧 修正後的程式片段（重點部分）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
dateClick: function (info) {
  // 移除之前的按鈕
  document.querySelectorAll('.add-event-button').forEach(btn => btn.remove())

  // ✅ 找到格子中可插入的 div
  const cellEl = info.dayEl.querySelector('.fc-daygrid-day-frame')

  // 建立按鈕
  const button = document.createElement('button')
  button.textContent = '新增活動'
  button.className = 'add-event-button'
  button.style.marginTop = '5px'
  button.style.fontSize = '12px'

  // 加入 click 功能
  button.onclick = () => {
    alert(`你點了 ${info.dateStr}，這裡可以打開活動編輯表單！`)
  }

  // ✅ 加到 cell 裡面
  if (cellEl) {
    cellEl.appendChild(button)
  }
}

👀 額外補充：為什麼不能加在 info.dayEl？

因為 info.dayEl 是 td，HTML 裡不允許隨便把 <button> 放進 <td> 直接加的結構會被瀏覽器忽略或錯誤解析。FullCalendar 把顯示用的內容放在一層叫 .fc-daygrid-day-frame 的 div 裡，我們就插在這裡就對了 ✅

需要我幫你做成點了按鈕之後顯示輸入欄位嗎？我們可以一步步加上：

  • 活動名稱
  • 開始時間（用 datetimepicker）
  • 儲存按鈕（寫入 localStorage）

你想接下來做哪一步？😄