この記事は 2024.8.20 に最新記事として更新されています。
今回は、予約マッチングサイトの構築で、ホットペッパーのようなカレンダー機能を実装いたしました。
出品者が対応時間やコースを設定して出品し、購入者がコースと時間指定して予約から決済させることが可能です。
ざっくりとホットペッパーのようなイメージはこのような感じになります。
今回このようにシステムのみだけですが、実装していきます。
ホットペッパーのようなイメージ
（出典：ホットペッパービューティー）
1. 予約のコースを選択する
出品者が設定したコースと対応時間から購入者は予約を選ぶことができます。
・コース名/料金
・対応時間（10分刻みや30分刻みも可能）
コースと時間がきまれば、次に『予約ボタン』を押します。
ここで予約ボタンを押すと、決済に直接進ませられることができます。
決済完了後、予約履歴に決済完了のスケジュールが残ります。
別のパターンとして、下記のようなUI変更であったりもう少しホットペッパーのようなデザインに近づけることも可能です。
もう一例として、カレンダー＋在庫レンタル機能をつけたりなどあらゆるカスタマイズが可能です。
ほかにも様々な予約の仕様やここをこう変更したいなどフルカスタマイズが可能です。
