# カレンダー上での書式（文字色）変更

**URL:** <https://community.cybozu.dev/t/topic/1728>\
**Category:** kintone 開発相談\
**Created:** [2014 年 5 月 27 日午前 9:31 UTC](https://community.cybozu.dev/t/topic/1728 "2014-05-27T09:31:44Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1488](https://avatars.discourse-cdn.com/v4/letter/l/47e85d/32.png) [@Legacy\_Account1488](https://community.cybozu.dev/u/Legacy_Account1488)\
**Post date:** [2014 年 5 月 27 日午前 9:31 UTC](https://community.cybozu.dev/t/topic/1728/1 "2014-05-27T09:31:44Z")

</div>

[cybozu.com](http://cybozu.com) developer network ＞ サンプル ＞ kintone JavaScript API の「レコード一覧でステータスに応じて書式を設定する」を参考にカスタマイズを行っているのですが、一覧の表示形式がカレンダーの場合に書式設定が行われません。

コードは以下のように実装しているのですが、カレンダーではkintone.app.getFieldElements がとれないようです。  
カレンダー形式では、書式設定はできないのでしょうか？

* * *

kintone.events.on(‘app.record.index.show’, function (event) {  
// レコード一覧の表示時にフィールド値の条件に応じて、文字色、フィールドの背景色を変更する  
var elStatus = kintone.app.getFieldElements(‘title’);  
for (var i = 0; i \< elStatus.length; i++) {  
var record = event.records[i];

// タイトルに「test」が含まれていたら、文字色を赤く  
if (record[‘title’][‘value’].indexOf(“test”) \>= 0) {  
elStatus[i].style.color = ‘red’;  
elStatus[i].style.fontWeight = ‘bold’;  
} else {  
elStatus[i].style.color = ‘black’;  
elStatus[i].style.fontWeight = ‘normal’;  
}  
}  
});

---

<div class="post-metadata">

**Author:** ![Legacy\_Account616](https://avatars.discourse-cdn.com/v4/letter/l/b5e925/32.png) [@Legacy\_Account616](https://community.cybozu.dev/u/Legacy_Account616)\
**Post date:** [2014 年 5 月 27 日午前 10:52 UTC](https://community.cybozu.dev/t/topic/1728/2 "2014-05-27T10:52:03Z")

</div>

Ami Yamada様、はじめまして  
cstapの落合です。

残念ながらカレンダービューではkintone.app.getFieldElementsをご利用できないようです。

kintoneが対応するのを待つ方が得策かと思いますが、どうしても必要な場合は下記のように無理やりやることも可能です。  
しかし、バージョンアップにより動かなく可能性もありますので、あまりお勧めはできません。

(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に「test」が含まれていたら、文字色を赤く  
if (ele.textContent.indexOf(“test”) \>= 0) {  
ele.style.color = ‘red’;  
ele.style.fontWeight = ‘bold’;  
} else {  
ele.style.color = ‘black’;  
ele.style.fontWeight = ‘normal’;  
}  
}  
});  
})();

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1488](https://avatars.discourse-cdn.com/v4/letter/l/47e85d/32.png) [@Legacy\_Account1488](https://community.cybozu.dev/u/Legacy_Account1488)\
**Post date:** [2014 年 5 月 28 日午前 12:56 UTC](https://community.cybozu.dev/t/topic/1728/3 "2014-05-28T00:56:39Z")

</div>

落合さま  
回答ありがとうございます。やはり現状ではフィールド要素はとれないのですね。

カレンダーに表示しているフィールドであれば、教えていただいた方法で実装できました。  
ご指摘のように将来的に動かなくなる可能性があること、タイトルで表示させていない（textContentでは取ってこられない）フィールドの値での表示切替ができないことから、kintone 側で対応していただけるのが一番よいのですが、とりあえずの回避策としてこの方法での検討を進めてみます。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account616](https://avatars.discourse-cdn.com/v4/letter/l/b5e925/32.png) [@Legacy\_Account616](https://community.cybozu.dev/u/Legacy_Account616)\
**Post date:** [2014 年 5 月 28 日午前 1:38 UTC](https://community.cybozu.dev/t/topic/1728/4 "2014-05-28T01:38:48Z")

</div>

タイトルで表示させていないフィールドの値での表示切替をすることも、無理やりやればできます。  
しかし、この場合のコードはナンセンスというかスマートではないというか・・・かなり汚いコードでしか実現できそうにないのでさらにお勧めできません。

方法としては、上記のコードのfor文内を以下のような流れに変更すれば可能かと思います。

・eleの内容(6:34 PM test)から時間情報を取得  
・eleの先祖要素の\<td class=“calendar-cell-gaia tue-calendar-gaia” id=“2014-05-27-calendar-gaia”\>から日付情報を取得  
・日時を作成  
・event.recordsから日時(&タイトル)の一致するレコードを取得  
・レコード情報が指定の条件に一致すれば、ele.styleを変更

どうしても必要な場合は、参考になさってください。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1363](https://avatars.discourse-cdn.com/v4/letter/l/a88e4f/32.png) [@Legacy\_Account1363](https://community.cybozu.dev/u/Legacy_Account1363)\
**Post date:** [2014 年 5 月 28 日午前 1:46 UTC](https://community.cybozu.dev/t/topic/1728/5 "2014-05-28T01:46:43Z")

</div>

Ami Tamada様

> タイトルで表示させていない（textContentでは取ってこられない）フィールドの値での表示切替ができないことから

具体的なコードは書きづらいのですが、落合さんが書かれたコード内にあるclass  
“cellitem-value-gaia”  
の５階層上位に、

id=“2014-05-28-calendar-gaia”

というような日付で始まるid要素があります。これは日付毎のセルにつけられたidですが、プログラム側で予め条件にあった要素を特定しておき、各日付内の何番目の要素の書式を変更する、というような処理も書けなくはないと思います。

カレンダー形式の場合に app.record.index.show イベントで取れるレコードの形式は、以下のページに記載されています。

[https://developers.cybozu.com/ja/kintone-api/apprecindex-showjsapi.html](https://developers.cybozu.com/ja/kintone-api/apprecindex-showjsapi.html)

■eventオブジェクトのプロパティ（PC用）  
records  
viewType が calendar の場合はキーを日付文字列、値をレコードオブジェクトの配列としたオブジェクト。  
例)  
{  
“2013-12-01”: [record1, record2],  
“2013-12-20”: [record1]  
}

上記のレコード情報より、書式を変更したいものの判定を行った上で、日付及びその中の何番目かという情報を変数に持っておき、例えば

document.getElementById(‘2014-05-28-calendar-gaia’);

のような形でid要素を指定し、その５階層下の何番目の要素の書式を変更する、というようなプログラムが書けると思います。

私は書式変更はしたことないのですが、なんらかのデータが存在する日付の日付部分の文字列にリンクを張り、それを押すと、その日のデータだけが絞りこまれた通常の一覧画面に遷移するようなカスタマイズをしたことがあります。

もちろんここに書いた内容も将来的に動かなくなる可能性があるものですので、十分にお気をつけ下さい。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1488](https://avatars.discourse-cdn.com/v4/letter/l/47e85d/32.png) [@Legacy\_Account1488](https://community.cybozu.dev/u/Legacy_Account1488)\
**Post date:** [2014 年 5 月 28 日午前 1:55 UTC](https://community.cybozu.dev/t/topic/1728/6 "2014-05-28T01:55:24Z")

</div>

落合さま

たびたびありがとうございます。  
JavaScript 初学者なので、とても参考になります。  
確かにその方法ならとれそうです、が、文章で読んだだけでも無理矢理感がすごいですね。  
どうしても！ということになった時のための手段として、覚えておきたいと思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1488](https://avatars.discourse-cdn.com/v4/letter/l/47e85d/32.png) [@Legacy\_Account1488](https://community.cybozu.dev/u/Legacy_Account1488)\
**Post date:** [2014 年 5 月 28 日午前 2:21 UTC](https://community.cybozu.dev/t/topic/1728/7 "2014-05-28T02:21:13Z")

</div>

斎藤さま

詳しいご説明をどうもありがとうございます。  
cellitem-value-gaia の上に、calendar-cell-gaia があることを確認しました。  
書式変更の対象となるかどうかの判定を先に済ませておいて、カレンダー上に表示されている各日の calendar-cell-gaiaを取得 → 書式設定 という流れでいけそうですね。  
教えていただいたページも拝見しました。調べていた時に見落としていたようなので、とても助かりました。ありがとうございます。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1792](https://avatars.discourse-cdn.com/v4/letter/l/b5ac83/32.png) [@Legacy\_Account1792](https://community.cybozu.dev/u/Legacy_Account1792)\
**Post date:** [2018 年 3 月 22 日午前 10:24 UTC](https://community.cybozu.dev/t/topic/1728/8 "2018-03-22T10:24:13Z")

</div>

こちらを参考に作成してみたのですが、複数条件時の書き方がわかりませんでした。  
カレンダーのタイトルに「AA」を含む場合は赤、「BB」を含む場合は青、「CC」を含む場合は緑、それ以外は黒、としたいです。

(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(“AA”) \>= 0) {  
ele.style.color = ‘red’;  
ele.style.fontWeight = ‘bold’;  
}  
if (ele.textContent.indexOf(“BB”) \>= 0) {  
ele.style.color = ‘blue’;  
ele.style.fontWeight = ‘bold’;  
}  
if (ele.textContent.indexOf(“CC”) \>= 0) {  
ele.style.color = ‘green’;  
ele.style.fontWeight = ‘bold’;  
} else {  
ele.style.color = ‘black’;  
ele.style.fontWeight = ‘normal’;  
}  
}  
});  
})();

上記だと、一番最後の「CC」は条件が適用されるのですが、「AA」や「BB」は色がelseの場合と判断され、黒の表示になってしまいます。

初心者となり初歩的な質問となりますが、アドバイスいただけないでしょうか。  
よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2962](https://avatars.discourse-cdn.com/v4/letter/l/d26b3c/32.png) [@Legacy\_Account2962](https://community.cybozu.dev/u/Legacy_Account2962)\
**Post date:** [2022 年 10 月 31 日午前 11:04 UTC](https://community.cybozu.dev/t/topic/1728/9 "2022-10-31T11:04:51Z")

</div>

モバイル版でカレンダービューのタイトルの色を変えたいのですが、、、

(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に「test」が含まれていたら、文字色を赤く  
if (ele.textContent.indexOf(“test”) \>= 0) {  
ele.style.color = ‘red’;  
ele.style.fontWeight = ‘bold’;  
} else {  
ele.style.color = ‘black’;  
ele.style.fontWeight = ‘normal’;  
}  
}  
});  
})();

を参考にやってみたのですが、上手くいきません。

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

を

|

var eles = document.getElementsByClassName(“gaia-mobile-v2-app-index-calendar-table-cell-body-list-item”);

ではだめですね。初心者のため行き詰っています。ご教授お願いいたします。

&nbsp;

|

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 6 月 3 日午前 6:22 UTC](https://community.cybozu.dev/t/topic/1728/10 "2024-06-03T06:22:50Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。