Zenn
🐶

PowerAppsで1からカレンダーを作ってみる

2021/08/15に公開
Power Apps
Power Platform
tech

カレンダーページはありますが...

Power Apps勉強を始めたころ、画面の追加から、カレンダーページはあるけど、ホントにシンプルなものだけほしいが何を削除したらよいかわからなかったため、本当にシンプルなものを紹介します。

作成方法

キャンバスアプリの作成

タブレットで今回は作成しました。


Galleryの配置と基本データの格納

  1. Screen１に縦方向ギャラリーを作成
  2. Itemsに0~4までの数値のリストを記載します

    ▼コピペ用
[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19, 20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41]


折り返しの設定

ここで『折り返しの設定』に『7』を指定します。

7列作るイメージです。

サイズは適当に。。

Galleryのテンプレートの中にラベルを設定します


▼設定ポイント

  • 位置XとYはともに『0』に設定
  • Widthは『Parent.TemplateWidth』
  • Heightは『Parent.TemplateWidth』
  • Heightは『Parent.TemplateHeight』
  • Alignは『Align.Center』(中央寄せが見栄えがよいと思います)
  • フォントサイズは参考に


Screen表示時の設定

Screen1の『OnVisible』プロパティを下記のように設定します。

▼コピペ用

//_firstDayOfMonth 月初日を設定
Set(_firstDayOfMonth, Date(Year(Today()),Month(Today()),1));
//_firstDayOfMonth カレンダーに表示する最初の日を設定         
Set(_firstDayInView, DateAdd(_firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 2 + 1), TimeUnit.Days)); 
//_firstDayOfMonth 月末日を設定 ※使ってないのでなくても大丈夫        
Set(_lastDayOfMonth, DateAdd(DateAdd(_firstDayOfMonth, 1, TimeUnit.Months), -1, TimeUnit.Days));


ラベルの表示設定


▼コピペ用

Day(DateAdd(_firstDayInView,ThisItem.Value,TimeUnit.Days))


確認作業

トップページを作成

  1. Screen2を作成して、トップに移動します
  2. Buttonを作成して、そのOnSelectプロパティに『Navigation(Screen1)』を設定

実行して確認


2021年8月にテストしたため、1日始まりとなっております。


月と曜日を表示させる

月表示ラベルを配置


ラベルの『Text』プロパティに下記を設定

Text(_firstDayOfMonth,"yyyy年mm月")

曜日ギャラリーを配置

  1. Screen１に縦方向ギャラリーを追加
  2. 『Items』オプションに『日～土』の曜日表示を設定
  3. 『折り返しの設定』に『7』を指定
  4. Galleryにラベルを配置し、『Text』オプションに『ThisItem.Value』を設定

確認

下記のようなイメージとなる


表示月を前後させる

アイコンを追加

『＜』アイコンと『＞』を左右に配置し、
下記のように設定

▼Prevコピペ用

Set(_firstDayOfMonth, DateAdd(_firstDayOfMonth, -1, TimeUnit.Months));           
Set(_firstDayInView, DateAdd(_firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 2 + 1), TimeUnit.Days));

▼Nextコピペ用

Set(_firstDayOfMonth, DateAdd(_firstDayOfMonth, 1, TimeUnit.Months));           
Set(_firstDayInView, DateAdd(_firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 2 + 1), TimeUnit.Days));

確認

下記のようなイメージとなる

これで左右のギャラリーをクリックすると月の表示が変更されるはずです。


補足

▼他の設定

  • 選択日付が青になります
    ▼カレンダーギャラリーの『TemplateFill』プロパティに下記を設定
If(ThisItem.IsSelected,RGBA(0,0,150,0.2),RGBA(0,0,0,0))
  • 日土の日付を赤で表示
    ▼カレンダーギャラリー内の日付ラベルの『Color』プロパティに下記を設定
If(
    Or(
        Weekday(DateAdd(_firstDayInView,ThisItem.Value,TimeUnit.Days))=1,
        Weekday(DateAdd(_firstDayInView,ThisItem.Value,TimeUnit.Days))=7
    ),
    RGBA(255, 0, 0, 1),
    RGBA(0, 0, 0, 1)
)



下記のようになりましたでしょうか？？

Discussion