Selecting a Time with the Weekly Grid (Hourly Booking)
Overview
The Weekly Grid is the time-selection screen for facilities that offer hourly bookings — such as meeting rooms and rental spaces. Inspired by the familiar Hot Pepper Beauty grid layout, it shows seven days of availability at a glance and lets you choose a start and end time with just two taps.
When this screen appears: The Weekly Grid is the default screen for facilities configured in hourly mode. If the facility uses the legacy start/end dropdown form, that will appear instead.
Booking Flow
- Select a date on the calendar (sets the starting week)
- Choose a plan and room
- Select a time on the Weekly Grid (this screen)
- Enter your guest information
- Review the fee and pay (if the booking is paid)
- Booking confirmed — receive your access code
Detailed Features
Feature 1: Reading the Grid
The grid is a table with time slots on the vertical axis and days of the week (Mon–Sun) on the horizontal axis.
Cell Colors and Meanings
| Color | Meaning |
|---|---|
| Green | Available (tappable) |
| Pink / Red | Already booked (not tappable) |
| Stripe pattern (gray diagonal lines) | Outside business hours, inside the advance-booking restriction window, or beyond the maximum booking duration (not tappable) |
- Symbols (◎, ×, ─) are no longer shown — color alone indicates cell state
- Time labels appear in the leftmost column (shown on the hour only)
- Saturday headers are blue; Sunday headers are red
- The time granularity (15, 30, 60, 90, or 120 min) matches the facility's plan setting
- Business hours can differ by day (e.g., Saturday 10:00–18:00 vs. weekdays 09:00–22:00)
Advance Booking Window Restrictions
Depending on the facility's settings, some cells may be untappable for the following reasons:
| Restriction | Appearance | Reason |
|---|---|---|
| Minimum advance time | Stripe pattern | Cells that start within the facility's required lead time (e.g., 2 hours from now) cannot be selected |
| Maximum advance days | Greyed-out date | Calendar dates beyond the facility's booking window (e.g., 90 days from today) cannot be selected |
| Maximum booking duration | Stripe pattern (during end-time selection) | End-time cells that would exceed the plan's maximum continuous usage time are not selectable |
Feature 2: Month Picker — Quick Week Jump (v2 New)
Tap the month label at the top of the grid (e.g., April 2026 ▾) to open a quick-jump month picker. On smartphones it appears as a bottom sheet. Select a month to jump directly to its first week.
Tip: Useful when searching for availability several weeks ahead — no need to tap Previous/Next Week repeatedly.
Feature 3: Switching Weeks (Previous / Next)
Use the Previous Week / Next Week buttons at the top of the grid to navigate one week at a time. The current month and date range are shown in the title. Availability is automatically reloaded whenever you switch weeks.
Feature 4: Time-of-Day Anchor Scroll
Morning / Afternoon / Evening buttons appear above the grid. Tapping one scrolls the grid to that part of the day.
Note: These buttons are not filters — they do not hide any rows. The full grid remains visible; only the scroll position changes.
Feature 5: 3-Step Indicator and Selection Flow
A row of three step pills appears above the grid and always shows you what to do next.
[① Start] ──── [② End] ──── [③ Confirm]
| Step state | Visual | Meaning |
|---|---|---|
| Current step | Blue (brand color) + bold | The action needed right now |
| Completed step | White background + blue border + checkmark | Selection already made |
| Future step | Gray | Not yet reachable |
Below the pills, a single hint line updates to match the current step (e.g., "Select an end time from the green cells").
When extending an existing reservation: The start time is automatically locked from your existing booking. Step ① shows a checkmark from the start, and you begin directly at Step ② (picking an end time).
Feature 6: Selecting a Start Time (Step ①)
When the step indicator highlights "① Start" in blue, tap a start time.
- Tap a green cell in your desired day's column
- The cell turns blue and a white badge "1" appears in its top-right corner
- The step indicator advances to "② End"
- Tapping a green cell in a different column (different day) re-selects that day as the new start
- Tap the start cell again or tap "Reset" to clear the selection
Feature 7: Selecting an End Time (Step ②)
After choosing a start time, you can pick an end time in the same column (same day).
- Cells that are continuously available from the start are highlighted in bright green (valid candidates)
- When a booked cell interrupts the sequence, all cells beyond it turn gray + striped and cannot be selected
- Tap a candidate cell to confirm the end time; the full start-to-end range turns blue
- A white badge "2" appears on the end cell, pairing it visually with the "1" badge on the start cell
Note: The end time marks when your booking finishes. For example, tapping the 13:00 cell means a 12:00–13:00 booking.
Minimum duration: If the plan has a minimum booking duration (e.g., 90 minutes), end time cells that would result in a shorter booking are shown with a stripe pattern and cannot be tapped.
Feature 8: Live Range Preview (During Step ②)
While picking an end time (Step ②), you can see the result before committing by hovering or touching a valid green cell.
- Mobile: Touch a green candidate cell — the would-be range fills with semi-transparent blue immediately
- Desktop: Hover the mouse over a green candidate cell to see the same blue preview
- The bottom bar shows "[Preview] 16:00–17:00 (60 min)" — the time range and duration you would get
- Nothing is confirmed until you tap or click. The preview bar does not show Reset / Reserve buttons yet
Once you tap or click to commit, the bar switches to the Reset and Reserve buttons.
Feature 9: The Confirmation Bar and "Reserve" Button (Step ③)
Once both start and end times are selected, a sticky confirmation bar appears at the bottom of the screen.
| Element | Description |
|---|---|
| Date and time range | Selected date, start time – end time |
| Duration | Total minutes |
| Reset button | Clears the selection so you can start over |
| Reserve button | Proceeds to the next step (guest information) |
Feature 10: Fee Review Screen and Time-of-Day Tier Breakdown (v2 New)
After tapping "Reserve," the confirmation screen shows a breakdown of the fee. The price is calculated using the facility's configured settings, including:
- Base hourly rate
- Tiered pricing (e.g., higher rate for the first hour, lower rate thereafter)
- Weekend pricing (if a different rate applies on Saturdays and Sundays)
- Night pack (if the facility has configured off-peak night pricing)
Time-of-day tier breakdown (v2): When a facility has configured time-of-day rates (e.g., Morning ¥500/h, Afternoon ¥800/h, Late Night pack), the confirmation screen now shows an itemized breakdown of each tier's duration and subtotal. Example:
| Period | Duration | Subtotal |
|---|---|---|
| Morning (until 12:00) | 1 hr | ¥500 |
| Afternoon (12:00–18:00) | 2 hrs | ¥1,600 |
| Total | 3 hrs | ¥2,100 |
Facilities without time-of-day tiers continue to show a single line (rate × hours) as before.
Feature 11: Automatic Navigation to Key Screen After Payment (v2 New)
When your booking starts today or within the next 24 hours, the app automatically navigates to the key (access code) screen after successful payment. You do not need to tap "Check In Now" manually.
- If the booking starts more than 24 hours from now, the app returns to the normal booking confirmation screen.
- Auto-navigation only occurs when your internet connection is active.
Feature 12: Time Slot Plans on the Weekly Grid (v2 New)
When a facility has the time_slot_week_grid flag enabled, time slot plans are also shown in the seven-day grid layout instead of the legacy single-day list. Each tier (Morning Session, Afternoon Session, etc.) appears as a rounded block across the grid, making it easy to compare availability across multiple days at once.
When this mode appears: Only for facilities where the
time_slot_week_gridflag is active. Facilities without this flag continue to show the traditional time slot list.
Frequently Asked Questions
Q: Why can I not tap the stripe-pattern cells?
The stripe pattern can indicate several things:
- Outside business hours — the facility does not accept bookings at that time
- Inside the minimum advance window — cells that start within the facility's required lead time (e.g., 2 hours from now) are blocked. Choose a time slot further in the future
- Beyond maximum booking duration (during end-time selection) — end-time cells that would make your booking longer than the plan's maximum are blocked
Business hours can vary by day, so a stripe may appear at the same time on one day but not another.
Q: Some calendar dates are greyed out and cannot be selected
Those dates fall beyond the facility's maximum advance booking window (e.g., more than 90 days from today). The facility limits how far ahead reservations can be made.
Q: Many cells are booked and my options are limited
Booked cells (red or pink) are already reserved by other guests. Try a different day or time range. Use the week navigation to find a week with more availability.
Q: I cannot select an end time — the green cells stop partway down
Only a continuous run of available cells can form a range. Where green cells turn gray + striped, a booked slot interrupts the sequence and blocks further selection. Choose a shorter duration or try a different time on a day with no interruptions.
Q: A blue range appeared when I hovered over an end-time cell — did I book it?
No. That is the live range preview. The would-be range fills with semi-transparent blue when you hover (desktop) or touch (mobile) a valid green end-time cell, but nothing is confirmed until you tap or click. The bottom bar shows the time range and duration as a preview. The Reset and Reserve buttons only appear after you commit by tapping.
Q: Some cells have a stripe pattern and cannot be selected as an end time
A striped end-time cell can mean one of two things:
- Minimum booking duration — the plan requires a minimum usage time (e.g., 90 minutes). Cells that would result in a booking shorter than that minimum are striped and blocked.
- Maximum booking duration — the plan caps the maximum continuous usage time. Cells that would push you beyond that cap are also striped and blocked.
Try selecting an earlier start time, or choose a different time slot.
Q: Tapping "Morning / Afternoon / Evening" does not seem to change anything
These buttons are scroll anchors, not filters. They jump the grid to the relevant time-of-day section without hiding any rows — the full grid stays visible.
Q: I want to change my start time
Tap the start cell again, or tap "Reset" in the confirmation bar to clear the selection and start over.
Q: Can I book on weekends?
It depends on the facility's operating hours configuration. If green cells appear on Saturday or Sunday, those slots are available to book.
Q: How is the fee on the confirmation screen calculated?
The fee reflects the facility's pricing rules for the time range, day of week, and time of day you selected. Tiered rates, weekend surcharges, and night packs are applied automatically when configured.
Q: Why does the fee breakdown appear for some bookings but not others?
The time-of-day tier breakdown is only shown when the facility has configured hourly_rate_tiers. Facilities without this setting display the standard single-line format (rate × hours = total). The presence of a breakdown is determined entirely by the facility's configuration and cannot be changed by guests.
Q: After payment the app jumped to the key screen on its own — is that normal?
Yes, this is intentional. When your booking's start time is within the next 24 hours, the app automatically navigates to the key (access code) screen after payment completes. This means you are ready to check in immediately and do not need to tap "Check In Now" manually.
Troubleshooting
Availability fails to load
If you see an error such as "Failed to load availability," try the following:
- Check your internet connection
- Reload the page
- Switch to the previous or next week and try again
- If the problem persists, contact the facility directly
The grid is cut off horizontally on mobile
On smartphones the grid supports horizontal scrolling. Swipe left and right to see all seven day columns.