【Bubble】日付リストを「開始日と終了日を指定して」作成する方法

こんにちは！

EPICs株式会社です。

今回は、Bubbleで特定の開始日と終了日を設定し、その範囲の日付リストを作成する方法を解説します。

この方法を活用することで、RepeatingGroupで日付リストを表示したり、イベントやスケジュールの管理に役立ちます。

この機能を利用することで、以下のような用途に対応できます。

• RepeatingGroupで日付リストを一覧表示
  • 例：イベントAの開催期間が 2025年1月7日～2025年3月30日 の場合、その範囲の日付を一覧表示する。
• データベースの締め日や Date Time Picker の値を利用して日付表を作成
  • 例：締め日をDBに保存し、選択した開始日・終了日から範囲の日付リストを作成。

実装イメージ

実装手順

以下の手順で実装します。

1. プラグイン「Date & Time Toolkit」をインストール

Bubbleのプラグインストアから 「Date & Time Toolkit」 を検索し、インストールします。

2. SplitDateRanges エレメントをページに配置

Bubbleのエディターで 「SplitDateRanges」 エレメントをページに追加します。

3. SplitDateRanges の設定

SplitDateRanges のプロパティを以下のように設定します。

• Start Date/Time：開始日（ユーザーの入力やDBの値をセット）
• End Date/Time：終了日（ユーザーの入力やDBの値をセット）
• Step Units：days（日単位でリストを作成）
• Steps：1（1日ずつ増加）

4. RepeatingGroup で日付リストを表示

RepeatingGroup を作成し、データソースに SplitDateRanges のDate List を設定。

• Type of content：Date
• Data source：SplitDateRanges A’s Date List
• CellにTextエレメントを配置し、Current cell’s Dateを表示

これで、指定範囲の日付リストをRepeatingGroupに表示できるようになります。

まとめ

Bubbleの 「Date & Time Toolkit」 プラグインを活用することで、簡単に開始日と終了日を指定し、その範囲の日付リストを作成できます。

スケジュール管理やイベント表示など、幅広い用途に応用できるため、ぜひ活用してみてください！