こんにちは！
EPICs株式会社です。
今回は、Bubbleで特定の開始日と終了日を設定し、その範囲の日付リストを作成する方法を解説します。
この方法を活用することで、RepeatingGroupで日付リストを表示したり、イベントやスケジュールの管理に役立ちます。
この機能を利用することで、以下のような用途に対応できます。
- RepeatingGroupで日付リストを一覧表示
- 例：イベントAの開催期間が 2025年1月7日～2025年3月30日 の場合、その範囲の日付を一覧表示する。
- データベースの締め日や Date Time Picker の値を利用して日付表を作成
- 例：締め日をDBに保存し、選択した開始日・終了日から範囲の日付リストを作成。
目次
実装イメージ
実装手順
以下の手順で実装します。
- プラグイン「Date & Time Toolkit」をインストール
- SplitDateRanges エレメントをページに配置
- SplitDateRanges の設定を行う
- RepeatingGroup で日付リストを表示
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」 プラグインを活用することで、簡単に開始日と終了日を指定し、その範囲の日付リストを作成できます。
スケジュール管理やイベント表示など、幅広い用途に応用できるため、ぜひ活用してみてください！
