脱!教養ゼロママ

もう恥ずかしくない!教養のあるママを目指してます!

カレンダーを設定してみた|初心者のアプリ開発|Adalo

f:id:yuka-edu:20210610083328p:plain

今日はAdaloが標準で用意しているカレンダーを設定してみます!

スケジュールや営業日など、アプリを使うとカレンダーが欲しくなりますね。

 

この記事を読むとわかること・・・

・Adalo標準のカレンダー機能の概要と設定方法

 

今日の最終的なイメージ〜

f:id:yuka-edu:20210610082908p:plain

今日はレッスンスケジュールを表示するカレンダーを用意します。

こんな機能を考えています。

 

①月表示でのカレンダー

②詳細の時間ごとのスケジュール

③おまけでスケジュール登録画面も用意

  

事前準備 

事前にカレンダーに表示するスケジュールデータを設定する

データコレクションを用意しました。

コレクションに用意した項目は以下の通り〜

 

コレクション名:レッスンスケジュール

  • 開始時間(日にち&時間 型)
  • 終了時間(日にち&時間 型)
  • 生徒名(テキスト型)
  • コメント(テキスト型)

 

適当にスケジュールデータを登録したら、カレンダーの設定をスタートします。 

 

Adaloでのカレンダー設定

今日は新しい画面を用意して、カレンダーを追加していきます。

Step1
  1. 画面左上の「+」を選択
  2. ADD SCREEN を選択
  3. App Bar を選択(Blank Screen でもOK)

f:id:yuka-edu:20210611082255j:image

Step2
  1. 画面名を編集
  2. CREATE SCREEN を選択

f:id:yuka-edu:20210611082213j:image

Step3
  • 画面左上の「+」を選択
  • ADD COMPONENT を選択
  • MARKETPLACE を選択

f:id:yuka-edu:20210611082232j:image

Step4

Adaloで追加できるコンポーネントの一覧が出てきます。

カードの支払い機能もこの一覧からダウンロードできます。

  1. Calendar を選択

f:id:yuka-edu:20210611082229j:image

Step5
  1. 画面左上の「+」を選択
  2. ADD COMPONENT を選択
  3. Installed を選択
  4. Calendar を選択
  5. 右側の画面にドロップして配置

f:id:yuka-edu:20210611082225j:image

Step6
  1. 右側の画面のカレンダーを選択
  2. 左側のWhat events should be displayed? を選択

f:id:yuka-edu:20210611082248j:image

Step7
  1. カレンダー表示したいデータコレクションを選択

事前に用意していたレッスンカレンダーを選択します。

f:id:yuka-edu:20210611082241j:image

Step8

フィルターを選択します

今日は全件表示するので、All レスんカレンダーを選択

f:id:yuka-edu:20210611082251j:image

Step9
  1. Language の Japanese を選択

日本語にしたら、月が漢字になってしまった・・・ださい。

いつか改善してくれるかなぁ・・・

f:id:yuka-edu:20210611082222j:image

Step10
  1. Event Start のx* を選択
  2. 開始時間を選択

f:id:yuka-edu:20210611123925j:image

Step11
  1. Event End のx* を選択
  2. 終了時間を選択

f:id:yuka-edu:20210611123928j:image

Step12
  1. Muti-Day Event Marking Style はBars を選択

標準設定のDotsは1日に予定が複数軒あると、その分ドットが増えます。

好みかなぁ〜

f:id:yuka-edu:20210611082238j:image

Step13

Colorsを選択すると、カレンダーの色を設定できます。

私はこのまま使います。

f:id:yuka-edu:20210611082244j:image

Step14

Navigationを選択すると、カレンダーに日付の範囲を設定できるようです。

f:id:yuka-edu:20210611082301j:image

Step15

Agenda View を選択すると、

月のカレンダー上で日付をタップした後に表示される

時間割カレンダーの詳細を設定できます。

とりあえず、タイトルを設定します。

  1. T* を選択

f:id:yuka-edu:20210611082216j:image

Step16

私は生徒名を表示させます。

  1. 生徒>Username を選択

f:id:yuka-edu:20210611082258j:image

Step17

最後におまけで、事前に用意しておいたカレンダーの登録画面にリンクできる設定をします。

  1. 右側の画面にボタン追加
  2. 左側の画面でリンク設定
  3. ポップアップ表示するのでTransitionはModalを指定
  4. DONEを選択

f:id:yuka-edu:20210611082235j:image

Step18

リンク先の登録画面はこんな感じです〜

Formの標準スクリーンを使った超シンプル画面です。

f:id:yuka-edu:20210611082219j:image

 

Preview

設定ができたので、画面右上の▶︎Previewwを選択してカレンダーを見てみます!

・・・

レッスンカレンダーが表示されました。

位置がズレているのは直さないといけないですね・・・

日にちを選択してみます。

f:id:yuka-edu:20210611123952j:image

時間割りのカレンダーを表示しました。

カレンダー登録画面にリンクするボタンを選択してみます。

f:id:yuka-edu:20210611123958j:image

登録画面が出ました。

スケジュールを編集して、保存ボタンを選択します。

f:id:yuka-edu:20210611124005j:image

スケジュールが追加されました!

(ボタンとカレンダーがかぶってるので、配置を修正しないと・・・です)

f:id:yuka-edu:20210611124002j:image 

まとめ

標準で用意されているカレンダーを設定してみました。

個人的には、月表示に簡単に詳細が出たほうが見やすいなぁと思ったりします。 

あと、時間割りのカレンダーはなくてもいい時があるなと思いました。