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 or unavailable (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)

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: Selecting a Start Time (Phase 1)

When the grid first loads, the header reads "Tap a start time".

Tap a green cell in the column for your desired day
The tapped cell turns blue and the header changes to "Tap an end time (continuous availability only)"

Tapping a green cell in a different column (a different day) re-selects that day as the new start
Tap the start cell again or tap the "Reset" button to clear your selection

Feature 6: Selecting an End Time (Phase 2)

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 light green (valid candidates)
If a booked cell appears in the sequence, all cells beyond it become unselectable
Tap a candidate cell to confirm the end time; the full start-to-end range turns blue

Note: The end time marks when your booking finishes. For example, tapping the 13:00 cell means a booking from 12:00 to 13:00.

Minimum duration: If the plan has a minimum booking duration (e.g., 90 minutes), end time cells that fall before that minimum are shown with a stripe pattern and cannot be tapped. For a 90-minute minimum plan, the cell 60 minutes after your start time is not selectable.

Feature 7: The Confirmation Bar and "Reserve" Button

Once both start and end times are selected, a sticky confirmation bar appears at the bottom of the screen.

Element	Description
Date	Your selected date
Time range	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 8: 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.

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 10: 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_grid flag 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 indicates time slots that are outside business hours or otherwise unavailable. Bookings are only possible during the facility's operating hours. Because hours can vary by day of the week, a stripe may appear at the same time on one day but not another.

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 light-green cells stop partway down

Only a continuous run of available cells can be selected as a range. A booked cell anywhere in the sequence blocks further selection. Choose a shorter duration or a different start time with no booked cells below it.

Q: Some cells appear faded with a stripe and I cannot select them as an end time

The plan has a minimum booking duration. End time cells that would result in a booking shorter than that minimum are not selectable. For example, if the minimum is 90 minutes, the cell 60 minutes after your start cannot be chosen. Consider a longer booking duration or choose a plan without a minimum.

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.