kintoneを利用している方から標準機能のカレンダーを印刷して

スケジュールの確認用として社内の掲示板に張りたいということで

kintone - サイボウズのビジネスアプリ作成プラットフォーム


kintone_cal_show


新しいアプリを作成して、カレンダーページを設けました。


ここで一つ問題発生。


kintone_cal_show1


同じ日にスケジュールが4件以上あると、3件目以降のスケジュールが折りたたまれて、

印刷をしても表示されなくなる。


これだと冒頭の要件を満たさないということで、

JavaScriptでカスタマイズして


kintone_cal_show2


同日のスケジュールを全件表示を実装しました。



対応方法は、

はじめにカレンダーに表示している文字列のカラムの設定を開き、


kintone_cal_show3


フィールドコードを日本語の文字列から半角英数字の文字列に変更します。

今回は「title」にしました。


続いて、アプリの設定にあるJavaScript / CSSでカスタマイズを開き、


kintone_cal_show4


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);

以上の対応で、


kintone_cal_show2


この用に同じ日に4件以上のスケジュールが表示されるようになった。


関連記事

kintoneで指定の個所だけ印刷範囲にしてみる