こんにちは！
EPICs株式会社です。
今回は、Bubbleで特定の開始日と終了日を設定し、その範囲の日付リストを作成する方法を解説します。
この方法を活用することで、RepeatingGroupで日付リストを表示したり、イベントやスケジュールの管理に役立ちます。
この機能を利用することで、以下のような用途に対応できます。
- RepeatingGroupで日付リストを一覧表示
- 例：イベントAの開催期間が 2025年1月7日～2025年3月30日 の場合、その範囲の日付を一覧表示する。
- データベースの締め日や Date Time Picker の値を利用して日付表を作成
- 例：締め日をDBに保存し、選択した開始日・終了日から範囲の日付リストを作成。
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
EPICs株式会社の特徴
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
ざっくりの課題でも
プロが無料で提案
プロが無料で提案
目次
実装イメージ
実装手順
以下の手順で実装します。
- プラグイン「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」 プラグインを活用することで、簡単に開始日と終了日を指定し、その範囲の日付リストを作成できます。
スケジュール管理やイベント表示など、幅広い用途に応用できるため、ぜひ活用してみてください！
