Motionboardでカレンダーアイテムを重ねて非稼働日を灰色に

# はじめに
カレンダーアイテムって見た目もよくていい感じ。
何を集計項目にして値を表示するか悩ましい。たとえば日々の日々の収支を見える化したり、その日に何を何回作業したかをみたり、いろいろできるかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/1dee4c7e-4219-49c7-16ab-9d9beddffe0a.png)　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/91840935-3e2d-fcbd-f3f1-9828e8fc3716.png)


で、ユーザにこのアイテムの利用例を見せに行ったら、「予定立案するのに、稼働日も入れてほしいなー」と無茶ぶりされたので、やってみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/aa9b799e-52ec-7c63-9114-66b95df08a0c.png)

# 稼働日データの用意
うちの場合、会社の稼働日データが社内のDBで公開されており、Motionboardでそのテーブルを幸いにも差しに行かせてもらえてるので、とってもハッピー。これがない場合は、どうにかして最新の稼働日データを常に参照できるように努めましょう。
表示にあたっては、あまり過去のデータがあっても邪魔なので、検索条件で1年以内のものを参照するようにしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/ddce53f9-107a-230f-1aaa-30fc2ebfcdfe.png)

このデータを元にデータソース定義を作ります。と言っても、行項目に日付、集計項目に稼働/非稼働のデータを入れるだけです。稼働なら1、非稼働なら0とかのデータにして、集計項目で合計値を表示させればよいかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/c5616c07-7f60-af24-e8ab-9b7dd9bd1ced.png)

# 稼働日カレンダーアイテムの作成

つぎに、先程のデータソースをもとにカレンダーアイテムを作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/fac45849-b52e-9f3d-1416-d221dce6540c.png)

アイテムプロパティはこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/b06e4439-0291-c556-b458-cdb3cb26fffd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/2f58307a-2f17-3d5f-56eb-c7aa1974df98.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/f895147f-c6cc-c99c-5277-f53c32ac4905.png)

ポイントは、あえてメニューバーを表示しないところです。
初期値にシステム変数を入れてます。あとで解説します。
パネルは「シンプル」にして、0なら灰色、1なら白になるように設定します。
どうせ0か1しかないので、間は何色でもいいです。

# メインのカレンダーアイテムを上に重ねる

次に、上に本来表示したいカレンダーアイテムを重ねます。ぴったり重ねてください。
このとき、上に重ねるカレンダーアイテムの背景色は透明スライダーをめいいっぱい左にして透明にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/96677ab6-d1bd-239b-f6bb-cb2632de511c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/80ed8677-5ff9-f4b1-c651-dfebb8fa0c14.png)
また、初期値は先程と同様にシステム変数を入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/74abbf0c-eb97-af36-890a-7d327a41b39b.png)

# 重ねた2つのカレンダーの表示月を切り替えたい

初期値にシステム変数を入れてましたが、別に例えば${today}のように今日を表示させて、月の表示は切替させないのであればこれで完了です。お疲れさまでした。
が、「先月とか来月とかも見たいんですけど」といわれたとき、もしメニューバーを表示させていたとしても、表面のカレンダーの月だけ動いて、後ろのカレンダーは元のままです。
ので、メニューバーを使わずに月を切り替えれるように、入力アイテムとボタンアイテムを使い、以下の動作を実現します
- 2つのカレンダーに設定した初期値を変更する
- カレンダーアイテムをリロード

# ボタンと入力アイテムの作成
ボタンアイテムを作り、カレンダーアイテムをリロードするアクションを設定してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/cdee0900-dfee-9ced-b5e9-c3180db70baf.png)

つぎに、コンボボックスで、以下のようなアイテムを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/7f0cf1f6-caf6-7276-365c-403a2a6af005.png)
ここで、日付に関するシステム変数を使っています。意味は察してください。
これで、**"表示自体は「YYYY/MM」"**なんだけど、その項目を選択したら、**"「YYYY/MM/DD」の値がシステム変数に設定した変数に保存される"**という動作になります。
この値を、カレンダーアイテムの初期値として設定し、かつアイテムをリロードすればその日に移り変わる、という算段です。
コンボボックスで、それぞれの値が選択されたときに動作するボタンに、先ほど作成した、アイテムリロードのボタンを設定すればOKです

ちなみに私は、関連しそうな日付に関するシステム変数をこれでもかっというぐらいユーザーシステム変数で定義しています。みなさんの所の方がもっと色んな定義されてるでしょうか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/6f36be3e-2984-084f-e79f-3ddf706e2d35.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/c2e0bdab-413f-038b-33fb-ec7713a211e5.png)

# 配置する
あとはボタンを最背面に隠すなどして、入力アイテムをいい感じに設置しておしまいです。
上下とものカレンダーアイテムが更新されるかどうか試してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/96677ab6-d1bd-239b-f6bb-cb2632de511c.png)

# おしまい
こんなことで困ってる人、私ぐらいしかいなくない…？
わざわざ自慢げに書くことでもないし…。
活性化のために。