# 【12.27解決済み】Bubble：予約システム構築時のカレンダー作成について **URL:** \ **Category:** bubble\ **Tags:** バックエンドデータベース\ **Created:** [2022 年 12 月 26 日午後 12:39 UTC](https://www.nocode-faq.com/t/topic/3349 "2022-12-26T12:39:11Z")\ **Posts on this page:** 2\ **Page:** 1
**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\ **Post date:** [2022 年 12 月 26 日午後 12:39 UTC](https://www.nocode-faq.com/t/topic/3349/1 "2022-12-26T12:39:11Z")
### 前提条件 Bubbleを使って、ホテルの予約機能を作成しており、 カレンダーから予約されていない日付を２箇所クリック（チェックイン＆チェックアウト）して、予約の日付を登録しようとしています。 カレンダーはCalendorToolを使用しています。 > **[Templates for Bubble](https://bubble.io/plugin/calendar-tool-1593785219090x363390256106962940)** > > Buy and sell Bubble templates to speed up app development. Bubble is a visual programing language that lets you build apps without code. ### 発生している問題 カレンダーは作成できましたが、予約している日付の特定ができず、Conditionalの制限がかけられません。 ![スクリーンショット 2022-12-26 21.26.18](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/d5829d134de023c922096fee85a327baacbfe19a.png) ### エラーメッセージ カレンダー上の日付に対して、予約が埋まっているかどうかのConditonalのエラー ![スクリーンショット 2022-12-26 21.27.29](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/1/1a50d76781f2652002703003b8cd595c2184dcbb.png) ### DB設計 Roomテーブル ・name(text) ：ルーム名 ・reserve\_date(date range)リスト型 ：予約情報 ![スクリーンショット 2022-12-26 21.28.23](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/e/e8a5fa29ba166c8b91372a3110166033999e0489.png) ![スクリーンショット 2022-12-26 21.28.41](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/e/e5e0edfbf53af75fde4948176a448dcec4638c3b.png) ### 実装したい機能 ①予約をチェックイン、チェックアウトから日付範囲データとして保存 ②カレンダーに①に該当する箇所を選択できなように条件指定(this element isn’t clickable) ### 試したこと reserve\_date contains に対してrange型で検索 エラーは消えましたが、絞り込めてはいません。 そもそも検索時のデータ型が違うのでしょうか。 ![スクリーンショット 2022-12-26 21.36.00](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/0/0a4c51187d34a3e6f2a2fbe68c0fa2d40173f569.png) ### 補足情報 （調べたURL/参考になりそうな事例） 日付データを範囲検索する方法 > **[\[New Feature\] Date and Number Range support](https://forum.bubble.io/t/new-feature-date-and-number-range-support/6194?utm_source=google&utm_medium=cpc&utm_campaign=16900341598&utm_term=&utm_content=x--&gclid=CjwKCAiAqaWdBhAvEiwAGAQlts__i234pYZdvP07_3qayiRLFLZeM16XM2ep8-gnVPOt1Bj5DlCB-xoCuWwQAvD_BwE)** > > We’ve announced that we were working on this a few days ago. We’ve added two data types to Bubble and search support for them. You can define a date range (defined with 2 dates) and a number range. This will be especially useful if you want to... ### Bubble Editor 上記エラーの出ているBubble Editorになります。 > **[Bubble Editor - GoogleCalendor-sample](https://bubble.io/page?type=page&name=room_list&id=googlecalendor-sample&tab=tabs-1)** > > Bubble is the only platform that lets you switch between AI prompting and visual editing to go beyond prototypes and launch real apps — no code required. ---
**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\ **Post date:** [2022 年 12 月 27 日午前 12:25 UTC](https://www.nocode-faq.com/t/topic/3349/2 "2022-12-27T00:25:49Z")
こちら自己完結しました。 データベースが一つ少なかったようです。 Roomテーブルに紐づく、Reserveテーブルを作成したところ、\< - range - \>を使った絞り込みができました。 ![スクリーンショット 2022-12-27 9.19.14](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/78e39085401973fa70b7d08d9f3e27e3fe5d1b9b.png) date\_range contains(point) Parent group date reserveテーブルのチェックイン〜チェックアウトまでの範囲に カレンダーの日付が入っている場合、背景色変更＋クリック不可 ![スクリーンショット 2022-12-27 9.21.04](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/9/9d588c9bdc5a7b61943e60eca78ed4a34fb73eca.png) ついでにカレンダーで予約できるように変更し 最初にクリックした日付をチェックイン日に設定 チェックイン日より前の日付はクリックできないようにしました。 >