Google Calendar integration for date availability #3

Closed
opened 2026-07-07 21:37:57 -06:00 by jhodgkin · 0 comments
Owner

Goal

Step 1 of the booking form shows a calendar where only dates the photographer is actually available can be selected.

Setup

  • Create a Google Cloud project, enable Calendar API, create a Service Account
  • Share the photographer's Google Calendar with the service account (read-only)
  • Store GOOGLE_SERVICE_ACCOUNT_JSON and GOOGLE_CALENDAR_ID in api/.env

API endpoint

GET /api/availability?month=YYYY-MM

  • Uses googleapis Node.js client to call freebusy query for the requested month
  • Returns array of available date strings ["2026-07-12", "2026-07-14", ...]
  • Caches result in memory for 15 minutes to avoid hammering the API

Frontend

  • Step 1 renders a month calendar grid
  • Fetches available dates from /api/availability on load and on month change
  • Unavailable dates are greyed out and unclickable
  • Selected date is highlighted
  • Month navigation (prev/next) re-fetches availability

Acceptance

  • Dates marked busy in Google Calendar appear greyed out
  • Selecting an available date advances to step 2
## Goal Step 1 of the booking form shows a calendar where only dates the photographer is actually available can be selected. ## Setup - Create a Google Cloud project, enable Calendar API, create a Service Account - Share the photographer's Google Calendar with the service account (read-only) - Store `GOOGLE_SERVICE_ACCOUNT_JSON` and `GOOGLE_CALENDAR_ID` in `api/.env` ## API endpoint `GET /api/availability?month=YYYY-MM` - Uses googleapis Node.js client to call `freebusy` query for the requested month - Returns array of available date strings `["2026-07-12", "2026-07-14", ...]` - Caches result in memory for 15 minutes to avoid hammering the API ## Frontend - Step 1 renders a month calendar grid - Fetches available dates from `/api/availability` on load and on month change - Unavailable dates are greyed out and unclickable - Selected date is highlighted - Month navigation (prev/next) re-fetches availability ## Acceptance - Dates marked busy in Google Calendar appear greyed out - Selecting an available date advances to step 2
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: jhodgkin/lisilou-portfolio#3