full calendarを使用したカレンダーアプリ

こんにちは、ひなのです。

今回は.bubbleで前回紹介したプラグイン「full calendar」を使用して、カレンダー内に予定の作成・編集・削除ができる簡易的なカレンダーアプリを作成したためご紹介します。

カレンダーアプリの概要

私が作成したカレンダーアプリでは、ユーザー登録・ログインをした後にカレンダーが表示されます。

そして表示されたカレンダーの日付をクリックすることで予定の作成画面が表示され、作成画面に予定を入力し作成ボタンをクリックすると予定が作成されます。

また、作成した予定をクリックすると予定の編集・削除画面が表示され、予定の変更を入力し更新ボタンをクリックすると予定が変更、削除ボタンをクリックすると予定が削除されます。

リンクを貼りますので、良ければお試しください。

https://test-hnn.bubbleapps.io/version-test/login?debug_mode=true

次に、カレンダーやPopupのデザインを私の知識で可能な範囲で変更したため紹介していきたいと思います。

デザインの変更

今回のカレンダーアプリでは、カレンダーの背景の色・予定の色・選択した予定の色・選択した日付の色・当日の色を変更しました。また、「Styles」からButton、Date＆Time Picker 、Inputの色やフォントを統一しました。

まずカレンダー内の色の変更から紹介させていただきます。

はじめに「calendar A」の「Appearance」でフォントをBaskervville(regular)にし、「Background style」をFlat color に「color」を#FAF4E6に変更しました。

次に同様に「Appearance」の「Event color」で作成した予定の色、「Selected event color」で選択した予定の色を、「Selected day color」で選択した日の色を、「Current day color」で今日のカレンダーの色を下記のように選択しました。

次に「Styles」での設定を紹介させていただきます。

「Styles」から「Button-Primary Button」を選択し、色やフォントをアプリ内で統一しました。「Date & Time Picker」と「Input-Standard Input」も同様に設定したのですが、「Styles」で設定しておくと一つ一つのフォントやカラーを変えなくて良いのでとても便利だなと感じました！

実現できなかった部分

・予定ごとに色を変える

予定の種類(旅行や学校行事など)によって色を変えたいと考え、色をデータベースに保存する方法を考えたのですが、私の知識不足によりうまく実現できませんでした。

・ログインした人が作成した予定のみを表示する

ユーザー登録・ログインした際に、ログインした人が作成した予定のみを表示したいのですがうまく実現できず、他のユーザーが作成した予定も表示されてしまいました。

今回のカレンダーアプリの作成では、私の持つ.bubbleの知識が乏しくうまく実現できない点も多かったため、これからより知識を深め、使いやすいアプリを作成出来るようになれるといいなと感じました。

今回の内容としては以上になります。拙い部分も多々あったと思いますが、最後までお読みいただきありがとうございました。