How to Build an Appointment Scheduler for a Healthcare App (React)

Scheduling seems like the easy part of a healthcare app — until you actually build it. You're not just placing events on a calendar; you're handling service types, specialties, and priorities, and storing each booking as a proper clinical record so reminders and the chart stay in sync. Built from scratch, that's a calendar UI plus booking logic plus FHIR storage. With a pre-built component, it's a drop-in. This guide shows you how, step by step.

The toolkit we recommend is ClinikAPI — a FHIR-native platform with a React component library. Here's why we suggest it up front:

• Free to start: Get your API keys in seconds — no credit card needed.
• One component: AppointmentScheduler handles booking and managing visits.
• Stored as FHIR: Each appointment is a standard record, connected to the chart.
• Reminder-ready: Real-time events let you fire reminders automatically.
• Compliant: HIPAA-compliant, SOC 2-audited, with a signed BAA.

Quick Answer

To add appointment scheduling to a React healthcare app, use a pre-built FHIR-native component instead of building a calendar from scratch. ClinikAPI's AppointmentScheduler lets users book and manage appointments — with service type, specialty, and priority — and stores each as a FHIR Appointment record. You add the component, point it at a small route on your own backend (the proxyUrl), and pass a patientId. You skip the calendar UI, the booking logic, and the FHIR storage. And because appointments are FHIR records, you can fire reminders automatically with real-time events. The proxy route keeps your secret key server-side, and a theme prop matches your app.

Why scheduling is more than a calendar

A real scheduler has to:

• Capture clinical details — service type, specialty, priority — not just a time slot.
• Store bookings as records — so the chart and reminders stay in sync.
• Stay connected — to the patient and the rest of your data.

A plain calendar widget gives you none of that. A FHIR-native scheduler gives you all of it.

Step 1: Install and set up the proxy

Install the components and SDK, and set up the backend proxy route (the same pattern every ClinikAPI component uses):

npm install @clinikapi/react @clinikapi/sdk

The scheduler POSTs { action, data } to your route; you route the appointments.create action to the SDK:

// app/api/clinik/route.ts — server-only
import { Clinik } from '@clinikapi/sdk'

const clinik = new Clinik(process.env.CLINIKAPI_SECRET_KEY!)

export async function POST(req: Request) {
  const { action, data } = await req.json()
  // Authenticate + authorize for data.patientId first.
  switch (action) {
    case 'appointments.create':
      return Response.json(await clinik.appointments.create(data))
    default:
      return Response.json({ error: 'Unknown action' }, { status: 400 })
  }
}

When a user books, the SDK receives a FHIR-shaped Appointment — only status and patientId are required, the rest optional:

await clinik.appointments.create({
  status: 'booked',
  patientId: 'patient-123',
  practitionerId: 'practitioner-456',
  start: '2026-07-01T15:00:00Z',
  end: '2026-07-01T15:30:00Z',
  minutesDuration: 30,
  serviceType: 'consultation',
  specialty: 'general-practice',
  priority: 0,
  description: 'Annual wellness visit',
})
// → { data: Appointment, meta: { requestId, status, rateLimitRemaining, ... } }

(See the dashboard tutorial for the full route, response shape, and proxyUrl="demo" mode.)

Step 2: Drop in the scheduler

Add the component, point proxyUrl at your backend route, and pass the patientId:

import { AppointmentScheduler } from '@clinikapi/react'

export function Scheduling({ patientId }: { patientId: string }) {
  return (
    <AppointmentScheduler
      proxyUrl="/api/clinik"
      patientId={patientId}
      theme="light"
    />
  )
}

That's a working scheduler — booking and managing appointments, with each one stored as a FHIR Appointment record.

Step 3: Fire reminders automatically

Here's the payoff of storing appointments as FHIR records: you can react to them. Subscribe to real-time events and send a reminder the moment an appointment is booked — no polling:

// On your backend: send a reminder when an appointment is created
await clinik.events.subscribe({
  resource: 'Appointment',
  on: 'created',
  webhook: 'https://yourapp.com/hooks/send-reminder',
})

A simple automatic reminder measurably reduces no-shows — and it's just an event plus a message. (See Patient Engagement API.)

What you skipped

Product Insight: Why ClinikAPI Fits Scheduling

Scheduling that's disconnected from the chart causes missed reminders and drifting data. ClinikAPI keeps it connected.

What you get:

• AppointmentScheduler — booking and managing, with clinical details.
• FHIR Appointment records — connected to the patient and your data.
• Real-time events — automatic reminders on booking.
• The proxy pattern — your secret key stays server-side.
• Compliance included — HIPAA-compliant, SOC 2-audited, with a signed BAA.

See it in the UI Library, and read How to Build a Telehealth MVP Fast.

Frequently Asked Questions

1. How do I add scheduling to a React app?

Use ClinikAPI's AppointmentScheduler — add it with a proxyUrl and patientId, and it handles booking, managing, and FHIR storage.

2. What does AppointmentScheduler do?

It books and manages appointments with service type, specialty, and priority, storing each as a FHIR Appointment record.

3. Are appointments stored as FHIR?

Yes — as standard FHIR Appointment records, so scheduling stays connected to the chart and reminders.

4. Can I trigger reminders?

Yes — subscribe to real-time events and send a reminder the moment an appointment is booked, no polling.

5. Can I theme it?

Yes — a theme prop (like light or dark) matches your app.

Conclusion

Scheduling is more than a calendar — it's clinical details and connected records. With AppointmentScheduler, you drop in a full booking experience, store each appointment as a FHIR record, and fire reminders automatically with events, skipping the calendar UI, the booking logic, and the storage. Place the component, provide a patient ID, and scheduling is done — and connected to everything else in your app.

Key takeaways:

• A real scheduler handles service type, specialty, and priority — not just times.
• AppointmentScheduler books and manages visits with one component.
• Appointments are stored as FHIR records, connected to the chart.
• Real-time events let you fire reminders automatically and cut no-shows.
• The proxy pattern keeps your secret key server-side.

Ready to build? Explore the UI Library or get your free API keys.

Related Articles

• How to Build a Patient Dashboard in React
• Patient Engagement API: Portals, Reminders & Messaging
• How to Build a Telehealth MVP Fast
• Healthcare React Component Library: The Complete Guide
• Pre-Built Healthcare UI Components