開発するカレンダーアプリの紹介

はじめに

ここでは「どんな機能を実装していくのか」をそれぞれの画面ごとに紹介していきます。

以下のリンクから実際に開発するカレンダーアプリを見ることもできます。

デモサイト:https://codeforfun.jp/demo/courses/my_calendar

 

動画

 

 

 

機能の紹介

1. カレンダー

カレンダー画面では、データベースに保存した予定をそれぞれの日付に表示します。

image1

 

をクリックすると前月のカレンダー、 をクリックすると次月のカレンダーが表示されます。

今日の日付だった場合は のように色を変えます。

それぞれの日付をクリックすると、その日付の詳細画面に移動します。

 

 

2. ナビゲーションバー

画面の一番上にあるのは全ての画面で共通のナビゲーションバーです。

image2

 

にはサイト名を表示して、クリックするとカレンダー画面に戻れるようにしています。

は予定の追加・検索画面へのリンクです。アイコンは Font Awesome を使用します。

で年月を選択すると、その年月のカレンダーを表示することができます。

Datetimepicker(デートタイムピッカー)を使って、簡単に年月を選択できるようにします。

 

 

3. 予定の追加

予定は

  • 開始日時
  • 終了日時
  • 予定
  • カラー

の4項目を保存します。

image3

 

Datetimepicker

開始日時と終了日時は Datetimepicker を使って入力できるようにします。

image4

 

入力チェック(バリデーション)

全ての項目が入力されているか、文字数を超えていないかをチェックして、問題がある場合はメッセージを表示します。

image5

 

セレクトメニュー

カレンダーに予定を表示する時の色を選択します。

どのような色になるか分かるように、選択した色に合わせてセレクトメニューの背景色も変更します。

image6

 

 

4. 予定の編集

予定の編集を行います。機能は予定の追加画面と同じです。

image7

 

 

 

5. 予定の詳細

カレンダー画面で選択した日付の予定を表示します。

image8

「編集」をクリックすると編集画面に移動します。

「削除」がクリックされたら確認メッセージを表示して予定を削除します。

 

予定が登録されていない場合は、メッセージと予定追加画面へのリンクを表示します。

image9

 

 

6. 予定の検索

「●月●日から▲月▲日の間に始まる予定」をキーワードを含めて検索できます。

image10

 

予定が見つからなかった場合はメッセージを表示します。

image11

 

 

 

7. 祝日の表示(特典)

内閣府から配布されている CSV 形式の祝日データを使って、カレンダーに祝日を表示します。

image12

 

祝日の場合は、予定詳細画面にも祝日名を表示します。

image13

 

 

コメント

0 コメント