ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。

Calendar tool プラグインでカレンダーをカスタマイズして表示する

f:id:jansnap:20210920163727p:plain

こんにちは!Bubble標準のカレンダーであるCalendarエレメントを使っていて、もっと柔軟にカスタマイズしたいと思ったことはありませんか? 本日は、「Calendar tool」プラグインとRepeating Groupを使って、カスタマイズしたカレンダーを表示する方法をご紹介します。

日付・時刻をカレンダー入力できるエレメントを追加するプラグインを紹介した記事がありますので、こちらもご覧ください!

blog.nocodelab.jp

今回利用するプラグイン「Calendar tool」

プラグインページ

以下がプラグインページです。作者はBrown Foxさんです。

bubble.io

インストール

左メニューのPluginsタブを選択し、「Add plugins」をクリックして、 Calendar tool プラグインを探してインストールします。 無料です。

f:id:jansnap:20210920151305p:plain

使い方

準備

説明用に、Calendar-tool-page というページを作成しました。

表示したい日付を一時的に保存するために、ページにCustom Stateを作成します。 今回は、「CurrentMonth」という名前でdate型で作成しました。

f:id:jansnap:20210920151614p:plain

また、初期値として現在の日付を設定するために、Workflowを追加します。 下記の図のように、Page is Loaded に、「Element Action」ー「Set State」で、 上記のCustom StateのValueに、「Current date/time rounded down to month 」を設定します。

f:id:jansnap:20210920155424p:plain

Calendar Toolエレメントの配置と設定

エレメントに「Calendar Tool」が追加されるので、画面の適当な位置に配置します。 配置したエレメントを以下のように指定します。

Month Date: {ページ名}’s CurrentMonth

Time Date: YYYY/MM/DD

f:id:jansnap:20210920152123p:plain

年月の表示

テキストエレメントを配置し、内容を「{ページ名}’s CurrentMonth:formatted as 2021/09」 と設定します。

f:id:jansnap:20210920152509p:plain

ここで一旦プレビューしてみましょう。 現在の年/月が表示されれば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

f:id:jansnap:20210920154813p:plain

配置したRepeating Group の左上のセルに、日付を表示するためのTextエレメントを配置し、 以下のように設定します。

Current cell’s date: formatted as dd

f:id:jansnap:20210920154656p:plain

プレビューで確認しましょう。 日付が表形式で表示されればOKです。

月を変更するボタンの配置

前の月、次の月に移動するためのボタンを配置します。 Icon エレメントで「<」「>」を配置し、クリック時にCustom Stateに入っている年月日を書き換えるようにWorkflowを設定します。

Set StateのValue: {ページ名}’s CurrentMonth +(months) -1 (前の月に移動)

Set StateのValue: {ページ名}’s CurrentMonth +(months) 1 (次の月に移動)

f:id:jansnap:20210920160451p:plain

f:id:jansnap:20210920160234p:plain

f:id:jansnap:20210920155855p:plain

応用

使用しているのはRepeating GroupエレメントやTextエレメントなので、 Bubbleの機能で応用できます。 例えば、データベースにスケジュール情報を入れておき、表示するTextにConditionalを設定して予定のある日だけTextの背景色を変えたり、Workflowを設定してクリックした時にその日の予定をポップアップで表示したりできます。

今日の日付の背景色を変える

Repeating Group内のセルに表示しているTextにConditionalを設定して、セルの日付が今日の場合に、背景色をピンク色に変更します。

f:id:jansnap:20210920161154p:plain

日付をクリックしたらポップアップを表示する

Popupをdate型で配置し、Repeating Group内のセルに表示しているTextをクリックしたら、その日付をPopup内に表示します。

f:id:jansnap:20210920162216p:plain

f:id:jansnap:20210920162355p:plain

以下のように表示されます。

f:id:jansnap:20210920162920p:plain

f:id:jansnap:20210920162933p:plain

終わりに

予定の表示などカレンダーを使うシーンは多いので、Calendar tool プラグインを使って分かりやすいUIを作っていきましょう!