Two booking modes.One flow.
Different responsibilities.

01 / FIELD NOTESTwo tabs, different responsibilities

The first booking tab is a three-step scheduler built in React. It asks for a service, a barber and a time. That lets someone try the flow without needing an account with another service.

The second tab is an external scheduler embed. The original account describes accepting a visitor's Calendly or Cal.com link so an owner can see an existing tool inside the design.

Those modes may sit beside each other, but they are not equivalent implementations. The built-in scheduler is a front-end demonstration; it does not persist a reservation. The external mode relies on whatever the scheduling provider and its configuration actually support.

02 / FIELD NOTESThe URL handler formats a string

The original handler is small enough to read in full:

const loadCustomCalendly = (e: React.FormEvent) => {
  e.preventDefault();
  if (tempCalendlyUrl.trim()) {
    // Basic formatting to ensure it's a valid embed url
    let url = tempCalendlyUrl.trim();
    if (!url.startsWith("http://") && !url.startsWith("https://")) {
      url = "https://" + url;
    }
    setCalendlyUrl(url);
    setUrlLoaded(true);
  }
};

It prevents the form's default submission, checks that the trimmed input is nonempty, and adds https:// if the value does not start with lowercase http:// or https://. It then stores the result and marks the URL as loaded in component state.

The comment says “valid embed url,” but the code shown does not parse a URL, check a hostname or prove that a provider will permit embedding. A nonempty arbitrary string can pass through this transformation. The title of a state flag is not a network success receipt either.

This inspector follows the published formatting behavior exactly and displays the result as text. It never creates an iframe or follows the value. That keeps the explanation focused on what the excerpt establishes without treating arbitrary input as a trusted destination.

03 / FIELD NOTESSelection is not confirmation

For the local scheduler, the interaction can be demonstrated independently of live availability. Pick a service, a barber and a sample time; then revisit any choice.

The project page's companion example stops at a summary labeled “No appointment booked.” That is new explanatory behavior for the portfolio, not a claim that it is the original booking component. The built-in submissions in the documented version do not persist.

The original article also describes a comparison between booking through messages and choosing a slot in a scheduler. That is a useful framing for the page's purpose. It does not supply data showing fewer missed messages, a higher booking rate or less staff time.

04 / FIELD NOTESWhat the production version would still need

The source proposes a Worker and email notifications as the next step for the local scheduler, plus an Instagram feed in place of the static work grid. Both remained future work when the article was published.

Before publishing stronger claims about the external mode, the actual embed implementation and provider configuration also need checking. The supplied handler alone cannot answer whether a particular Calendly or Cal.com link will render successfully.

The pattern is the useful part: let the website explain the service and bring a visitor to the booking task. Keep the statement about whether an appointment exists tied to the system that actually records it.