![見出し画像](https://assets.st-note.com/production/uploads/images/89228642/rectangle_large_type_2_dab605ad63e1233be96e90bd50917977.png?width=1200)
PowerApps塾vol.8 カレンダーを作ろう③
こんにちは。aliceです。
AkiraさんのPowerApps塾8回目です。
前回のnoteはこちら
前回はこんなカレンダーを作成しました。
![](https://assets.st-note.com/img/1666043999610-IpqCIf7hfN.png?width=1200)
今回は、このカレンダーをバージョンアップさせます!
月を選択するアイコン(<、>)と、選んだ日付に○が入るようにします。
だいぶ使い勝手がよくなりますね。
![](https://assets.st-note.com/img/1666045557929-Ws9Vavqo2R.png?width=1200)
それでは、やっていきましょう。
変数を設定する
まずは、ViewScreenのOnVisible プロパティに変数を宣言します。
ViewScreenを表示したときは今日の日付になるようにします。
OnVisible=UpdateContext({locCalendarDay:Today()})
![](https://assets.st-note.com/img/1666044250912-GeTX0L4aPJ.png?width=1200)
変数を設定したので、他で使われてるToday()も変数に書き換えましょう。
galCarendar の中で使われている「Today()」を「locCarendarDay」に置換します。
![](https://assets.st-note.com/img/1666044473896-QyolQLbuMh.png?width=1200)
「検索して置換」を選択すると、一括で置換できるようになるので便利です。
![](https://assets.st-note.com/img/1666044548489-Wh5kNCeEna.png?width=1200)
置換できました。
![](https://assets.st-note.com/img/1666044621899-REHEarpSP4.png?width=1200)
アイコンを追加する
次に、月を選択するアイコンを追加します。
カレンダーのここの部分です。
これで月を選べますね😊
![](https://assets.st-note.com/img/1666044826398-aDy3bGjYPh.png?width=1200)
アイコンを設定してOnSelectプロパティに次のとおり設定します。
左側のアイコン(<)
OnSelect=UpdateContext({locCarendarDay : DateAdd(locCarendarDay,-1,Months) })
![](https://assets.st-note.com/img/1666045088212-K3rnXD6NGX.png?width=1200)
右側のアイコン(>)
OnSelect=UpdateContext({locCarendarDay : DateAdd(locCarendarDay,1,Months) })
![](https://assets.st-note.com/img/1666045119981-cBlTJl8gaU.png?width=1200)
いい感じに設置できました。
選択した日に○を付ける
今のままでは、どの日を選んでいるかパッとわかりませんよね。
ということで次は、どの日を選んでいるかわかるように選んだ日に○を付けていきます。
これだとすぐに9月25日を選択しているというのがわかります。
![](https://assets.st-note.com/img/1666045581566-a67SVFmzzY.png?width=1200)
オーサリングメニューの図形から円を挿入します。
円がいっぱい挿入されてびっくりします。
![](https://assets.st-note.com/img/1666045732852-TT4TrIPLJV.png?width=1200)
挿入した円のプロパティを次のとおり設定します。
背景色:透明
罫線の太さ:5
罫線の色:オレンジ
![](https://assets.st-note.com/img/1666045917429-dw0lw9wNut.png?width=1200)
見やすくなりました😊
![](https://assets.st-note.com/img/1666045776025-4TC37Ljui6.png?width=1200)
最後にVisibleプロパティをThisItem.IsSelectedにして、選択している箇所のみ〇印が出るようにします。
Visible = ThisItem.IsSelected
IsSelected構文は自分が選択されているかを確認するときに使います。
選択されているとき: True
選択されていないとき:False で返します。
![](https://assets.st-note.com/img/1666046067796-omtqnGef4X.png?width=1200)
アイコンも設置できました!
ラベルを変更する
最後にカレンダーのラベルを今日の月が表示されるように変更します。
ラベルのTextプロパティを次のとおり変更します。
Text = Text(locCalendarDay,"yyyy 年 m ⽉")
これで、いつでも今日の月が表示されるようになりました。
![](https://assets.st-note.com/img/1666046275434-5Sn5WI2Hnb.png?width=1200)
カレンダーはこれで終了です。
さくさくできるようになると簡単なのでしょうが、難しいです🥲
何事も復習が大事ですね。
つづく。
参考
たぐさんのnote
ちっぴさんのnote
この記事が気に入ったらサポートをしてみませんか?