FullCalendar v5¦背景色/ イベントの色変更などなどのカスタマイズ
やりたいこと
FullCalendarのv5を使用したのですが、結構手こずったのでわかる範囲でまとめました。
環境
- FullCalendar 5.10.1
const calendar = new FullCalendar.Calendar(document.getElementById("calendar"), {
events: events
// 略
});
calendar.render();
で表示しています。
表示
月表示で1日などの日の文字を消す
dayCellContent: function (e) {
e.dayNumberText = e.dayNumberText.replace("日", "");
}
表示させる月の範囲を設定する
ヘッダーに下記のようにprev
とnext
を設定している場合
headerToolbar: {
left: "prev,next,today",
center: "title"
},
どのくらいの期間を表示させるかはvalidRange
で設定します。
validRange
へ渡す値ですが2022-3-1
とかだと表示設定が全く効かなくなるので2022-03-01
とハイフン付きで年月日は8桁文字列で渡してください。
function showPrevDateRange(today) {
const year = today.getFullYear();
const month = today.getMonth() + 1;
const isLastYear = month - 1 === 0 ? true : false;
const isNextYear = month + 3 > 12 ? true : false;
return [
(isLastYear ? year - 1 : year) + "-" + dateZeroPadding(isLastYear ? 12 : month - 1) + "-01",
(isNextYear ? year + 1 : year) + "-" + dateZeroPadding(isNextYear ? month - 12 + 3 : month + 3) + "-01",
];
}
function dateZeroPadding(date) {
return ("0" + date).slice(-2);
}
ひと月前の01日に設定することでprev
はひと月前
3ヶ月後の01日に設定することでnext
は2ヶ月先まで表示できます。
const today = new Date();
const dateRanges = showPrevDateRange(today);
// 略
validRange: {
start: dateRanges[0],
end: dateRanges[1],
},
過去の日付をグレーアウトする
今日が3/18の場合に画像のようにしたいとき
これは方法がよくわからなかったので、eventsにグレーアウトした期間と色を入れることにしました。(もっと簡単なやり方があるなら教えていただきたいです...🥺)
前項の「前後いつまでの月を表示させるか」のshowPrevDateRange()
で表示させる過去の開始日を作成しているのでそれを使います。
const backgroundParams = backgroundColorParams(today, dateRanges[0]);
events.push(backgroundParams);
dateRanges[0]
がshowPrevDateRange()
で作成したカレンダーに表示させる過去の開始日
function backgroundColorParams(today, start) {
return {
start: start,
end: today.getFullYear() + "-" + dateZeroPadding(today.getMonth() + 1) + "-" + dateZeroPadding(today.getDate()),
display: "background",
color: "#d7d7d7"
};
}
そのほかの表示設定
events: events,
aspectRatio: 1.1, // 月表示の際に各日付枠のhightの変更
navLinks: true, // 月表示で日付を押すと日付表示へ遷移する
slotEventOverlap: false, // 週や日表示で同一時間帯のイベントがある場合、イベントが重なって表示されなくなる
dayMaxEvents: true, // trueにすると月表示の際のイベントの数が曜日セルの高さに制限されイベントが多い場合は+more表記でpopoverで表示される 5未満にしたい場合は数値を指定する
allDaySlot: true, // 週や日表示で終日が表示される
showNonCurrentDates: false, // 月表示で先月や来月の日にちが表示されなくなる
locale: "ja",
timeZone: "Asia/Tokyo",
longPressDelay: 0, // タッチできるデバイスで表示してる場合の設定。ないなら0でいいような...
イベントの設定
start/endで時間を指定しないと上にあるラベルのようになり、時間を指定すると下にある時間表示になるようです。
ドキュメント読めば書いてあるのですがurl
を渡しておくとリンクになってくれます。「9時 予約」にurlを渡してみました。大変便利👏
イベントを押すとモーダルウィンドウが開くようにする
fc-h-event
というクラスでイベントかどうか判断できます。
eventClick: function (info) {
if (info.el.classList.contains("fc-h-event")) {
showEventDialog(info); // モーダルウィンドウの関数
}
}
fc-h-event
は週や日表示だと終日に当たる部分で、週や日表示の時間にあるイベントをクリックしてもモーダルは開きません、、、
週や日表示の時間にあるイベントをクリックした場合もモーダルを開きたい場合は
-
fc-v-event
クラスがあること -
info.event._def.url
がないこと
を確認してください。
eventClick: function (info) {
if (info.el.classList.contains("fc-v-event") && !info.event._def.url) {
showAnotherDialog(info.event._def); // モーダルウィンドウの関数
}
},
日付の選択
過去の日付を押せないようにする
選択した日付が過去かどうかはfc-day-past
というクラスがあるかないかで判断できます。
dateClick: function (info) {
if (info.dayEl.classList.contains("fc-day-past")) {
alert("選択できません。");
return;
}
}
今日の日付を押せないようにする
今日かどうかはfc-day-today
というクラスがあるかないかで判断できます。fc-day-past
と両方判定すると今日含む過去の日付を選択できなくできます。
dateClick: function (info) {
if (info.dayEl.classList.contains("fc-day-past") || info.dayEl.classList.contains("fc-day-today")) {
alert("選択できません。");
return;
}
}
イベントの外を押すとモーダルウィンドウが開くようにする
イベント以外の部分を押した場合に何かしらの動作をさせたい場合はfc-daygrid-event
でないことを確認すると可能です。
dateClick: function (info) {
if (info.dayEl.classList.contains("fc-daygrid-event") != true) {
showDialog(info.date); // モーダルウィンドウの関数
}
}
表示方法のアレンジ
イベントの色をそれぞれ変えたい
上段は色を指定していない状態、下は色を指定している状態です。
color
を設定してイベントに文字列でrgb
あるいはrgba
あるいは16進数の色コード
を渡すと指定した色にできました。
events.push(
Object.assign(class.calendar, {
color: "rgb(83, 187, 195)"
})
);
あとは普通にFullCalendar.Calendar
内でevents: events
してみてください。
🎩 🎩 🎩
実装してる時は難しい...わからん...なんだこれは...( ´~` )となるのですが、まとめてみるとそうでもないしライブラリよく読めよってなります(この繰り返し)
ただできると感慨深いですね〜こういうところがプログラミングの面白いところだな〜と日々思います( '֊' )
Discussion