# カレンダーでの空き枠メッセージの表示

**URL:** <https://community.cybozu.dev/t/topic/5725>\
**Category:** kintone 開発相談\
**Created:** [2022 年 2 月 14 日午前 5:09 UTC](https://community.cybozu.dev/t/topic/5725 "2022-02-14T05:09:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2812](https://avatars.discourse-cdn.com/v4/letter/l/71e660/32.png) [@Legacy\_Account2812](https://community.cybozu.dev/u/Legacy_Account2812)\
**Post date:** [2022 年 2 月 14 日午前 5:09 UTC](https://community.cybozu.dev/t/topic/5725/1 "2022-02-14T05:09:38Z")

</div>

&nbsp;

お世話になっております。

&nbsp;

カレンダー形式のアプリを作成し、

宅配カレンダーとして宅配の空き枠を表示させたいのですが、

カスタマイズ一覧を作らなくても作成できる方法はありますでしょうか。

&nbsp;

下記の通りコーディングしてみたのですが、

一日最大３件までしか表示されないという考慮を忘れており、

最大３件を超えたレコードは「その他XX件」と表示されるため

その他の件数を空き枠の計算に含めることができません。

&nbsp;

①日付のヘッダーを取得し、メッセージ表示用の要素を追加する

②登録しているレコードのタイトルに午前午後が表示されるため、

表示している午前午後を取得し、

宅配可能枠を最大３件として、登録されたレコードを引き算する

③結果を午前午後の可能枠とし、表示する

⇒表示されているレコードしか計算されない、

一日表示件数３件を超えた場合のレコードは計算されない。

```
(function () {

    "use strict";

    // カレンダービュー

    kintone.events.on('app.record.index.show', function (event) {

        // カレンダービューの表示時にフィールド値の条件に応じて、文字色、フィールドの背景色を変更する

        var eles = document.getElementsByClassName("cellitem-value-gaia");

        for (var i = 0, il = eles.length; i < il; i++) {

            var ele = eles[i];

            // eleに「〇〇」が含まれていたら、文字色を変更

            if (ele.textContent.indexOf("XXX") >= 0) {

                ele.style.backgroundColor = '#FFCC66';

                ele.style.color = 'black';

            } else if (ele.textContent.indexOf("YYY") >= 0) {

                ele.style.backgroundColor = '#FF99FF';

                ele.style.color = 'black';

            } else if (ele.textContent.indexOf("ZZZ") >= 0) {

                ele.style.backgroundColor = '#CC99FF';

                ele.style.color = 'black';

                //宅配NG 灰色 #808080

            } else if (ele.textContent.indexOf("宅配NG") >= 0) {

                var ngday = ele.parentElement.parentElement.parentElement.parentElement.parentElement;

                ngday.style.backgroundColor = '#808080';

                ele.style.color = 'red';

                ele.style.fontWeight = 'bold';

            }

        }

        //日付横に可能枠の表示

        //ヘッダー

        var headEles = document.getElementsByClassName("calendar-cell-header-gaia");

        // 右上のプラスマーク

        var plusEles = document.getElementsByClassName("calendar-cell-header-date-gaia");

        var lists = document.getElementsByClassName("calendar-cell-body-list-gaia");

        for (var j = 0, jl = headEles.length; j < jl; j++) {

            var headEle = headEles[j];

            var plusEle = plusEles[j];

            var amNum = 0;

            var pmNum = 0;

            // 各日の登録数を取得

            var list = lists[j];

            for (var k = 0, kl = list.children.length; k < kl; k++) {

                var listlen = list.children[k].innerText;

                if (listlen.indexOf('午前') != -1) {

                    amNum++;

                } else if (listlen.indexOf('午後') != -1) {

                    pmNum++;

                }

            }

            // 各日の可能枠

            var am = 3 - amNum;

            var pm = 3 - pmNum;

            // 各日の可能枠メッセージ

            var textAM = " AM:" + am;

            var textPM = " PM:" + pm;

            var textTXT = " 可能枠";

            //宅配NGは可能枠表示しない

            if (list.textContent.indexOf("宅配NG") >= 0) {

                textAM = "";

                textPM = "";

                textTXT = "";

            }

            // 追加する要素を作成します

            //固定メッセージ

            var newtxtElement = document.createElement("span");

            var newtxtContent = document.createTextNode(textTXT);

            newtxtElement.appendChild(newtxtContent);

            newtxtElement.setAttribute("id", "textSpan");

            //AM可能枠メッセージ

            var newamElement = document.createElement("span");

            var newamContent = document.createTextNode(textAM);

            newamElement.appendChild(newamContent);

            newamElement.setAttribute("id", "amSpan");

            //PM可能枠メッセージ

            var newpmElement = document.createElement("span");

            var newpmContent = document.createTextNode(textPM);

            newpmElement.appendChild(newpmContent);

            newpmElement.setAttribute("id", "pmSpan");

            // 右上プラスマークの前隣に午後を追加

            headEle.insertBefore(newpmElement, plusEle.nextSibling);

            // 右上プラスマークの前隣に午前を追加

            headEle.insertBefore(newamElement, plusEle.nextSibling);

            // 右上プラスマークの前隣に固定メッセージを追加

            headEle.insertBefore(newtxtElement, plusEle.nextSibling);

        }

    });

})();

```

ご教授いただければ幸いです。

以上、よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2022 年 2 月 25 日午前 8:34 UTC](https://community.cybozu.dev/t/topic/5725/2 "2022-02-25T08:34:39Z")

</div>

関石さん

こんにちは。

&nbsp;

不可能ではないと思いますが、DOMでその他部分のレコードを取るのは骨が折れると思います。

代替案としてAPIでGETする方法を記載します。

実際に動作確認したものではないため、流れだけの説明になります。ご了承ください。

&nbsp;

①表示月のレコードを全てAPIでGETする。

②GETしたレコード群から日別にAM・PMに振り分けた文字列strを作る。

③各日のセル(td)のidは「2022-02-01-calendar-gaia」のように日付が含まれているため  
1日から順にdocument.getElementByIdでtdを取得し、表示テキストを文字列strで上書きする。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2812](https://avatars.discourse-cdn.com/v4/letter/l/71e660/32.png) [@Legacy\_Account2812](https://community.cybozu.dev/u/Legacy_Account2812)\
**Post date:** [2022 年 3 月 9 日午前 9:23 UTC](https://community.cybozu.dev/t/topic/5725/3 "2022-03-09T09:23:27Z")

</div>

[koichi](https://community.cybozu.dev/hc/ja/profiles/900225082446-koichi)さま

&nbsp;

ご教授いただきありがとうございました。

初心者質問で申し訳ありませんが、

表示月のレコードのapiをGETするためのパラメータの書き方がわからなく、

躓いてしまいました。

ぜひご教授いただければ幸いです。

&nbsp;

以上、よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2022 年 3 月 11 日午前 2:26 UTC](https://community.cybozu.dev/t/topic/5725/4 "2022-03-11T02:26:07Z")

</div>

関石さん

&nbsp;

GETについては以下を参照ください。

[レコードの一括取得（クエリで条件を指定）](https://community.cybozu.dev/hc/ja/articles/202331474-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%8F%96%E5%BE%97-GET-#:~:text=%E3%82%B3%E3%83%94%E3%83%BC%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F-,%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E4%B8%80%E6%8B%AC%E5%8F%96%E5%BE%97%EF%BC%88%E3%82%AF%E3%82%A8%E3%83%AA%E3%81%A7%E6%9D%A1%E4%BB%B6%E3%82%92%E6%8C%87%E5%AE%9A%EF%BC%89,-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E3%82%AF)

[レコード一覧のクエリ文字列を取得する（オプション付き）](https://community.cybozu.dev/hc/ja/articles/201942004#:~:text=%E3%82%B0%E3%83%A9%E3%83%95%E7%94%BB%E9%9D%A2-,%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E3%81%AE%E3%82%AF%E3%82%A8%E3%83%AA%E6%96%87%E5%AD%97%E5%88%97%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%EF%BC%88%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E4%BB%98%E3%81%8D%EF%BC%89,-%E7%8F%BE%E5%9C%A8%E9%96%8B%E3%81%84%E3%81%A6%E3%82%8B)

&nbsp;

以下は書き方の一例です。

```
var body = {
'app': kintone.app.getId(), // 自アプリ
'query': kintone.app.getQuery(), // 現在のレコード絞り込み条件（指定したい条件があればクエリを記載）
'fields': ['レコード番号', '日時', 'ドロップダウン'] // 取得したフィールドを記載
};

kintone.api(kintone.api.url('/k/v1/records.json', true), 'GET', body, function(resp) {
// 成功時
  console.log(resp);

// 以下にカレンダー各セルのテキスト変更処理を記載

}, function(error) {
// 失敗時
  console.log(error);
});

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2812](https://avatars.discourse-cdn.com/v4/letter/l/71e660/32.png) [@Legacy\_Account2812](https://community.cybozu.dev/u/Legacy_Account2812)\
**Post date:** [2022 年 3 月 18 日午前 8:19 UTC](https://community.cybozu.dev/t/topic/5725/5 "2022-03-18T08:19:42Z")

</div>

[koichi](https://community.cybozu.dev/hc/ja/profiles/900225082446-koichi)さま

初歩的な質問で申し訳ありませんでした。

実装することができました。

APIでレコードを取得し、表示月のレコードを計算し、

可能枠として表示をすることができました。

ご教授いただきありがとうございました。