My Modern Goog Cal

Google Calendar Reimagined

Comment

My Modern Goog Cal The Classic Product & The Problem (The Inspiration) Google Calendar is an iconic, classic product that runs the world's schedules. But when it comes to integrating it into a personal website or portfolio, the "classic" solution is to paste a clunky, rigid iframe that looks entirely out of place, or pay for an expensive third-party service like Calendly. Building a custom widget from scratch usually means either dealing with complex backend servers or accidentally exposing your private Google API tokens in your frontend code for anyone to steal.

We wanted to reimagine the classic Google Calendar embed. The goal: build a modern, ultra-fast, perfectly themeable booking widget that developers and creators can drop into their personal sites securely, without spinning up heavy servers or paying subscription fees.

Our Reimagined Solution My Modern Goog Cal is a lightweight, embeddable widget powered by edge-computing. It allows visiting users to view free-time availability on your calendar and instantly book a meeting with an agenda—all while matching the exact visual theme of your host website.

It solves a real-world problem for freelancers, developers, and creators who need a low-friction, native-feeling booking system (High Impact) with a seamless, integrated user experience (Design & UX).

How It Works & Key Features Dynamic Theming Engine (Design/UX): Using responsive CSS variables (e.g., --widget-bg, --text-color), the widget automatically inherits the color scheme of the specific container it is dropped into on the host website. It doesn't look like an embed; it looks like a native part of the site.

Real-Time Availability (Functionality): The widget queries your primary Google Calendar in real-time, finds the white space (free time), and presents clickable time slots to the visitor.

One-Click Booking: Visitors simply enter their email and meeting agenda, and the widget automatically creates the event on your calendar and sends an official Google Calendar invite to their inbox.

Edge-Proxy Architecture: The frontend never talks to Google. Instead, it securely communicates with a globally distributed Edge Worker.

Under the Hood: How We Built It (Technical Difficulty) To make this lightweight but secure, we engineered a serverless proxy architecture:

The Edge Backend: We deployed a Cloudflare Worker to act as a secure intermediary. Because Workers run on ultra-fast V8 isolates rather than a full Node.js environment, we bypassed heavy SDKs and wrote custom native fetch requests directly to the Google Calendar v3 REST API.

Stateless OAuth Authentication: We utilized Google's OAuth 2.0 flow but optimized it for a hackathon/personal-use environment. By authorizing the app once via the OAuth Playground, we generated a long-lived Refresh Token.

On-the-Fly Token Exchange: The Cloudflare Worker securely stores the Refresh Token using encrypted environment secrets. Whenever a visitor loads the widget, the Worker dynamically exchanges the refresh token for a fresh, short-lived Access Token, fetches the availability, and returns it to the UI in milliseconds.

Challenges We Conquered The biggest technical hurdle was handling Google's OAuth flow securely without a dedicated database or user login screen. You cannot expose an Access Token on the frontend because a malicious actor could extract it and wipe your calendar. We solved this by abstracting the entire Google API interaction into the Cloudflare Worker. Getting the native REST API calls formatted correctly (like the freeBusy query and timezone handling) without relying on the massive googleapis npm package required deep-diving into Google's API documentation.

What's Next for My Modern Goog Cal Multi-Calendar Support: Expanding the edge proxy to aggregate free/busy data from Outlook and Apple Calendars.

AI-Powered Agendas: Integrating an LLM to auto-suggest meeting lengths and formats based on the agenda the visitor types in.

Built With

Share this project:

Updates