こんにちは！Bubble標準のカレンダーであるCalendarエレメントを使っていて、もっと柔軟にカスタマイズしたいと思ったことはありませんか？ 本日は、「Calendar tool」プラグインとRepeating Groupを使って、カスタマイズしたカレンダーを表示する方法をご紹介します。
日付・時刻をカレンダー入力できるエレメントを追加するプラグインを紹介した記事がありますので、こちらもご覧ください！
今回利用するプラグイン「Calendar tool」
プラグインページ
以下がプラグインページです。作者はBrown Foxさんです。
インストール
左メニューのPluginsタブを選択し、「Add plugins」をクリックして、 Calendar tool プラグインを探してインストールします。 無料です。
使い方
準備
説明用に、Calendar-tool-page というページを作成しました。
表示したい日付を一時的に保存するために、ページにCustom Stateを作成します。 今回は、「CurrentMonth」という名前でdate型で作成しました。
また、初期値として現在の日付を設定するために、Workflowを追加します。 下記の図のように、Page is Loaded に、「Element Action」ー「Set State」で、 上記のCustom StateのValueに、「Current date/time rounded down to month 」を設定します。
Calendar Toolエレメントの配置と設定
エレメントに「Calendar Tool」が追加されるので、画面の適当な位置に配置します。 配置したエレメントを以下のように指定します。
Month Date: {ページ名}’s CurrentMonth
Time Date: YYYY/MM/DD
年月の表示
テキストエレメントを配置し、内容を「{ページ名}’s CurrentMonth:formatted as 2021/09」 と設定します。
ここで一旦プレビューしてみましょう。 現在の年/月が表示されればOKです。
Repeating Group による日付の表示
画面にRepeating Groupを配置し、以下のように設定します。
Type of content: date
Data source: CalendarTool A’s List of Dates
Layout Style: Full list
Rows: 6
Columns: 7
配置したRepeating Group の左上のセルに、日付を表示するためのTextエレメントを配置し、 以下のように設定します。
Current cell’s date: formatted as dd
プレビューで確認しましょう。 日付が表形式で表示されればOKです。
月を変更するボタンの配置
前の月、次の月に移動するためのボタンを配置します。 Icon エレメントで「<」「>」を配置し、クリック時にCustom Stateに入っている年月日を書き換えるようにWorkflowを設定します。
Set StateのValue: {ページ名}’s CurrentMonth +(months) -1 (前の月に移動)
Set StateのValue: {ページ名}’s CurrentMonth +(months) 1 (次の月に移動)
応用
使用しているのはRepeating GroupエレメントやTextエレメントなので、 Bubbleの機能で応用できます。 例えば、データベースにスケジュール情報を入れておき、表示するTextにConditionalを設定して予定のある日だけTextの背景色を変えたり、Workflowを設定してクリックした時にその日の予定をポップアップで表示したりできます。
今日の日付の背景色を変える
Repeating Group内のセルに表示しているTextにConditionalを設定して、セルの日付が今日の場合に、背景色をピンク色に変更します。
日付をクリックしたらポップアップを表示する
Popupをdate型で配置し、Repeating Group内のセルに表示しているTextをクリックしたら、その日付をPopup内に表示します。
以下のように表示されます。
終わりに
予定の表示などカレンダーを使うシーンは多いので、Calendar tool プラグインを使って分かりやすいUIを作っていきましょう！
