目次
今回作成するもの
Bubble公式で記載されているチュートリアルを翻訳し、分かりやすくブラッシュアップしました。
初心者を対象としていますので、前編だけでもミニマムな機能は実装することができます。
ひとつひとつクリアしていきましょう。
参照先：https://bubble.io/blog/build-google-calendar-clone-no-code/
使用エレメント
- Calendar(Plugins)
- Text
- Input
- Popup
- Button
- Date/TimePicker
作成手順
1. データの作成
まずデータのtypeとfieldを作成していきましょう。
今回はtypeをCalendarにnameとdescription、start、endを追加してあげます。
意味合いは、予定名(text)、予定内容(text)、予定開始時間(date)と終了時間(date)になります。
2. エレメントの配置
全体のエレメント配置から説明していきます。
今回はプラグインを使用するので、まずPluginsタブからインストールしましょう。
公式から出ているFull Calendarというものです。
インストールが完了すると、エレメントタイプ一覧にCalendarが増えています。
そちらを配置してください。
type of eventsを先ほど作成したCalendarに、Data sourceはCalendarの全てのデータを取得したいので、Do search を選択後、Calendarを選択します。
Start time fieldは開始時刻のことなのでstart、End time fieldは終了時刻であるendを選択します。
Event captionとはカレンダーに表示するためのタイトルのことなので、Current eventsのnameを選択します。
少しややこしく感じるかもしれませんが、下記の画像の通り実装すればOKです。
次に予定作成するためのエレメントを配置します。
Popupの中にText、Input、Date/TimePicker、Buttonを下記の画像のように配置します。
詳しくは左のエレメントツリーを参照してください。
日付を受け取るために、Popupのtype of contentにdateを選択しておきます
Date/TimePickerはinput typeをDateからDate&Timeに変更することで画像のようにエレメントの形が変化します。
下記のようにinputのPlaceholderを変更することで、より親切な作りになります。
initial contentに先ほど設定したPopupの日付を受け取る設定を記載します。
これはstartとendどちらにも行ってください。
次に予定を確認するためのエレメントを配置します。
Popupの中にText、Buttonを下記の画像のように配置します。
詳しくは左のエレメントツリーを参照してください。
PopupのType of contentにCalendarを設定します。
次にテキストの内容を設定します。
ここではカレンダーのname、description、start、endを表示したいので、順に実装していきます。
先ほどPopupにCalendarを設定したので、Parents group Calendarが選択できます。
その後nameを選択して完了です。
descriptionも同じ要領で実装してください。
次は時間を表示させるために同じ要領でstartとendの実装もしていきます。
ただしBubbleのdate型はデフォルトでアメリカ基準の表示になっており、かなり読みにくいので変更していきます。
そのためには:formatted as 今日の日付を選択、Format typeをCustom選択します。
Custom formatという項目が出てくるので、yyyy/mm/dd HH:MMと入力
サブメニューを閉じれば下記のようになっています。
ここで表示される時間帯は今の時間帯が仮置きで表示されます。
3. ワークフローの作成
次にワークフローを作っていきます。
まずはワークフローのClick here to add in eventをクリックし、ElementsのA calendars day is clickを選択します。
予定を作成するPopupを表示し、display dataでPopupにカレンダーの選択したその日付を送信するワークフローを記載します。
次に予定作成Popup内にある作成ボタンを実装していきます。
まず予定を作成するワークフローをかき、inputをリセットし、Popupを非表示にするように記載します。
詳しくは下記画像を参照してください。
以上で予定を作成するワークフローの完成です。
次に予定をクリックした際、詳細が表示されるワークフローを組みます。
同じようにClick here to add in eventをクリックし、先ほどとは違い次はElementsのA calendars event is clickを選択します。
そこに詳細を表示するアクションと、desplay dataでそのPopupに予定の内容を送信するアクションを記載します。
次に詳細Popupの中にある閉じるボタンにPopupを非表示するアクションを追加し、完成です。
実際に使ってみた
カレンダーに表示されている日付をクリックすると、作成するポップアップが表示され、カレンダーにある予定をクリックすると、予定の詳細が確認できます。
今回は以上で予定の作成と詳細確認の実装ができました。
次回は予定の編集と削除を実装したいと思います。
下地は完成してるので、次回はより楽に実装できると思います。
