Skip to main content
AppointmentScheduler is a full scheduling widget that lets users browse available slots, create new appointments, and manage existing ones — all from within your React application. It sends GET requests to list upcoming appointments and POST requests to create new ones, both routed through a backend proxy that you control.
Your ClinikAPI secret key must stay on the server. The AppointmentScheduler widget only communicates with the proxyUrl you provide. Your backend proxy authenticates users and calls ClinikAPI with your key.

​
Props

​
props.proxyUrl
string
required
URL of your backend proxy endpoint. The widget sends GET requests to list appointments and POST requests to create new ones. Both methods must be supported by this endpoint.
​
props.className
string
CSS class name applied to the widget’s root element for layout and theming control.
​
props.onError
(error: Error) => void
Callback invoked when a request to your proxy fails. Use this to display error notifications or log issues to your monitoring service.

​
Proxy setup

Your proxy endpoint needs to handle both GET (list/search) and POST (create) requests. The example below shows a Next.js App Router route: 
// app/api/clinik/appointments/route.ts
import { Clinik } from '@clinikapi/sdk';

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

// GET: list upcoming appointments
export async function GET(req: Request) {
  const { data } = await clinik.appointments.search({
    dateFrom: new Date().toISOString().split('T')[0],
    sort: 'date',
  });

  return Response.json(data);
}

// POST: create a new appointment
export async function POST(req: Request) {
  const body = await req.json();
  const { data } = await clinik.appointments.create(body);

  return Response.json(data);
}
In your POST handler, validate the incoming request body against your business rules (e.g. allowed appointment types, practitioner availability) before passing it to clinik.appointments.create.

​
Usage

import { AppointmentScheduler } from '@clinikapi/react';

export default function SchedulePage() {
  return (
    <AppointmentScheduler
      proxyUrl="/api/clinik/appointments"
      onError={(err) => console.error('Scheduler error:', err)}
    />
  );
}

​
What it supports

  • Viewing upcoming appointments sorted by date
  • Creating new appointments with type, date, time, and participant selection
  • Managing existing appointments (reschedule, cancel)
  • Status display (booked, pending, cancelled, fulfilled)
The widget uses the dateFrom parameter to show only upcoming appointments by default. Your proxy can apply additional filters — for example, scoping appointments to a specific patient or practitioner — before returning results.