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

はじめに

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

カレンダー形式とは?

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

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

アプリを追加する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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