calendar.js如何定制主題顏色

要定制 Calendar.js 的主題顏色，您需要遵循以下步驟：

1. 首先，確保您已在項目中正確引入并配置了 Calendar.js 庫。您可以從官方網站（https://www.calendarjs.org/）下載庫文件，或使用 CDN 鏈接。

2. 在您的 CSS 文件中，添加自定義樣式以覆蓋 Calendar.js 的默認樣式。您需要針對不同的組件（如事件、標題欄、背景等）設置顏色。例如：

/* 自定義事件顏色 */
.calendar-events .fc-event {
  background-color: #42a5f5;
  color: #ffffff;
}

/* 自定義標題欄顏色 */
.calendar-header {
  background-color: #42a5f5;
}

/* 自定義背景顏色 */
.calendar-container {
  background-color: #ffffff;
}

3. 如果您使用的是 Calendar.js 的預設主題，您可以通過修改主題配置來更改顏色。例如，如果您使用的是 bootstrap 主題，您可以在初始化 Calendar 時這樣配置：

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
  themeSystem: 'bootstrap',
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  events: [
    // 您的日歷事件數據
  ],
  colors: {
    primary: '#42a5f5',
    secondary: '#90caf9',
    background: '#ffffff',
    border: '#e0e0e0',
    text: '#212121'
  }
});

calendar.render();

在這個例子中，我們通過 colors 配置項設置了主題的主要顏色和其他相關顏色。您可以根據需要自定義這些值。

請注意，這些示例假設您使用的是 FullCalendar v5 或更高版本。如果您使用的是舊版本的 FullCalendar，請查閱相應版本的文檔以獲取有關如何定制主題顏色的信息。