kintoneを利用している方から標準機能のカレンダーを印刷して
スケジュールの確認用として社内の掲示板に張りたいということで
kintone - サイボウズのビジネスアプリ作成プラットフォーム
新しいアプリを作成して、カレンダーページを設けました。
ここで一つ問題発生。
同じ日にスケジュールが4件以上あると、3件目以降のスケジュールが折りたたまれて、
印刷をしても表示されなくなる。
これだと冒頭の要件を満たさないということで、
JavaScriptでカスタマイズして
同日のスケジュールを全件表示を実装しました。
対応方法は、
はじめにカレンダーに表示している文字列のカラムの設定を開き、
フィールドコードを日本語の文字列から半角英数字の文字列に変更します。
今回は「title」にしました。
続いて、アプリの設定にあるJavaScript / CSSでカスタマイズを開き、
Cyboze CDNのjQueryと自作したJSファイルをアップロードする。
自作したJSのコードは下記の通り。
jQuery.noConflict(); (function($) { "use strict"; //一覧ページで実行されるイベント kintone.events.on("app.record.index.show", function(e) { //カレンダー 4件以上でスケジュールが折りたたまれてしまう仕様を回避 //一覧をカレンダーにした時だけ読み込まれるようにする if($(".calendar-gaia").length > 0){ var records = e.records; for (var date in records){ var cnt = records[date].length; if(cnt > 3){ //一旦リストの表示個所を空文字にする var $div = $("#" + date + "-calendar-gaia").find(".calendar-cell-body-gaia"); $div.html(""); //リストを再生成 var $ul = $("<ul>"); $ul.addClass("calendar-cell-body-list-gaia"); for (var i = 0; i < cnt; i++) { var rec = records[date][i]; var $li = $("<li>"); $li.addClass("calendar-record-gaia cellitem-singlelinetext-gaia"); //rec.$idでレコードID、rec.titleでタイトル用のカラムにアクセス $li.html("<a href=\"/k/4/show#record=" + rec.$id.value + "\"><span class=\"cellitem-value-gaia\">" + rec.title.value + "</span></a>"); $ul.append($li); } //空文字にした個所に再生成したリストを挿入する $div.append($ul); } } } }); })(jQuery);
以上の対応で、
この用に同じ日に4件以上のスケジュールが表示されるようになった。
関連記事