Provider guide
Provider calendar tutorial
This tutorial explains the provider calendar page: weekly navigation, availability blocks, job types, travel/setup buffers, Google Calendar sync, add/edit slot modal, validation, and mobile behaviour.
Weekly calendar
Availability blocks
Google Calendar
Buffers
Provider calendar · /provider/calendar
Provider identity — loads provider profile and redirects to login on 401.
Week view — shows seven days from Sunday to Saturday using the selected weekStart.
Slot data — fetches provider slots for the current week from the provider slots API.
Status colours — booked, tentative, blocked, and available all have different colours.
Add/edit modal — create new blocked/external slots, or edit existing non-charter slots.
Google Calendar — provider can connect, sync, or disconnect Google Calendar blocks.
Purpose: Providers use this page to prevent double-booking and manage availability outside BookMyWave charter jobs.
What you see — full-width weekly calendar
← Dashboard
Booked
9:00am – 1:00pm
Charter · CHR-ABC123
📍 Darling Harbour
↑ 30min before ↓ 30min after
Tentative
2:00pm – 5:00pm
External · Smith Wedding
Available
10:00am – 4:00pm
External
Provider calendar · Week navigation
Week start — calculated from the selected date using Sunday as first day.
Previous/next — arrow buttons move weekStart by seven days.
Today — resets weekStart to the current week.
Week label — displays first and last day in compact en-AU format.
Result: Changing the week triggers a reload for that date range.
Provider calendar · Status and job types
Booked — confirmed job, blue display.
Tentative — hold or quote sent, amber display.
Blocked — unavailable, slate display.
Available — explicitly open time, green display.
Job types — Charter, External, Personal, and Travel are displayed inside each slot.
Legend
Booked
Tentative
Blocked
Available
Job type copy: External is your own client, Personal is day off/sick, Travel is in transit, Charter is platform booking.
Provider calendar · Google Calendar sync
Redirect params — reads gcal=connected, denied, or error and shows toast feedback.
Status check — fetches Google Calendar connection status on page load.
Connect — when not connected, shows Connect GCal link.
Sync — when connected, button calls sync-provider and reloads slots.
Disconnect — confirms first; existing blocked slots remain.
After OAuth: URL is cleaned back to /provider/calendar so the gcal query string does not remain visible.
Google Calendar states
▣ Connect GCal
▣ GCal ✓
Syncing...
✕
Sync toast: “Synced — X new blocks created”.
Provider calendar · Calendar grid
Seven columns — desktop grid displays Sunday through Saturday.
Today highlight — current day gets blue border and blue date number.
Day plus button — opens create modal for that specific day.
Empty day — “Click to add” area opens create modal for the empty date.
Responsive — becomes 3 columns under 1000px and 2 columns under 600px.
Grid preview
Booked
9:00am – 1:00pm
Charter · CHR-ABC123
Tentative
2:00pm – 5:00pm
External
Available
10:00am – 4:00pm
External
Provider calendar · Slot block anatomy
Status badge — top label uses STATUS_CONFIG label and colour.
Time — shows All day or formatted start and end time.
Type line — shows job type label, booking ref if present, and client name if present.
Location — optional line with map pin icon.
Buffers — before/after tags appear only when buffer minutes are greater than zero.
Slot examples
Booked
9:00am – 1:00pm
Charter · CHR-ABC123 · Smith Wedding
📍 Darling Harbour
↑ 30min before ↓ 30min after
Provider calendar · Add/edit slot modal
Open create — + Add slot or day + opens modal with blankForm.
Open edit — clicking a slot copies existing data into the form.
Status and type — required dropdowns shown at the top.
Date and time — date is required; timed slots require From and To.
Save action — POST for create, PUT for edit.
After save — modal closes and slots reload for the current week.
Modal preview
Status * Blocked — unavailable
Type * External — my own client
Date *
Provider calendar · Validation
Date required — slot_date must exist.
Timed slots — time_from and time_to are required unless all day is enabled.
Time order — end time must be after start time.
Global error — API save/delete errors show above the form.
Network error — save failure shows “Network error. Try again.”
Validation examples
Global error: Failed to save or Network error. Try again.
Provider calendar · Travel/setup buffers
Timed only — buffer controls are hidden when All day is on.
Options — none, 15, 30, 45, 60, 90, and 120 minutes.
Before slot — blocks setup/travel time before the job.
After slot — blocks travel/pack-down time after the job.
Availability check — buffer times are included automatically in availability logic.
Use case: Add 60 minutes before and after a job when travelling between wharves or events.
Buffer box
Travel / setup buffers
Blocks extra time around this slot so you're never double-booked while travelling or setting up.
Before slot 30 min
After slot 1 hour
Provider calendar · Private job details
Client/company — optional private label for the provider’s own job.
Location — optional location shown inside slot block when saved.
Booking reference — only shown when job type is charter.
Notes — provider’s private reminder field.
Privacy: These details are labelled as only visible to the provider.
Provider calendar · Delete and charter restrictions
Edit mode only — delete button appears only when editing an existing slot.
Non-charter only — delete button is hidden for charter job_type.
Charter note — charter slots show “managed by booking system”.
Confirm first — delete asks “Delete this slot?” before sending DELETE request.
After delete — modal closes and slots reload.
Provider calendar · Loading and error states
Initial loading — spinner shown while provider identity is checked.
401 — provider is redirected to provider login.
Error — error text appears in red loading area.
Slots loading — day columns show shimmer placeholder while current week slots are loading.
Silent slot failure — slot load failure is caught silently to avoid breaking the full page.
Loading state
Error state
Failed to load provider calendar
Provider calendar · Mobile layout
Grid changes — seven columns on desktop, three on tablet, two on small phones.
Legend hidden — status legend is hidden under 600px to reduce clutter.
Provider nav links — nav links are hidden on small screens by ProviderNav CSS.
Modal form — two-column rows become one column.
Touch workflow — day + buttons, empty day boxes, and slot blocks are all tap targets.
Mobile use case: Providers can quickly block time on the go after accepting an external job or travel commitment.
Mobile-style grid
Booked
9:00am – 1:00pm
Charter