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

發表於 閱讀次數：
2025-01-15 JavaScript 系列八：第4課 ── 行事曆應用程式-步驟06

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

當點選 ellEl ，那格的背景要變成淺灰色

你可以在 dateClick 裡對 cellEl 加上一個 class（例如 selected-day），然後在 CSS 裡定義這個 class 的背景色為淺灰色。

同時，記得在點擊新的一格時，要先清掉所有舊的 .selected-day class，以免多格同時高亮。

✅ 改好的 JS 部分（加上背景變色）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
dateClick(info) {
  console.log(info.dayEl.outerHTML)

  // 移除舊按鈕
  document.querySelectorAll('.add-event-button').forEach(btn => btn.remove())

  // 移除舊的背景選擇
  document.querySelectorAll('.selected-day').forEach(el => {
    el.classList.remove('selected-day')
  })

  const cellEl = info.dayEl.querySelector('.fc-daygrid-day-frame')
  if (!cellEl) return

  // ✅ 加上背景色的 class
  cellEl.classList.add('selected-day')

  // 建立按鈕
  const button = document.createElement('button')
  button.className = 'add-event-button'
  button.innerHTML = `<span class="text">新增活動</span><span class="icon">➕</span>`

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

  cellEl.appendChild(button)
}

✅ CSS 部分加上背景樣式（仍使用 :deep()）

1
2
3
4
5
/* 點選日期格背景變淺灰 */
:deep(.selected-day) {
  background-color: #f0f0f0 !important;
  transition: background-color 0.3s ease;
}

這樣就完成了 ✅
👉 當你點選某天格子，該格會變淺灰，同時顯示「新增活動」按鈕
👉 點別的格子會移除之前的淺灰色，只留下目前的高亮格

需要進一步加「取消選取」或「點第二下取消選擇」嗎？可以再加上判斷邏輯～