← SitemapWF-47 · Availability calendarPopdance wireframes · low-fidelity · numbered markers match the notes at the bottom
URL/dashboard/availability
AudienceTeacher
TemplateApp screen
PriorityLaunch (P1)
🔔 3✉ Messages
 

Availability1

Control when customers can book you instantly. Bookings and blocked dates stop dates showing as available on your profile and services.

Calendar synced 5 min agoSave changes
←

November 20262

→Today
MonthWeekList
Mon
Tue
Wed
Thu
Fri
Sat
Sun
26
27
28
29
30
31
Party 2pm
1
Class 11am
2
3
4
5
6
7
Hen 6pm
8
Blocked
9
10
11
12
13
14
Request
15
16
17
18
19
20
21
Request
22
23
Holiday
24
Holiday
25
Holiday
26
Holiday
27
Holiday
28
Holiday
29
Holiday
30
1 Dec
2 Dec
3 Dec
4 Dec
5 Dec
6 Dec

Key: white = available · green = booked · grey = blocked or outside notice window · amber badge = pending request (held for 48 hours, not yet blocking).

Block dates or times3

23/11/2026
29/11/2026
Holiday
All day
Repeat every year

Error: "End date must be on or after the start date." Warning when a confirmed booking exists: "You have a booking on 25 Nov. Blocking will not cancel it."

Weekly hours4

DayAvailableHours
Mon☐-
Tue☑16:00 to 20:00
Wed☑16:00 to 20:00
Thu☑16:00 to 20:00
Fri☑16:00 to 22:00
Sat☑09:00 to 21:00
Sun☑10:00 to 17:00

Add a second time range per day (for example 09:00 to 12:00 and 15:00 to 18:00). Overlaps are rejected.

Booking rules5

7 days
12 months ahead
60 minutes
2
15 miles

Postcode LS6 1AB. Extra fee over 10 miles shown on services.

Calendar sync6

Connected: Google Calendar (amy@example.com)

Block times when I am busy in my calendar (read)
Add confirmed Popdance bookings to my calendar (write)

Also available: private iCal feed link for your bookings.

Notes

  1. Page header. Explains that availability drives instant book on 07-service-detail.html and 06-teacher-profile.html. Shows sync status and a global Save. Unsaved changes prompt on exit.
  2. Month calendar. Views: month, week, list. Cell states: available, booked (links to 50-teacher-bookings.html), blocked, outside notice window, pending request (links to 48-requests-inbox.html). Click an empty date to open the block dialog preset to that date, drag across dates to block a range. Keyboard accessible, with day labels read as "Saturday 31 October, booked".
  3. Block dates. Range with optional times, private reason, annual repeat. Validation shown beneath. Blocking does not cancel confirmed bookings, it only prevents new ones. Undo toast for 8 seconds after saving.
  4. Weekly hours. Recurring working pattern with up to 2 ranges per day. Times use 24 hour format in UK time, stored in UTC with the teacher's timezone. Default for new teachers: closed until set, with a first-run prompt.
  5. Booking rules. Notice, horizon, buffer, daily cap and travel radius. Travel radius mirrors 45-profile-editor.html and wizard step 4. Rules apply to instant book only; custom requests can still be sent outside them and the teacher decides.
  6. Calendar sync. Two-way via Google and Microsoft OAuth, one-way via iCal feed. Read sync blocks time; write sync adds confirmed bookings with address and customer first name only. Failed sync shows a banner with reconnect.

Data. Tables: availability_rules, blocked_periods, bookings, external_busy_cache. Analytics: availability_blocked, calendar_connected, availability_rules_saved.

Mobile

Calendar defaults to a week list (one day per row) with a month mini-picker. Tap a day to open a bottom sheet with that day's bookings and a "Block this day" action. Weekly hours become an accordion by day. Right-hand cards stack below the calendar.

States

Empty (new teacher): hours not set; banner "Set your weekly hours so customers can book you" and instant book is disabled. Loading: calendar skeleton. Sync error: "We could not reach Google Calendar. Reconnect to keep your availability up to date." Conflict: a pending request on a date that is then booked elsewhere shows a warning. Offline: edits queued locally with a warning. Past dates are read-only.