【予約機能強化】コースから時間を選択できるカレンダー予約機能をカスタマイズ！

今回は、ホットペッパービューティーのような、空いている時間から指定の希望時刻を選択して予約できるカレンダー予約機能を実装しました。

おもに美容院やネイルなどのビューティー系をはじめ、マッサージ、お稽古事、歯医者の予約などさまざまな予約システムに応用できます。
下記、決済までのながれを下記の通り解説いたします。

適しているマッチングサイトのジャンル

下記の職種に相性がよいかもしれません。
機能的にはどの業界でも合いそうな機能ですので、サービスにあった機能実装することが望ましいです。

・美容院
・ネイルサロン
・銭湯やプライベートサウナ
・マッサージ、リラク、整体/整骨
・歯医者、病院クリニック
・お稽古、習い事
・アポ取り

1. フロントでコースと予約希望日時を選択する

まず、『1.コース選択（必須）』でコースを選択したあと、『2.希望日時選択（必須）』より希望の時間帯を選びます。

この部分は以前にレンタル機能でも紹介したおなじようなUIでの実装も可能です。
また、カレンダーと時間を分たり、ポップアップで表示して進行させることもできます。

2024.02.24 2026.03.29

カレンダー予約機能あり！オフィスやイベント用品のレンタルシェアリングマッチングサイト構築事例

デジタル倉庫 https://digital-souko.net/ ワークラボ株式会社 様 オフィス用品・イベント備品・場所・スキルなどのレンタルシェアリングマッチング構築事例 サービス概要 今回、オフィス用品・イベン...

2. 予約ボタンをクリックする

予約日時が決定した後、予約するボタンをクリックして決済へ進みます。

3. クレジット決済を行う

予約するボタンを押した後、決済画面に遷移します。
ポップアップに進んで決済を完了させると予約完了のステータスになります。

上記がベーシックな流れとなりますが、ここに通知機能や、コースごとに文言を変更しての案内など分岐させることも可能です。
このようにして実装したいなどご依頼は一度 お問い合わせ ください。