【kintone】予約カレンダーアプリ

【アプリ概要】

管理部署にて対象の日付に必要な設定をレコードに保存したアプリから、react と各種ライブラリを利用したkintoneのアプリにてカレンダー形式で一覧を表示するアプリ。

表示されたイベントをクリックし必須項目を選択して保存することにより予約情報をレコードに保存して予約ができる。

自分の予約の一覧は専用のマイページにテーブルで、全体の予約は管理部署専用のページにて閲覧できる。

【実装の背景】 

社内にて予約が必要な様々なイベントがあるが、拠点やイベントによってExcelや開発者が不明なWEBアプリを利用しており管理や集計が煩雑になっていた。

そのためそれらを統一し、一元管理することを目的としてこのアプリを開発した。

【処理の流れ】

～フロントエンド側～

・使用言語(ライブラリ)

React, MaterialUI

～予約可能日やイベントを設定～

管理部署にて当アプリ専用の設定値管理アプリにて日付やイベント、予約可能時間などの情報をレコードとして保存。

～カレンダー側にて～

APIリクエストを送信し設定値管理アプリから情報を取得。

ReactとMaterialUIを利用してカレンダーコンポーネントを表示し、その中に設定値からイベントを表示していく。

イベントをクリックするとダイアログが表示され、予約可能時間等の必須項目をドロップダウンで表示し保存ボタンをクリックするとアカウント情報から必要な情報と共にレコードが保存される。

なお予約の重複・過去日付での予約や予約不可能な日付での予約などについては制御を設けている。

～マイページにて～

ログインユーザーに紐づくレコードのみを取得し、テーブルに表示する。

また各行にキャンセルボタンが設置されておりワンクリックでキャンセルができる。

【アプリイメージ】

・カレンダーアプリ

・マイページ