In this episode, we tackle how to show available slots to users on our booking page. First, as soon as someone lands on the page, we automatically fetch and display the slots for the next available date, so there’s something to see right away without any interaction.
To achieve this, we set up a ref
to hold the current slots, which we then fill by grabbing the right data from our availability. We also put together a method, setSlots
, that updates this slots array based on the chosen date – either when the page is loaded initially, or when a user selects a different date from the date picker.
We hook into the date picker’s selection event to reload the slots any time the user picks a new date. This ensures what you’re seeing always matches the date you’ve chosen. Then, we loop through the slots and lay them out in a responsive grid—styling them so they look nice and are clearly clickable options, complete with a hover effect.
By the end of the episode, the user can see the available slots for any selected date, setting us up perfectly for the next step where you’ll be able to actually select a slot to book. Stay tuned!