# カレンダー：日付のグレーアウト

**URL:** <https://www.nocode-faq.com/t/topic/4197>\
**Category:** bubble\
**Created:** [2024 年 4 月 1 日午前 2:46 UTC](https://www.nocode-faq.com/t/topic/4197 "2024-04-01T02:46:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fujikobu071](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/fujikobu071/32/8285_2.png) [@fujikobu071](https://www.nocode-faq.com/u/fujikobu071)\
**Post date:** [2024 年 4 月 1 日午前 2:46 UTC](https://www.nocode-faq.com/t/topic/4197/1 "2024-04-01T02:46:42Z")

</div>

現在作成しているWEBアプリにて、カレンダーのページがあります。  
そのカレンダーにて「表示している当月以外の日にちはグレーアウト」にしたいのですがうまくいかず困っている状況です。  
恐れ入りますが、どなたかお力添えしていただけますと幸いです。

＜前提条件＞  
・repeating group  
・calendar tool  
を使用

＜発生している問題＞  
プレビューで、当月のみの日付グレーアウトはできる状態。  
**カレンダーの月を変更するとグレーアウトが連動しない。**  
→月変更をした際も、グレーアウトできる設定がわからない状況です

＜スクリーンショット＞  
現在のconditional設定

 ![日付のグレーアウト](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/9/925f7d33a15c81350097f403c75f51e9780f7cf1.png)

---

<div class="post-metadata">

**Author:** ![hiroshi00vx](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/hiroshi00vx/32/8292_2.png) [@hiroshi00vx](https://www.nocode-faq.com/u/hiroshi00vx)\
**Post date:** [2024 年 4 月 1 日午前 4:42 UTC](https://www.nocode-faq.com/t/topic/4197/2 "2024-04-01T04:42:49Z")

</div>

現在の設定の場合、current date/timeを使用しているので、実際の日付（本日であれば2024年4月）と一致しない日付は全てグレーアウトとなってしまいます。

表示している月以外の日にちをグレーアウトとしたい場合は、current date/timeではなく、「選択している月と一致しない場合」という風に設定してあげればよいかと思います。

恐らくstateを用いてcarrender-toolに値を設定しているかと思いますので、steteの保存月（current page’month等）を代わりに設定することで解決するかと思います。

stateをどのような値でどの要素に保存しているかで設定が変わってきますが、上記でわかりますでしょうか？

---

<div class="post-metadata">

**Author:** ![fujikobu071](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/fujikobu071/32/8285_2.png) [@fujikobu071](https://www.nocode-faq.com/u/fujikobu071)\
**Post date:** [2024 年 4 月 1 日午前 5:44 UTC](https://www.nocode-faq.com/t/topic/4197/3 "2024-04-01T05:44:42Z")

</div>

[hiroshi00vx](https://www.nocode-faq.com/u/hiroshi00vx)さん

ご返信ありがとうございます！  
なるほど、state設定とconditional:「選択している月と一致しない場合」するのですね。

前回投稿のスクリーンショットではstate設定がわからないので、  
新たにスクリーンショットを撮ってきたました。  
現在のページ全体に、このstate設定をしています。  
こちらに新しいstateを加えるといった感じでしょうか。

 ![custom state](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/4b7425340fa4df82057acdaef2791884d42ebd4e.png)

---

<div class="post-metadata">

**Author:** ![fujikobu071](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/fujikobu071/32/8285_2.png) [@fujikobu071](https://www.nocode-faq.com/u/fujikobu071)\
**Post date:** [2024 年 4 月 1 日午前 5:57 UTC](https://www.nocode-faq.com/t/topic/4197/4 "2024-04-01T05:57:14Z")

</div>

[hiroshi00vx](https://www.nocode-faq.com/u/hiroshi00vx)さん

すみません、教えていただいた内容を参考に、  
ポチポチやっていたらできてしまいました・・・！

設定を実現するための考え方を丁寧に教えてくださってありがとうございました！
