🦀

FullCalendar v5¦背景色/ イベントの色変更などなどのカスタマイズ

2022/03/18に公開

やりたいこと

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("日", "");
}

表示させる月の範囲を設定する

ヘッダーに下記のようにprevnextを設定している場合

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