【Bubble】カレンダーにイベント情報を表示させる方法!Full Calendar

ノーコードツール「Bubble」で、データベースに登録したイベント情報をカレンダーに表示させる手軽な方法を紹介します。

無料プラグイン「Full Calendar」を使うとサクッと実装可能です。

プラグインを導入するところからカレンダーにイベント表示させるところまで解説するので、ぜひチャレンジしてみてください。

目次
無料で資料をダウンロード

ノーコード開発サービスのご案内

日本最大級のノーコード開発実績

  • EPICsの会社概要・特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ

実装イメージ

データベースに登録した各イベントを、カレンダーに以下の内容で表示します。

・イベント名
・イベントの開始時間
・イベントの終了時間

【Bubbleのカレンダー表示】実装手順

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

  1. カレンダープラグイン「Full Calendar」をインストール
  2. イベントのデータベースを作成する
  3. データベースからイベントを新規登録する
  4. Calendarエレメントを設置する

カレンダープラグイン「Full Calendar」をインストール

プラグイン「Full Calendar」

まずはカレンダープラグイン「Full Calendar」をインストールします。

イベントのデータベースを作成する

次にイベント(Event)のデータベースを作成し、以下3つのフィールドを追加します。

  • title:イベント名。text型
  • start_time:イベントの開始時間。date型
  • end_time:イベントの終了時間。date型

データベースからイベントを新規登録する

データベース画面のApp dataタブから直接イベントを新規登録します。

サンプルでは以下4つのダミーイベントを登録してみました。

Calendarエレメントを設置する

Calendarエレメント

最後にCalendarエレメントを画面に設置して、Appearanceの諸々の設定をすれば完成です。

Calendarエレメントを画面に設置すると、以下のようなデザインとCalendar設定が表示されます。

先程作成したデータベース「Event」を以下のように設定します。

  • Type of eventsはEventタイプで、Data sourceはDo a search forでEventにする
  • Start time fieldはEventタイプの開始時間のフィールド(start_time)を指定する
  • End time fieldはEventタイプの終了時間のフィールド(end_time)を指定する
  • Event captionはEventタイプのタイトルのフィールド(title)を指定する
Calendarエレメントの設定

ここまで作業できたらプレビューを開いてカレンダーにイベントが反映されているか確認してみましょう!

無事カレンダーにイベントが表示されていれば成功です。お疲れ様でした!

この記事の続きはこちらです!

無料で資料をダウンロード

ノーコード開発サービスのご案内

日本最大級のノーコード開発実績

  • EPICsの会社概要・特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ

    氏名

    法人名

    メールアドレス

    電話番号

    お問い合わせ詳細

    お問い合わせでご入力頂いた個人情報のお取り扱いについて

    「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
    目次