【Bubble】カレンダーにイベント情報を表示させる方法!Full Calendar
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2024/01/bubble-full-calendar.jpg)
ノーコードツール「Bubble」で、データベースに登録したイベント情報をカレンダーに表示させる手軽な方法を紹介します。
無料プラグイン「Full Calendar」を使うとサクッと実装可能です。
プラグインを導入するところからカレンダーにイベント表示させるところまで解説するので、ぜひチャレンジしてみてください。
目次
実装イメージ
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2024/01/スクリーンショット-2024-01-12-7.47.04-1024x759.jpg)
データベースに登録した各イベントを、カレンダーに以下の内容で表示します。
・イベント名
・イベントの開始時間
・イベントの終了時間
【Bubbleのカレンダー表示】実装手順
以下の手順で実装します。
- カレンダープラグイン「Full Calendar」をインストール
- イベントのデータベースを作成する
- データベースからイベントを新規登録する
- Calendarエレメントを設置する
カレンダープラグイン「Full Calendar」をインストール
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2024/01/full-calendar-1024x212.jpg)
まずはカレンダープラグイン「Full Calendar」をインストールします。
イベントのデータベースを作成する
次にイベント(Event)のデータベースを作成し、以下3つのフィールドを追加します。
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2024/01/スクリーンショット-2024-01-12-7.17.04.jpg)
- title:イベント名。text型
- start_time:イベントの開始時間。date型
- end_time:イベントの終了時間。date型
データベースからイベントを新規登録する
データベース画面のApp dataタブから直接イベントを新規登録します。
サンプルでは以下4つのダミーイベントを登録してみました。
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2024/01/スクリーンショット-2024-01-12-7.37.57-1024x190.jpg)
Calendarエレメントを設置する
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2024/01/スクリーンショット-2024-01-12-7.21.48-1.jpg)
最後にCalendarエレメントを画面に設置して、Appearanceの諸々の設定をすれば完成です。
Calendarエレメントを画面に設置すると、以下のようなデザインとCalendar設定が表示されます。
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2024/01/スクリーンショット-2024-01-12-7.22.32-1024x681.jpg)
先程作成したデータベース「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)を指定する
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2024/01/スクリーンショット-2024-01-12-7.23.46.jpg)
ここまで作業できたらプレビューを開いてカレンダーにイベントが反映されているか確認してみましょう!
無事カレンダーにイベントが表示されていれば成功です。お疲れ様でした!
この記事の続きはこちらです!
ノーコード(Bubble, Adalo)の受託…
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2024/01/bubble-full-calendar-apply.jpg)
【Bubble】カレンダーに表示したイベントへ応募する機能 | ノーコード(Bubble, Adalo)の受託開発会社 – EPI…
ノーコードツール「Bubble」のプラグイン「Full Calendar」を使ってカレンダーに表示させたイベントへユーザーがスタッフとして応募する機能の作り方を紹介します。