hot pepper beautyの様な予約アプリの予約周りの構築方法

###・前提条件 ・発生している問題・エラーメッセージ ・実装したい機能
hot pepper beautyの様な予約アプリを作成したいです。
予約周りの設計方法がわからずお力お借りしたいです。

実装したい機能:
予約時間の単位は1時間。
ショップ側は24時間を1時間単位で○と×で予約可否を設定。
ユーザー側はショップ側の予約可能日の1つを選択し予約を完了。

ページのイメージ:


https://beauty.hotpepper.jp/CSP/bt/reserve/schedule?storeId=H000257369&week=11&position=554

(ユーザー側の○の箇所のクリックしたことをトリガーに、日にちと時間の両方を取る方法が特にイメージできません。)

よろしくお願いします。

「いいね!」 1

予約可能枠のテーブルと、予約のテーブルを作ればいいと思います。
date型なら日付と時刻を両方入れられますよー:smile:

「いいね!」 1

ご返信ありがとうございます!
予約可能枠テーブルと予約テーブルそれぞれに必要なfieldを教えていただけないでしょうか。
特にshop(User),customer(User),day(date)はどちらにも入れられる気がして:sweat_drops:

詳細がよく分かりませんが、こんな感じでしょうか。
・予約可能枠テーブル={店舗ID、予約OKな枠の開始日時}枠ごとに1レコード作成
・予約テーブル={予約者ID、店舗ID、予約した枠の開始日時}枠ごとに1レコード作成
・店舗テーブル
・予約者テーブル
・枠
画像を見るに、休業日テーブルもいるかも知れませんね。

「いいね!」 2

ありがとうございます!!
提案を元に進めてみます!!