# 🎓 Advanced Booking App Tutorial (Step-By-Step)

**URL:** <https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386>\
**Category:** Community Resources\
**Tags:** booking, scheduling, tutorial\
**Created:** [September 21, 2023, 2:51am UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386 "2023-09-21T02:51:59Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\
**Post date:** [September 21, 2023, 2:51am UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/1 "2023-09-21T02:51:59Z")

</div>

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/0/d04e4be65539673e411f1f6c65cb5621fa3211fb.jpeg "🎓 Glide Tutorial - Advanced Booking App (Full Course & Cheat Sheet)") ](https://www.youtube.com/watch?v=EBuTMEa_aFQ)

What’s up Gliders!

Thought I’d share my latest free tutorial for those that might be interested.

🍿 𝗔𝗯𝗼𝘂𝘁 𝗧𝗵𝗶𝘀 𝗧𝘂𝘁𝗼𝗿𝗶𝗮𝗹 🍿  
This tutorial is an in-depth, step-by-step, tutorial that shows you how to build an advanced booking app from scratch in Glide.

🤓 𝗦𝘁𝗮𝘆 𝗙𝗼𝗰𝘂𝘀𝗲𝗱 🤓  
Sprinkled throughout this tutorial are countless insider tips, strategies, code snippets and techniques that will take your Glide skills to the next level. So grab a coffee, get comfy, stay focused, and enjoy!

🙋‍♂️ 𝗪𝗵𝗼 𝗜𝘀 𝗧𝗵𝗶𝘀 𝗙𝗼𝗿 🙋‍♀️  
Anyone who wants to level up their skills. This tutorial is _long_, but because it’s built on a free plan and is step-by-step (with an optional cheat sheet) I encourage all Gliders to give it a shot, no matter what skill level you are 💪

🚨 𝗨𝗽𝗱𝗮𝘁𝗲𝘀 🚨  
#𝟭 - I have upgraded the JavaScript snippet that is used in the Validation/Template column so it now allows the last slot of the day to be booked, and removes any Timeslots for the current day that have already passed. You can find the updated code below.

#𝟮 - If you use a time increment larger that 15 minutes (e.g. 30 or 60) you will need to create a filter on the settings page to ensure that the values you can select as the Open/Close time for each day are less than 1440. To do this, just add a the following filter to both choice components: Timeslot/Value is less than 1440.

𝗨𝗽𝗱𝗮𝘁𝗲𝗱 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁:

```auto
const Check = "p7";

if(Check === "NaN"){ return "No date selected."};

const AS = [p1];
const TS = [p2];
const BS = [p3];
const BD = parseInt("p4", 10);
const DS = parseFloat(("p5" / 1440).toFixed(4))
const DE = parseFloat(("p6" / 1440).toFixed(4))
const SD = p7;

const date = new Date();
const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
const today = year * 10000 + month * 100 + day;

let currentTimeFraction = SD === today
    ? (date.getHours() * 60 + date.getMinutes()) / 1440
    : 0;

const FrS = BS.filter(s => s >= DS && s <= DE && s >= currentTimeFraction && !TS.includes(s));

const VS = FrS.filter(s => {
    const SE = parseFloat(((Math.round(s * 1440) + BD) / 1440).toFixed(4));
    return AS.filter(ss => ss >= s && ss < SE).every(ss => FrS.includes(ss));
}).map(s => s.toFixed(4));

return VS.length ? VS.join(",") : "No availability on this date.";

```

𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 & 𝗩𝗮𝗹𝘂𝗲𝘀:  
↳ p1 = Validation/All Slots  
↳ p2 = Validation/Taken Slots  
↳ p3 = Validation/Barber Slots  
↳ p4 = Service/Duration  
↳ p5 = Trading Hours/Start  
↳ p6 = Trading Hours/End  
↳ p7 = Booking/Date → ID

---

<div class="post-metadata">

**Author:** ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)\
**Post date:** [September 21, 2023, 2:59am UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/2 "2023-09-21T02:59:20Z")

</div>

> [@Loqode](#):
>
> Anyone who wants to level up their skills. This tutorial is _long_, but because it’s built on a free plan and is step-by-step (with an optional cheat sheet) I encourage all Gliders to give it a shot, no matter what skill level you are 💪

Thank you for sharing. I will check it

---

<div class="post-metadata">

**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\
**Post date:** [September 21, 2023, 3:01am UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/3 "2023-09-21T03:01:04Z")

</div>

You’re welcome! Go for it 💪

---

<div class="post-metadata">

**Author:** ![Fedor\_Khatlamadzhiev](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fedor_khatlamadzhiev/32/85720_2.png) [@Fedor\_Khatlamadzhiev](https://community.glideapps.com/u/Fedor_Khatlamadzhiev)\
**Post date:** [March 5, 2025, 7:34pm UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/4 "2025-03-05T19:34:00Z")

</div>

Hi, can you please show where can I get the codes you are using throughtout the video?

---

<div class="post-metadata">

**Author:** ![Mouvie28](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mouvie28/32/90684_2.png) [@Mouvie28](https://community.glideapps.com/u/Mouvie28)\
**Post date:** [July 24, 2025, 5:37pm UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/5 "2025-07-24T17:37:17Z")

</div>

Hi, thanks for the tutorial, I need help the “Validation/Valid Slots” because it always gives me “No availability on this date.” no matter what I put in the other columns. I don’t understand.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 24, 2025, 11:46pm UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/6 "2025-07-24T23:46:34Z")

</div>

Please show us what you have configured so far in screenshots or a video.

---

<div class="post-metadata">

**Author:** ![Mouvie28](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mouvie28/32/90684_2.png) [@Mouvie28](https://community.glideapps.com/u/Mouvie28)\
**Post date:** [July 25, 2025, 8:39am UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/7 "2025-07-25T08:39:14Z")

</div>

(post deleted by author)

---

<div class="post-metadata">

**Author:** ![Mouvie28](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mouvie28/32/90684_2.png) [@Mouvie28](https://community.glideapps.com/u/Mouvie28)\
**Post date:** [July 25, 2025, 11:47am UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/8 "2025-07-25T11:47:39Z")

</div>

[https://youtu.be/sKL1g8uKDg4](https://youtu.be/sKL1g8uKDg4)  
If you need another video tell me

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 26, 2025, 1:53am UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/9 "2025-07-26T01:53:53Z")

</div>

Can you copy your whole value of “Validation/Template” (the value not the original function) so I can check if there’s an issue?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 26, 2025, 2:29am UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/10 "2025-07-26T02:29:23Z")

</div>

Maybe you can try this to see if it helps.

```auto
const Check = "p7";

if(Check === "NaN"){ return "No date selected."};

const AS = [p1];
const TS = [p2];
const BS = [p3];
const BD = parseInt(p4, 10);
const DS = parseFloat((p5 / 1440).toFixed(4))
const DE = parseFloat((p6 / 1440).toFixed(4))
const SD = p7;

const date = new Date();
const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
const today = year * 10000 + month * 100 + day;

let currentTimeFraction = SD === today
    ? (date.getHours() * 60 + date.getMinutes()) / 1440
    : 0;

const FrS = BS.filter(s => s >= DS && s <= DE && s >= currentTimeFraction && !TS.includes(s));

const VS = FrS.filter(s => {
    const SE = parseFloat(((Math.round(s * 1440) + BD) / 1440).toFixed(4));
    return AS.filter(ss => ss >= s && ss < SE).every(ss => FrS.includes(ss));
}).map(s => s.toFixed(4));

return VS.length ? VS.join(",") : "No availability on this date.";

```

---

<div class="post-metadata">

**Author:** ![Mouvie28](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mouvie28/32/90684_2.png) [@Mouvie28](https://community.glideapps.com/u/Mouvie28)\
**Post date:** [July 26, 2025, 7:23am UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/11 "2025-07-26T07:23:18Z")

</div>

I tried the code you sent me, there is no longer the message “No availability on this date.” but there are still no remaining slots for the day.

```auto
const Check = "p7";

if(Check === "NaN"){ return "No date selected."};

const AS = [p1];
const TS = [p2];
const BS = [p3];
const BD = parseInt("p4", 10);
const DS = parseFloat(("p5" / 1440).toFixed(4))
const DE = parseFloat(("p6" / 1440).toFixed(4))
const SD = p7;

const date = new Date();
const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
const today = year * 10000 + month * 100 + day;

let currentTimeFraction = SD === today
    ? (date.getHours() * 60 + date.getMinutes()) / 1440
    : 0;

const FrS = BS.filter(s => s >= DS && s <= DE && s >= currentTimeFraction && !TS.includes(s));

const VS = FrS.filter(s => {
    const SE = parseFloat(((Math.round(s * 1440) + BD) / 1440).toFixed(4));
    return AS.filter(ss => ss >= s && ss < SE).every(ss => FrS.includes(ss));
}).map(s => s.toFixed(4));

return VS.length ? VS.join(",") : "No availability on this date.";

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 26, 2025, 11:40pm UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/12 "2025-07-26T23:40:18Z")

</div>

So did you use the code I sent or the one that you pasted above? Your version still has p4, p5, p6 inside brackets so thought I should ask.

I was asking for the final “value” of the column, not the original formula. I want to run a check mysefl.

---

<div class="post-metadata">

**Author:** ![Mouvie28](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mouvie28/32/90684_2.png) [@Mouvie28](https://community.glideapps.com/u/Mouvie28)\
**Post date:** [July 28, 2025, 7:31am UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/13 "2025-07-28T07:31:44Z")

</div>

I don’t really understand what you want but I can invite you to my team so that you can have direct access to the data and understand what’s wrong.  
I’ll send you a private message with the invitation.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [July 28, 2025, 11:59am UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/14 "2025-07-28T11:59:32Z")

</div>

He wants you to click on a cell and copy the javascript that way. Don’t click on Edit to change the column, just click on a cell in one of your rows and copy whatever value that template column produced. It should be the javascript with all of the p values replaced with actual values.

---

<div class="post-metadata">

**Author:** ![Mouvie28](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mouvie28/32/90684_2.png) [@Mouvie28](https://community.glideapps.com/u/Mouvie28)\
**Post date:** [July 28, 2025, 1:23pm UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/15 "2025-07-28T13:23:56Z")

</div>

I think I’ve got it, isn’t it? this is the code you sent me

```auto
const Check = "20250725";

if(Check === "NaN"){ return "No date selected."};

const AS = [0.0000, 0.0104, 0.0208, 0.0313, 0.0417, 0.0521, 0.0625, 0.0729, 0.0833, 0.0938, 0.1042, 0.1146, 0.1250, 0.1354, 0.1458, 0.1563, 0.1667, 0.1771, 0.1875, 0.1979, 0.2083, 0.2188, 0.2292, 0.2396, 0.2500, 0.2604, 0.2708, 0.2813, 0.2917, 0.3021, 0.3125, 0.3229, 0.3333, 0.3438, 0.3542, 0.3646, 0.3750, 0.3854, 0.3958, 0.4063, 0.4167, 0.4271, 0.4375, 0.4479, 0.4583, 0.4688, 0.4792, 0.4896, 0.5000, 0.5104, 0.5208, 0.5313, 0.5417, 0.5521, 0.5625, 0.5729, 0.5833, 0.5938, 0.6042, 0.6146, 0.6250, 0.6354, 0.6458, 0.6563, 0.6667, 0.6771, 0.6875, 0.6979, 0.7083, 0.7188, 0.7292, 0.7396, 0.7500, 0.7604, 0.7708, 0.7813, 0.7917, 0.8021, 0.8125, 0.8229, 0.8333, 0.8438, 0.8542, 0.8646, 0.8750, 0.8854, 0.8958, 0.9063, 0.9167, 0.9271, 0.9375, 0.9479, 0.9583, 0.9688, 0.9792, 0.9896, 1.0000, 1.0104];
const TS = [0.3750, 0.3854, 0.3958, 0.4063, 0.4167, 0.4271, 0.4375, 0.4479, 0.4583, 0.4688, 0.4792, 0.4896];
const BS = [0,5104];
const BD = parseInt(180 Mins, 10);
const DS = parseFloat((540 / 1440).toFixed(4))
const DE = parseFloat((1140 / 1440).toFixed(4))
const SD = 20250725;

const date = new Date();
const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
const today = year * 10000 + month * 100 + day;

let currentTimeFraction = SD === today
    ? (date.getHours() * 60 + date.getMinutes()) / 1440
    : 0;

const FrS = BS.filter(s => s >= DS && s <= DE && s >= currentTimeFraction && !TS.includes(s));

const VS = FrS.filter(s => {
    const SE = parseFloat(((Math.round(s * 1440) + BD) / 1440).toFixed(4));
    return AS.filter(ss => ss >= s && ss < SE).every(ss => FrS.includes(ss));
}).map(s => s.toFixed(4));

return VS.length ? VS.join(",") : "No availability on this date.";

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 28, 2025, 11:30pm UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/16 "2025-07-28T23:30:05Z")

</div>

I checked the app. your problem is here.

```auto
const BS = [0.5104];

```

The app filters the available slots based on your available Barber Slots, and it is looking for **a 180-minute (3-hour) continuous slot.**

If ‎BS only contains ‎[0.5104], there is no way to find a 3-hour window.

I tried populating your Barber table with this value of available slots:

```auto
0.3750, 0.3854, 0.3958, 0.4063, 0.4167, 0.4271, 0.4375, 0.4479, 0.4583, 0.4688, 0.4792, 0.4896, 0.5000, 0.5104, 0.5208, 0.5313, 0.5417, 0.5521, 0.5625, 0.5729, 0.5833, 0.5938, 0.6042, 0.6146, 0.6250, 0.6354, 0.6458, 0.6563, 0.6667, 0.6771, 0.6875, 0.6979, 0.7083, 0.7188, 0.7292, 0.7396, 0.7500, 0.7604, 0.7708, 0.7813

```

Then it works correctly.

 ![CleanShot 2025-07-29 at 06.29.53@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/6/b6ea29c59716ef8137c41f87498c83f06adeda0a.png)

---

<div class="post-metadata">

**Author:** ![Mouvie28](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mouvie28/32/90684_2.png) [@Mouvie28](https://community.glideapps.com/u/Mouvie28)\
**Post date:** [July 29, 2025, 7:06am UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/17 "2025-07-29T07:06:13Z")

</div>

Great! Thank you so much! I didn’t understand that at all. You save me !

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 29, 2025, 11:17pm UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/18 "2025-07-29T23:17:16Z")

</div>

Great to hear! Congrats!

---

<div class="post-metadata">

**Author:** ![Mouvie28](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mouvie28/32/90684_2.png) [@Mouvie28](https://community.glideapps.com/u/Mouvie28)\
**Post date:** [July 30, 2025, 4:18pm UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/19 "2025-07-30T16:18:10Z")

</div>

i have another question, i’m 2:24 into the video, and when i make a reservation, it goes to today instead of the right date. i’d like to understand why?

 ![Capture d'écran 2025-07-30 181731](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/3/b3f6638dbdf70a98154abc925310ee1f50525df2.png)

 ![Capture d'écran 2025-07-30 181645](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/5/d54b07fbf1472d825af858ba7d53365d4b783281.png)

---

<div class="post-metadata">

**Author:** ![Will\_Dempsey](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/will_dempsey/32/90797_2.png) [@Will\_Dempsey](https://community.glideapps.com/u/Will_Dempsey)\
**Post date:** [July 30, 2025, 4:28pm UTC](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386/20 "2025-07-30T16:28:48Z")

</div>

Thanks for the great tutorial. I have followed it today and nearly got it all working - just testing now. For some reason, it’s not showing the right timeslots. I have one booking which is taking up 3 timeslots - 10am, 10:30am and 11am - on 2nd August. When I go to book on another date, those timeslots are not showing as available. It seems to be missing a bit of logic around date. Any clues?

Single Booking:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/b/5b562a5354f1f713d273dea7356573a2faa170eb.png)

Booking form showing Taken Slots:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/2/f284b15091ada7e43400619b5082a2588458237d.png)

Booking on another dates but not showing times which should be available:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/0/d076a1dc87459953447816da9a7f2bad8a79996d.png)

[Next page](https://community.glideapps.com/t/advanced-booking-app-tutorial-step-by-step/66386.md?page=2)