【PowerApps】Plannerをガントチャートみたいに表示したい②

前回：powerappsでガントチャートアプリを作成してみる | サクサク仕事

完成イメージ
日付の部品
- 準備
- 月単位での表示（月初から月末まで）

完成イメージ

まずはガントチャートイメージ。
エクセルのガントチャートを持ってきました。イメージはこんな感じ。

月単位で表示して、タスク一覧と期間に線を引きます。

日付の部品

日付の表示部分を考えてみます。
次の3パターンくらいがあるかなと思います。

月単位での表示（月初から月末まで）
週単位で表示（日曜日から土曜日まで）
選択期間を表示

それぞれのパターンの部品の処理を考えていきます。
ほかにほしいパターンなどがあればコメント教えてください。

準備

いずれのパターンでも基準日が必要なので、「日付の選択」コントロールを配置します。
参考に基準日は2025年4月2日にしました。

このコントロールの下に、エクセルみたいなセルが横に配置されるのをイメージします🤔
下の画像は、エクセルの画像を張り付けたイメージです。

月単位での表示（月初から月末まで）

月単位での表示を考えるにあたって、考える順番は以下の通りです。

基準日から月初日を計算
月初日から月末日を計算
月初日と月末日の差を計算
3で計算した日数分レコードを準備して、レコードの日付を計算していく

4のギャラリーにレコードを追加していくのが少し難しいですかね😅

1.月初日の計算

月初日は、次の関数で計算できます。どのやり方がよいのか知っている方がいたら教えてください。

Date(Year(基準日.SelectedDate),Month(基準日.SelectedDate),1)

Date関数を利用して、必要な引数のうち、「年」と「月」を基準日コントロールの選択した日付から、「日」は固定で1を設定しました。

DateAdd(基準日.SelectedDate,1-Day(基準日.SelectedDate),TimeUnit.Days)

DateAdd関数を利用して、基準日コントロールの選択した日付から、月初日までの日数を引く計算をしました。

DateAdd(EOMonth(基準日.SelectedDate,-1),1,TimeUnit.Days)

EOMonthを利用して、前月末日を計算し、その結果にDateAddで1日足して計算しました。

（参考）
Date、DateTime、Time 関数 – Power Platform | Microsoft Learn
DateAdd、DateDiff、および TimeZoneOffset 関数 – Power Platform | Microsoft Learn
EDate 関数と EOMonth 関数 – Power Platform | Microsoft Learn

2.月末日の計算

月末日の計算は、次の関数で計算できます。

EOMonth(基準日.SelectedDate,0)

EOMonthの第二引数に0を設定することで、基準日の月末日が計算できます。

ちなみに計算して出そうと思うと下の式になります。

DateAdd(DateAdd(DateAdd(基準日.SelectedDate,1-Day(基準日.SelectedDate),TimeUnit.Days),1,TimeUnit.Months),-1,TimeUnit.Days)

翌月の月初日を計算して、その日付から1日遡る計算をします。

3.月初日と月末日の差を計算

月初日と月末日の差を計算（ギャラリーのレコード数）

DateDiff(DateAdd(EOMonth(基準日.SelectedDate,-1),1,TimeUnit.Days),EOMonth(基準日.SelectedDate,0))+1

DateDiff関数を利用して、日付の差を計算します。
DateDiff関数だけだと、4/30-4/1で単純に差の29日が出てしまうため、今回は結果に1を足しています。それで、基準日のある月の日数が計算できます。

4.3で計算した日数分レコードを準備して、レコードの日付を計算していく

日数分ギャラリーにレコードを追加するためには、Sequence関数を利用します。
（参考）Sequence 関数 – Power Platform | Microsoft Learn

その前に、まずは水平ギャラリーを追加します。水平ギャラリーでレコードが横に並んでいくイメージを再現します。
コントロールの名前を「水平ギャラリー」にしておきます。（名前はなんでもよいです。）

レコード内に既定で入っている画像など不要なものを削除して、一つだけラベルコントロールを追加します。
コントロールの名前を水平ギャラリー日付にしておきます。（名前はなんでも・・・）

ラベルコントロールの位置・サイズなどを調整します。
X：0、Y：0、幅：40、高さ：30

次に水平ギャラリーコントロールの調整を行います。
テンプレートのサイズ：40、幅：適当
罫線などは調整してください。

ここまでで下準備完了です。
水平ギャラリーのItemsを以下の式に変更します。

// 月内の日数分繰り返し処理
ForAll(
    // 月内の日数分、0から1ずつ加算する
    Sequence(DateDiff(DateAdd(EOMonth(基準日.SelectedDate,-1),1,TimeUnit.Days),EOMonth(基準日.SelectedDate,0))+1,0,1),
    // Sequenceの結果の数値を、月初日に足す
    DateAdd(DateAdd(EOMonth(基準日.SelectedDate,-1),1,TimeUnit.Days),
    Value,
    TimeUnit.Days)
)

水平ギャラリー日付コントロールのTextに以下の式に変更します。

Text(ThisItem.Value,"m/d")

一応解説するとForAllで繰り返しているのは、Sequence関数で作成された数字のリストです。
この数字のリストは、基準日の属する月の日数分繰り返して、0から始まり、1ずつ増えます。
この作成された、0から月末日付までの数字をForAllの第二引数で月初日に対して加算しています。
月初日+0日,月初日+1日,月初日+2日…..のような感じです。
それをギャラリー内のラベルで表示しています。ThisItem.Valueでもよいのですが、今回は幅がないため、Text関数で表示形式を変更しています。

（参考）Text 関数 – Power Platform | Microsoft Learn

これで、水平ギャラリーに日付が入っていくと思います。