2024年8月20日(火) 17:00
技術情報カレンダーの土日の背景色を変更する方法
予約画面の予約日指定画面で、カレンダーの土曜日と日曜日の背景色を変更する方法です。
1. 管理画面の「デザイン管理」を選択
2. テンプレートの編集で、編集したい画面から「画面のスタイルシート」を選択
3. 末尾に以下のテキストを追記
※ #EDC4B7、#DBE988の部分はカラーコードです。カラーコードサイトなどを参考に適宜変更してください。
※ 週別カレンダーの場合は、ヘッダの色が差し替わります。
1. 管理画面の「デザイン管理」を選択
2. テンプレートの編集で、編集したい画面から「画面のスタイルシート」を選択
3. 末尾に以下のテキストを追記
/* 日曜日の配色を変更する */
.calendar .sunday {background-color:#EDC4B7 !important;}
td.day0 {background-color: #EDC4B7 !important;}
td.day-select.day0:hover {opacity:0.8 !important;}
/* 土曜日の配色を変更する */
.calendar .saturday {background-color: #DBE9BB !important;}
td.day6 { background-color: #DBE9BB !important;}
td.day-select.day6:hover {opacity:0.8 !important;}
.calendar .sunday {background-color:#EDC4B7 !important;}
td.day0 {background-color: #EDC4B7 !important;}
td.day-select.day0:hover {opacity:0.8 !important;}
/* 土曜日の配色を変更する */
.calendar .saturday {background-color: #DBE9BB !important;}
td.day6 { background-color: #DBE9BB !important;}
td.day-select.day6:hover {opacity:0.8 !important;}
※ #EDC4B7、#DBE988の部分はカラーコードです。カラーコードサイトなどを参考に適宜変更してください。
※ 週別カレンダーの場合は、ヘッダの色が差し替わります。