お世話になります。
この度オンライン英会話のような（画像1）講師の空き時間から生徒がカレンダー（空き時間）を見て予約できる実装をしたいと思っております。ただうまくDBと連携できず困っており、どなたか原因わかる方いらっしゃいますでしょうか。。
（画像1）
現在のDBは以下のようになっております。
「Booking」typeに[callender]fieldを作成し、そこにlist of date rangeで講師の空き時間を入れてます。
[callender] filedには一括でlistとして空き時間（日付・時間）が入ります。（画像3）
（画像2）
（画像3）
以下のbabble designに(画像1)のように実装したいです。
現在日付横のbottonタブに空き時間をDBから連携したく思っております。(画像4)
(画像6)でエラーが出てきて、previewでも何も出てこない状況になっております。
エラー内容はGroup booking3:Data source should be booking but right now
it is a list of date rangeと出ております（あまり意味がわかっておらず。。）
類似質問があったので拝見させていただきましたが、babbleでいじるよりyou can book me など外部アプリ連携したほうが早いかつ正確でしょうか？
（画像4）
（画像5）
（画像6）
煩雑な質問で恐縮ですが、何卒よろしくお願いいたします。
