トップ > CCI > kintoneカレンダーに土日祝日を強調表示するようにしてみた

kintoneカレンダーに土日祝日を強調表示するようにしてみた

CCI Kintone kintone

はじめに

はじめまして。kintone認定アソシエイトのY.HAMADAです。今回はkintoneアプリのカレンダー形式に祝日表示と土日祝日強調表示をカスタマイズする方法について紹介します。

カレンダー形式とは？

カレンダー形式の欄にレコードが表示できる機能です。標準機能は今日のみ強調表示されます。

今回のカスタマイズをすると表示がこんな感じになります。土日祝日が強調表示され見やすくなりますね。ではカスタマイズをはじめましょう。

アプリを追加する

アプリはサクッと作りたいのでkintoneアプリストアからカレンダー形式のあるアプリを利用します。今回は「イベント(サイボウズLiveデータ参照用)」を選択しアプリを作成します。

日本の祝日ライブラリを取得する

祝日一覧を１つ１つ作成するのは手間なので、今回は祝日を扱うライブラリの「holiday_jp-js」を利用します。日付の期間を渡すとその期間内にある祝日を返却します。

var holiday = holiday_jp.between(new Date("2020-05-01"),new Date("2020-05-05"))
console.log(holiday)
//▼(3)[{…}, {…}, {…}]
//0: {date: Sun May 03 2020 09:00:00 GMT+0900 (日本標準時), week: "日", week_en: "Sunday", //name: "憲法記念日", name_en: "Constitution Memorial Day"}
//1: {date: Mon May 04 2020 09:00:00 GMT+0900 (日本標準時), week: "月", week_en: "Monday", //name: "みどりの日", name_en: "Greenery Day"}
//2: {date: Tue May 05 2020 09:00:00 GMT+0900 (日本標準時), week: "火", week_en: "Tuesday", name: "こどもの日", name_en: "Children's Day"}

ライブラリを利用するためにファイルダウンロードをします。
https://github.com/holiday-jp/holiday_jp-jsにアクセスし、「Raw」をクリックします。

ページが表示されたあとに右クリックをして「名前を付けて保存」を選択します。保存先を指定し「保存」を選択します。

土日祝日の強調表示カスタマイズを実装する

こちらがカスタマイズの全体像となります。

(function() {
   "use strict";
   // レコード一覧画面が表示された後に発生するイベント
   kintone.events.on("app.record.index.show", async function(e) {
    // カレンダー表示機能以外は祝日表示の対応をしない
    if(e.viewType != "calendar") {
       return e;
    };
    
    // 土曜日を強調表示する
    document.querySelectorAll(".calendar-cell-gaia.sat-calendar-gaia,.calendar-weekday-sat-gaia").forEach(el=>{
        el.style.backgroundColor = "#eff9ff"
        el.style.color = "#bedeef";
    });
    // 日曜日を強調表示する
    document.querySelectorAll(".calendar-cell-gaia.sun-calendar-gaia,.calendar-weekday-sun-gaia").forEach(el=>{
        el.style.backgroundColor = "#fff0ea";
                el.style.color = "#ef8a63";
    });

    // 祝日に名称追加と強調表示する
    document.querySelectorAll(".calendar-cell-gaia").forEach(el=>{
        var d = el.id.match(/\d{4}-\d{2}-\d{2}/)[0];
        var holidays = holiday_jp.between(new Date(d) ,new Date(d));
        if(holidays.length > 0){
            // 祝日の名称を追加する
            el.querySelector("span").innerText += ' ' + holidays[0].name;
            // 祝日を強調表示にする 
            el.style.backgroundColor = "#fff0ea";
            el.style.color = "#ef8a63";
        } 
    });

    return e;
   });
})();


こちらを全てコピーしてファイルに保存します。保存するときの文字コードはUTF-8にしてください。

kintoneアプリにファイルを取り込む

祝日ライブラリと土日祝日強調表示のカスタマイズのファイル２つをkintoneのアプリに設定します。kintoneのレコード一覧画面の右上あるアプリ歯車アイコンをクリックします。

「設定」タブをクリックし、「JavaScript/CSSでカスタマイズ」をクリックします。

PC用JavaScriptファイルにある「アップロードして追加」をクリックし、ファイルを選択してアップロードします。そのあとに「保存」をクリックします。

最後に設定を反映させるため「アプリを更新」をクリックします。これで設定はすべて完了です。

確認するとカレンダー表示が変わりましたね。

1点気を付けていただきたいのが、今回のカスタマイズはkintoneのclass属性を使用しています。

kintoneで使われているid/class属性について
各要素に付与されているid/class属性の値は、予告なく変更されることがあります。また、DOM構造についても変更されることがあります。カスタマイズをされる際は、id/class属性の値やDOM構造を変更するカスタマイズを加えないようご注意ください。

引用：kintone JavaScript コーディングガイドライン

こちらの記載の通りkintoneのアップデートされると、今回のカスタマイズが動作しなくなる場合があります。ご認識の上ご利用ください。