DEV Community: Mohammed Obaid

Room booking app with Next.js and Prisma

Mohammed Obaid — Wed, 14 Oct 2026 15:22:33 +0000

The room booking tutorial ends with "check again on the server". This one builds that server. You get a Next.js App Router app where rooms and bookings live in Postgres through Prisma, the calendar is Resource Scheduler in a client component, and the route handlers decide whether a booking is allowed.

Every file is in the steps below, so you can copy them in order. The finished app is also in the repository as the resource-scheduler-rooms-starter folder; fetch just that folder with npx degit mdobaid311/resource-scheduler/resource-scheduler-rooms-starter rooms.

See the browser side running live: interactive demo (it has no server, so its data resets on reload).

Drag across free time on a room to open the form. The app you build adds three things to it: the data comes from a database, a save can be refused by the server, and a refused save rolls back on screen.

Versions. The snippets are written for Next.js 15 (in 14, params in a route handler is not a Promise) and Prisma 6 with Postgres. Newer Prisma majors changed how the client is generated and how the connection is configured, so follow the Prisma docs for that part. The queries and the transaction do not depend on it.

How the pieces fit

The server component app/page.tsx reads rooms and bookings with Prisma and passes them as plain strings.
The client component app/board.tsx renders ResourceScheduler and sends changes to the API.
The route handlers under app/api/bookings call one function, which re-checks the placement with isPlacementAllowed inside a transaction.
The browser and the server share one object, bookingRules, so they cannot disagree about what "free" means.

1. Create the app

npx create-next-app@latest rooms --ts --app
cd rooms
npm install resource-scheduler @prisma/client
npm install -D prisma@6
npx prisma init --datasource-provider postgresql

Put your Postgres connection string in .env as DATABASE_URL. Any Postgres works, local or hosted.

2. The schema

Store times as DateTime. Prisma saves them in UTC, and the end is exclusive: a booking that ends at 10:00 does not collide with one that starts at 10:00.

prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Room {
  id       String    @id @default(cuid())
  name     String
  seats    Int
  bookings Booking[]
}

model Booking {
  id        String   @id @default(cuid())
  title     String
  roomId    String
  room      Room     @relation(fields: [roomId], references: [id])
  startsAt  DateTime
  endsAt    DateTime
  createdAt DateTime @default(now())

  @@index([roomId, startsAt])
}

Create the tables and two rooms to play with:

npx prisma migrate dev --name init

prisma/seed.ts

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

async function main() {
  await prisma.room.createMany({
    data: [
      { name: "Atlas", seats: 8 },
      { name: "Borealis", seats: 4 },
    ],
  });
}

main().finally(() => prisma.$disconnect());

npx tsx prisma/seed.ts

3. Shared code

One Prisma client for the whole dev server (Next.js reloads modules, and without this every reload opens a new connection pool):

lib/db.ts

import { PrismaClient } from "@prisma/client";

const globalForPrisma = globalThis as unknown as { prisma?: PrismaClient };

export const prisma = globalForPrisma.prisma ?? new PrismaClient();

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

The rule, in one place. The client spreads it onto the component, and the server hands the same object to isPlacementAllowed:

lib/rules.ts

export const bookingRules = { eventOverlap: false as const };

A booking crosses the server boundary and the network as JSON, where a Date becomes a string. This is the shape on the wire:

lib/dto.ts

import type { Booking } from "@prisma/client";

export type BookingDTO = {
  id: string;
  title: string;
  roomId: string;
  startsAt: string;
  endsAt: string;
};

export const toDTO = (b: Booking): BookingDTO => ({
  id: b.id,
  title: b.title,
  roomId: b.roomId,
  startsAt: b.startsAt.toISOString(),
  endsAt: b.endsAt.toISOString(),
});

4. The page loads rooms and bookings

A server component can read the database directly. It loads the rooms and a window of bookings around now (for a long range, fetch per visible range with onRangeChange, see Loading and control). It also passes the current time as a string, so the first render on the server and in the browser start on the same day. See Next.js and SSR.

app/page.tsx

import { prisma } from "@/lib/db";
import { toDTO } from "@/lib/dto";
import { Board } from "./board";

export const dynamic = "force-dynamic"; // read the database per request, not at build time

const DAY = 24 * 60 * 60 * 1000;

export default async function Page() {
  const now = new Date();
  const [rooms, bookings] = await Promise.all([
    prisma.room.findMany({ orderBy: { name: "asc" } }),
    prisma.booking.findMany({
      where: {
        endsAt: { gt: new Date(now.getTime() - DAY) },
        startsAt: { lt: new Date(now.getTime() + 14 * DAY) },
      },
    }),
  ]);

  return (
    <main style={{ padding: 16 }}>
      <Board
        rooms={rooms.map((r) => ({ id: r.id, name: `${r.name} (${r.seats} seats)` }))}
        initial={bookings.map(toDTO)}
        initialDate={now.toISOString()}
      />
    </main>
  );
}

5. The server decides

This is the file the whole tutorial is for. A booking is allowed only if isPlacementAllowed says so for the room's current bookings, and the check and the write happen in one Serializable transaction, so two requests that both read "free" cannot both commit.

lib/bookings.ts

import { Prisma } from "@prisma/client";
import { isPlacementAllowed } from "resource-scheduler/headless";
import type { Resource } from "resource-scheduler/headless";
import { prisma } from "./db";
import { bookingRules } from "./rules";

export class Conflict extends Error {}
export class NotFound extends Error {}

type Slot = { roomId: string; start: Date; end: Date };

const inTransaction = <T>(run: (tx: Prisma.TransactionClient) => Promise<T>) =>
  prisma.$transaction(run, { isolationLevel: Prisma.TransactionIsolationLevel.Serializable });

// Throws Conflict unless the booking `id` (none, for a new one) may take this slot.
async function assertFree(tx: Prisma.TransactionClient, id: string | undefined, { roomId, start, end }: Slot) {
  const room = await tx.room.findUnique({
    where: { id: roomId },
    include: { bookings: { where: { startsAt: { lt: end }, endsAt: { gt: start } } } },
  });
  if (!room) throw new NotFound();

  const resource: Resource = {
    id: room.id,
    name: room.name,
    events: room.bookings.map((b) => ({ id: b.id, title: b.title, startDate: b.startsAt, endDate: b.endsAt })),
  };
  const moving = { id: id ?? "new", title: "", startDate: start, endDate: end };

  if (!isPlacementAllowed(moving, { resourceId: roomId, start, end }, [resource], bookingRules)) {
    throw new Conflict();
  }
}

export const createBooking = (slot: Slot & { title: string }) =>
  inTransaction(async (tx) => {
    await assertFree(tx, undefined, slot);
    return tx.booking.create({
      data: { roomId: slot.roomId, title: slot.title, startsAt: slot.start, endsAt: slot.end },
    });
  });

export const moveBooking = (id: string, slot: Slot) =>
  inTransaction(async (tx) => {
    if (!(await tx.booking.findUnique({ where: { id } }))) throw new NotFound();
    await assertFree(tx, id, slot); // the booking's own old time is ignored: its id is `id`
    return tx.booking.update({
      where: { id },
      data: { roomId: slot.roomId, startsAt: slot.start, endsAt: slot.end },
    });
  });

The query already narrows to bookings that overlap the slot, and isPlacementAllowed applies the same overlap rule the browser used, including ignoring the booking being moved. Under Serializable, Postgres aborts one of two conflicting transactions when it commits; Prisma reports that as error P2034, which the next file also turns into a 409 (retrying once is an equally good answer).

Two small helpers turn requests into slots and errors into responses:

lib/http.ts

import { Prisma } from "@prisma/client";
import { Conflict, NotFound } from "./bookings";

// body comes from request.json(), so nothing in it is trusted.
export function parseSlot(body: { roomId?: unknown; startsAt?: unknown; endsAt?: unknown }) {
  const start = new Date(body.startsAt as string);
  const end = new Date(body.endsAt as string);
  if (typeof body.roomId !== "string" || !(start < end)) return null; // also catches Invalid Date
  return { roomId: body.roomId, start, end };
}

export function fail(error: unknown) {
  if (error instanceof Conflict || (error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2034")) {
    return Response.json({ error: "That time was just booked." }, { status: 409 });
  }
  if (error instanceof NotFound) return Response.json({ error: "Not found." }, { status: 404 });
  throw error;
}

The route handlers are thin:

app/api/bookings/route.ts

import { createBooking } from "@/lib/bookings";
import { toDTO } from "@/lib/dto";
import { fail, parseSlot } from "@/lib/http";

export async function POST(request: Request) {
  const body = await request.json().catch(() => ({}));
  const slot = parseSlot(body);
  const title = typeof body.title === "string" ? body.title.trim() : "";
  if (!slot || !title) return Response.json({ error: "Invalid booking." }, { status: 400 });

  try {
    return Response.json(toDTO(await createBooking({ ...slot, title })), { status: 201 });
  } catch (error) {
    return fail(error);
  }
}

app/api/bookings/[id]/route.ts

import { moveBooking } from "@/lib/bookings";
import { toDTO } from "@/lib/dto";
import { fail, parseSlot } from "@/lib/http";

export async function PATCH(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const slot = parseSlot(await request.json().catch(() => ({})));
  if (!slot) return Response.json({ error: "Invalid booking." }, { status: 400 });

  try {
    return Response.json(toDTO(await moveBooking(id, slot)));
  } catch (error) {
    return fail(error);
  }
}

This app has no sign-in. Anyone who can reach these routes can book and move anything. Before real use, check the user in each handler, and let a person change only their own bookings.

6. The calendar, with optimistic updates

The client component keeps the bookings in state and renders them through the flat events prop, each with a resourceId, which maps straight onto database rows. The key idea of an optimistic update: show the change at once, send it, and undo it if the server says no. A booking that is still being saved is drawn grey and has a temporary id.

app/board.tsx

"use client";

import { useState } from "react";
import { ResourceScheduler, ViewType } from "resource-scheduler";
import type { SchedulerEvent, SlotSelection } from "resource-scheduler";
import "resource-scheduler/dist/resource-scheduler.css";
import type { BookingDTO } from "@/lib/dto";
import { bookingRules } from "@/lib/rules";

type Room = { id: string; name: string };

const PENDING = "pending-";

const toEvent = (b: BookingDTO): SchedulerEvent => ({
  id: b.id,
  title: b.title,
  resourceId: b.roomId,
  startDate: new Date(b.startsAt),
  endDate: new Date(b.endsAt),
});

async function send(url: string, method: "POST" | "PATCH", body: unknown): Promise<BookingDTO> {
  const response = await fetch(url, {
    method,
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body), // a Date becomes an ISO string
  });
  if (response.status === 409) throw new Error("Someone just booked that time.");
  if (!response.ok) throw new Error("The booking could not be saved.");
  return response.json();
}

export function Board({ rooms, initial, initialDate }: { rooms: Room[]; initial: BookingDTO[]; initialDate: string }) {
  const [bookings, setBookings] = useState(() => initial.map(toEvent));
  const [start] = useState(() => new Date(initialDate));
  const [draft, setDraft] = useState<SlotSelection | null>(null);
  const [message, setMessage] = useState("");

  async function book(slot: SlotSelection, title: string) {
    const tempId = PENDING + crypto.randomUUID();
    setMessage("");
    setBookings((all) => [
      ...all,
      { id: tempId, title, resourceId: slot.resourceId, startDate: slot.start, endDate: slot.end, color: "#94a3b8" },
    ]);
    try {
      const saved = toEvent(await send("/api/bookings", "POST", { roomId: slot.resourceId, title, startsAt: slot.start, endsAt: slot.end }));
      setBookings((all) => all.map((b) => (b.id === tempId ? saved : b)));
    } catch (error) {
      setBookings((all) => all.filter((b) => b.id !== tempId)); // roll back
      setMessage((error as Error).message);
    }
  }

  async function reschedule(event: SchedulerEvent, roomId: string, startDate: Date, endDate: Date) {
    if (event.id.startsWith(PENDING)) return; // not saved yet, so there is nothing to patch
    const before = bookings.find((b) => b.id === event.id);
    setMessage("");
    setBookings((all) => all.map((b) => (b.id === event.id ? { ...b, resourceId: roomId, startDate, endDate } : b)));
    try {
      await send(`/api/bookings/${event.id}`, "PATCH", { roomId, startsAt: startDate, endsAt: endDate });
    } catch (error) {
      if (before) setBookings((all) => all.map((b) => (b.id === event.id ? before : b))); // roll back
      setMessage((error as Error).message);
    }
  }

  return (
    <>
      {draft && (
        <form
          onSubmit={(e) => {
            e.preventDefault();
            book(draft, String(new FormData(e.currentTarget).get("title")));
            setDraft(null);
          }}
        >
          <input name="title" aria-label="Title" placeholder="Meeting title" required autoFocus />
          <button type="submit">Book</button>
          <button type="button" onClick={() => setDraft(null)}>Cancel</button>
        </form>
      )}
      {message && <p role="alert">{message}</p>}
      <div style={{ height: 440 }}>
        <ResourceScheduler
          {...bookingRules}
          resources={rooms}
          events={bookings}
          initialDate={start}
          initialView={ViewType.Day}
          allowViewChange={false}
          slotDuration={30}
          dayStartHour={8}
          dayEndHour={18}
          ariaLabel="Meeting room bookings"
          onSlotSelect={setDraft}
          onEventDrop={(event, _from, to, s, e) => reschedule(event, to, s, e)}
          onEventResize={(event, roomId, s, e) => reschedule(event, roomId, s, e)}
        />
      </div>
    </>
  );
}

Why it holds together:

Board passes callbacks and holds state, so it has to be a client component. The scheduler's own bundle already starts with "use client".
The browser refuses overlaps before the drop (the place turns red), so most conflicts never reach the server. The ones that do, from two people at once or from someone who skips the UI, come back as 409 and are rolled back with a message.
reschedule serves both moving and resizing: both end with a room and a new start and end. Without onEventResize there would be no resize handles.
The rooms are plain { id, name } rows. The bookings are the single flat list in events, so no room carries its own events.

7. Try it

npm run dev

Open the page, drag across free time on Atlas and book it. Then ask the server directly, with the same body twice, to see the guard work without the UI (replace the room id with one from npx prisma studio):

curl -i -X POST localhost:3000/api/bookings -H "Content-Type: application/json" \
  -d '{"roomId":"ROOM_ID","title":"Standup","startsAt":"2026-10-20T09:00:00Z","endsAt":"2026-10-20T09:30:00Z"}'

The first call answers 201, the second 409. Open the page in two windows, book the same free slot in both, and the second window shows the grey block disappear with "Someone just booked that time."

Going further

A second line of defence in the database. Postgres can refuse overlapping rows by itself with an exclusion constraint on a tsrange of the two columns (CREATE EXTENSION btree_gist, then EXCLUDE USING gist ("roomId" WITH =, tsrange("startsAt", "endsAt") WITH &&)), added to a migration you create with npx prisma migrate dev --create-only. It is optional here, because the transaction already covers the normal case.
Rules beyond overlap (office hours, a seat limit, no booking in the past): put them in isValidDrop inside bookingRules. The browser and the server then both apply them. See Conflict control.
Recurring bookings: store the rule next to the booking and let expandEvents produce the occurrences. See Recurring events.
Rooms in several time zones: Time zones.
React 19 has useOptimistic. The plain useState version above does the same job and works on React 18 too.

Where next

The front-end only version: React room booking calendar.
The finished room booking recipe, with business hours, capacity and recurring bookings.
Next.js and SSR and Build your own UI for the server entry point.

Originally published at https://resource-scheduler-docs.vercel.app/tutorials/react-room-booking-nextjs-prisma/.

React equipment rental calendar

Mohammed Obaid — Wed, 14 Oct 2026 15:17:57 +0000

A rental calendar has the things you rent down the side and the days across the top. Some things are one unit (a van), some are a pool (three projectors), one is in for service on a day, and the question you get all day is "when is it free for three days?". This tutorial builds that with Resource Scheduler in seven steps. It is the same component running below.

See it running live: interactive demo.

Try three things. Drag the Delivery van booking to Tuesday on the projectors: three projectors are already out that day, so the drop turns red and nothing moves. Drag it to the PA system on Wednesday: that day is a service day, so it is refused too. Then pick "3 free days" for the PA system and press Find: the grid jumps to the first stretch that is free.

1. Install

npm install resource-scheduler

Works with React 18 and 19. Import the stylesheet once; it is scoped, so it does not restyle the rest of your page:

import "resource-scheduler/dist/resource-scheduler.css";

2. Things you rent are rows, and a pool is one row

Each thing is a resource. A pool of identical units is still one row: capacity says how many units are in stock. A service day is a range in unavailable:

import type { ResourceInput } from "resource-scheduler";

const items: ResourceInput[] = [
  { id: "projector", name: "Projector (3 units)", capacity: 3 },
  { id: "camera", name: "Camera kit (2 units)", capacity: 2 },
  { id: "pa", name: "PA system", unavailable: [{ start: new Date(2026, 9, 7), end: new Date(2026, 9, 8) }] }, // serviced on Wednesday
  { id: "van", name: "Van" }, // capacity defaults to 1
];

In a database this is an items table with a units column, plus a table of service windows that you turn into unavailable ranges.

3. A rental is whole days, and the end is exclusive

A rental is an event on the row it takes from. Rentals are whole days, so the dates are midnights, and endDate is exclusive: it is the morning after the last day rented. A three-day rental from the 5th to the 7th ends on the 8th:

import type { SchedulerEvent } from "resource-scheduler";

const rentals: SchedulerEvent[] = [
  {
    id: "r1",
    title: "Acme Co",
    resourceId: "projector",         // the row it belongs to
    startDate: new Date(2026, 9, 5), // pickup day, midnight
    endDate: new Date(2026, 9, 8),   // exclusive: the last day rented is the 7th
  },
];

If your table stores the last day rented, add one day when you load a row. Events are a flat list that names its row with resourceId, so the list can come straight from one query.

4. Draw the week

import { ResourceScheduler, ViewType } from "resource-scheduler";

<div style={{ height: 690 }}>
  <ResourceScheduler
    resources={items}
    events={rentals}
    initialView={ViewType.Week}
    availableViews={[ViewType.Week, ViewType.Month]}
    weekStartsOn={1}
    showUtilization
    blockUnavailable
    resourceColumnWidth="190px"
    dateColumnWidth="110px"
    ariaLabel="Equipment rentals"
  />
</div>

The component fills its parent, so the parent needs a height. Each prop is one rule:

Prop	What it does
`blockUnavailable`	No rentals on a service day: the shaded days refuse a drop and a selection
`showUtilization`	A bar per item: unit-days rented against unit-days in stock (utilization)
`availableViews`	Week and month only; for hourly rental use the day view and `slotDuration`
`weekStartsOn={1}`	The week starts on Monday

5. Never more rentals than units

eventOverlap={false} is right for a single unit, but a pool of three projectors may overlap up to three times. capacity only feeds the utilization numbers, so enforce the count yourself. isValidDrop is a final veto: it runs for every move, resize and selection, with the row and range being tried, and false refuses it.

The count of bookings only changes where a booking starts, so check those moments:

import { rangesOverlap } from "resource-scheduler";

// Whether one more booking on [start, end) fits next to `others` without more than
// `capacity` at any moment. The count only changes where a booking starts, so check those.
const fits = (others: SchedulerEvent[], start: Date, end: Date, capacity: number) => {
  const busy = others.filter((e) => rangesOverlap(start, end, e.startDate, e.endDate));
  const moments = [start, ...busy.map((e) => e.startDate).filter((t) => t > start)];
  return moments.every((t) => busy.filter((e) => e.startDate <= t && t < e.endDate).length < capacity);
};

Then pass the rule. The rental being moved is left out of the count, so dragging it a day does not collide with itself:

<ResourceScheduler
  /* ... */
  // More bookings at once than units in stock: refuse. This also covers a single unit.
  isValidDrop={(event, { resourceId, start, end }) =>
    fits(
      rentals.filter((e) => e.resourceId === resourceId && e.id !== event.id),
      start,
      end,
      items.find((i) => i.id === resourceId)?.capacity ?? 1
    )
  }
/>

A plain "count the overlaps" would refuse a booking that fits between two others that never overlap each other; checking at each start does not. A row with no capacity counts as one unit, so the rule covers the van too.

6. Take bookings with your own form

In the week view a click or a drag across days selects whole days, and onSlotSelect hands you the row and range. Show your own form and save the rental, and handle moves with onEventDrop:

const [events, setEvents] = useState(rentals);
const [draft, setDraft] = useState<SlotSelection | null>(null);

<ResourceScheduler
  /* ... */
  onSlotSelect={setDraft}
  onEventDrop={(event, _from, to, start, end) =>
    setEvents((all) => all.map((e) => (e.id === event.id ? { ...e, resourceId: to, startDate: start, endDate: end } : e)))
  }
/>

{draft && (
  <form
    onSubmit={(e) => {
      e.preventDefault();
      setEvents((all) => [
        ...all,
        { id: `r-${Date.now()}`, title: customer.trim() || "Customer", resourceId: draft.resourceId, startDate: draft.start, endDate: draft.end },
      ]);
      setDraft(null);
    }}
  >
    <input value={customer} onChange={(e) => setCustomer(e.target.value)} placeholder="Customer" />
    <button type="submit">Rent</button>
  </form>
)}

Selections go through isValidDrop and blockUnavailable too, so a full day or a service day cannot be selected in the first place. SlotSelection is exported as a type. A callback is the opt-in: without onEventDrop a dropped rental snaps back.

7. Find N free days

"When can I have the PA system for three days?" is a search over the item's rentals and service time. findAvailableSlots does it: give it a resource that carries its events (withEvents attaches them), a window, a duration and a step, both in minutes. A step of 1440 starts every candidate on a whole day:

import { findAvailableSlots, withEvents } from "resource-scheduler";
import type { ResourceSchedulerHandle } from "resource-scheduler";

const ref = useRef<ResourceSchedulerHandle>(null);

const find = (days: number, itemId: string) => {
  const resource = withEvents(items, events).find((r) => r.id === itemId)!;
  const from = new Date();
  from.setHours(0, 0, 0, 0); // start of today
  const to = new Date(from);
  to.setDate(to.getDate() + 120);
  const [slot] = findAvailableSlots(resource, { from, to, duration: days * 1440, step: 1440, limit: 1 });
  if (!slot) return alert(`No ${days} free days for ${resource.name} in the next 120 days`);
  ref.current?.goTo(slot.start); // scroll the grid to it
};

<ResourceScheduler ref={ref} /* ... */ />

from is today's midnight so the first candidate is today, not the next whole day after this minute. The search skips rentals and service days, so a three-day stretch is only offered when the three days are all free.

It is for single-unit items. findAvailableSlots treats any overlap as busy. That is right for the van and the PA system, but a projector with two units out and one free would be reported as busy. For a pool, step through the days yourself with fits.

Check it on the server too

The browser check is a courtesy: a second browser can book the last unit after yours has loaded, and anyone can call your API without the grid. fits is a plain function of dates and rows, so the server can run exactly the same one inside the transaction that inserts the rental. isPlacementAllowed applies isValidDrop and eventOverlap together:

import { isPlacementAllowed } from "resource-scheduler";
import type { Resource, SchedulerEvent } from "resource-scheduler";

export function canRent(item: Resource, rental: SchedulerEvent) {
  return isPlacementAllowed(
    rental,
    { resourceId: item.id, start: rental.startDate, end: rental.endDate },
    [item], // the item with its current rentals, read inside your transaction
    {
      isValidDrop: (r, { start, end }) =>
        fits(item.events.filter((e) => e.id !== r.id), start, end, item.capacity ?? 1),
    }
  );
}

Return an error (HTTP 409 is the usual choice) when it is false. This check covers stock only; reject a rental that touches a service day with your own query against the service table.

Where next

The finished equipment rental recipe is the same code with notes on quantities, turnaround time and pickup hours.
Prices, deposits and customer details belong on the booking row in your database, not in the scheduler.
Share the bookings as a calendar file or a spreadsheet: Export.
Other builds: the room booking tutorial, the shift planner tutorial, the clinic appointment board tutorial and the free resource timeline.
Coming from another library? The comparison lists what each one includes.

Originally published at https://resource-scheduler-docs.vercel.app/tutorials/react-equipment-rental-calendar/.

React clinic appointment board

Mohammed Obaid — Wed, 14 Oct 2026 15:14:27 +0000

A clinic board has clinicians down the side and the day across the top. Every visit is the same length, each clinician works their own hours, nobody is booked back to back, and reception wants to ask "who is free next?". This tutorial builds that with Resource Scheduler in seven steps. It is the same component running below.

See it running live: interactive demo.

Try three things. Drag Tanaka (Dr Brown, 9:00) to Nurse Cho at 9:30: that is right after Singh, so the gap is missing and the drop turns red. Drop it at 9:45 and it moves. Then pick "Anyone" and press "Book it" to book the next free visit.

1. Install

npm install resource-scheduler

Works with React 18 and 19. Import the stylesheet once; it is scoped, so it does not restyle the rest of your page:

import "resource-scheduler/dist/resource-scheduler.css";

2. Clinicians are rows, with their own hours

Each clinician is a resource. Their working days and hours are businessHours, and one-off gaps such as lunch or training are unavailable. Both are shaded in the grid:

import type { ResourceInput } from "resource-scheduler";

const everyDay = [0, 1, 2, 3, 4, 5, 6]; // use [1, 2, 3, 4, 5] for a Monday to Friday clinic

const clinicians: ResourceInput[] = [
  {
    id: "ahmed",
    name: "Dr Ahmed",
    businessHours: { daysOfWeek: everyDay, startHour: 8, endHour: 17 },
    unavailable: [{ start: new Date(2026, 9, 7, 12), end: new Date(2026, 9, 7, 13) }], // lunch
  },
  { id: "brown", name: "Dr Brown", businessHours: { daysOfWeek: everyDay, startHour: 8, endHour: 13 } }, // mornings only
  {
    id: "cho",
    name: "Nurse Cho",
    businessHours: { daysOfWeek: everyDay, startHour: 9, endHour: 17 },
    unavailable: [{ start: new Date(2026, 9, 7, 15), end: new Date(2026, 9, 7, 16) }], // training
  },
];

daysOfWeek counts Sunday as 0. In a database this is a clinicians table with hours, plus a table of blocked time that you turn into unavailable ranges for the day on screen.

3. A visit is an event with a fixed length

Three numbers describe the clinic. Keep them in one place, because every step below uses them:

const SLOT = 15; // the grid: a booking starts on a quarter hour
const VISIT = 30; // every appointment is the same length
const BUFFER = 15; // minutes to write up and reset between patients
const MINUTE = 60_000;

A booked visit is a plain event. It names its row with resourceId:

import type { SchedulerEvent } from "resource-scheduler";

const visits: SchedulerEvent[] = [
  { id: "v1", title: "Patel", resourceId: "ahmed", startDate: new Date(2026, 9, 7, 8, 30), endDate: new Date(2026, 9, 7, 9) },
  { id: "v2", title: "Okafor", resourceId: "ahmed", startDate: new Date(2026, 9, 7, 9, 30), endDate: new Date(2026, 9, 7, 10) },
  { id: "v4", title: "Reyes", resourceId: "brown", startDate: new Date(2026, 9, 7, 8), endDate: new Date(2026, 9, 7, 8, 30) },
];

The list is flat, so it can come straight from one query on your appointments table.

4. Draw the day

import { ResourceScheduler, ViewType } from "resource-scheduler";

<div style={{ height: 330 }}>
  <ResourceScheduler
    resources={clinicians}
    events={visits}
    initialView={ViewType.Day}
    allowViewChange={false}
    slotDuration={SLOT}
    dayStartHour={8}
    dayEndHour={17}
    blockUnavailable
    ariaLabel="Clinic appointments"
  />
</div>

The component fills its parent, so the parent needs a height. Each prop is one rule:

Prop	What it does
`slotDuration={SLOT}`	The grid is quarter hours, so a click or a drop lands on one
`dayStartHour` / `dayEndHour`	The hours shown, 8:00 to 17:00
`blockUnavailable`	Nothing can be booked outside a clinician's hours or in their lunch

Because onEventResize is not passed, the resize handles stay off and a visit keeps its length. See views and slots.

5. One rule: no double booking, with a gap

eventOverlap={false} would stop two visits overlapping, but it cannot ask for a gap between them. Give each booked visit some padding instead, and ask whether the new visit fits in what is left:

import { findAvailableSlots, withEvents } from "resource-scheduler";

// Each booked visit holds its clinician for BUFFER minutes either side. A free slot in this
// padded copy is a visit plus its gaps, and the padding never shows on screen.
const padded = (all: SchedulerEvent[], ignoreId?: string): SchedulerEvent[] =>
  all
    .filter((e) => e.id !== ignoreId)
    .map((e) => ({
      ...e,
      startDate: new Date(e.startDate.getTime() - BUFFER * MINUTE),
      endDate: new Date(e.endDate.getTime() + BUFFER * MINUTE),
    }));

// The one rule: hours, lunch, no double booking and the gap, all answered by findAvailableSlots.
// The window is exactly the range asked about, so it returns that slot or nothing.
const canBook = (all: SchedulerEvent[], clinicianId: string, start: Date, end: Date, ignoreId?: string) => {
  const clinician = withEvents(clinicians, padded(all, ignoreId)).find((c) => c.id === clinicianId);
  return (
    !!clinician &&
    findAvailableSlots(clinician, { from: start, to: end, duration: (end.getTime() - start.getTime()) / MINUTE, step: SLOT }).length > 0
  );
};

withEvents puts the flat list onto the clinicians. findAvailableSlots treats a slot as free when it overlaps no event, misses unavailable time and sits inside the clinician's businessHours, so one call covers all four rules. Times that only touch do not overlap, so a visit that starts exactly 15 minutes after the last one ends is allowed. The visit being moved is left out with ignoreId, so it does not block its own new place.

Pass it as isValidDrop, and book through your own form:

<ResourceScheduler
  /* ... */
  onSlotSelect={setDraft} // a click on a free slot: open your form
  onEventDrop={(visit, _from, to, start, end) =>
    setEvents((all) => all.map((e) => (e.id === visit.id ? { ...e, resourceId: to, startDate: start, endDate: end } : e)))
  }
  isValidDrop={(visit, { resourceId, start, end }) => canBook(events, resourceId, start, end, visit.id)}
/>

isValidDrop runs for every move and every new selection, and the refused place turns red before the drop. A callback is the opt-in: without onEventDrop a dropped visit snaps back.

A click selects one slot, a visit is two. A click selects a single 15 minute slot, so the grid only checks that slot. The form then books a full 30 minute visit and runs canBook on the whole range before it adds it, saying so when it does not fit. The full code is in the demo source.

6. The next free slot

Reception rarely picks a time first. They ask who is free next. suggestResources answers that: give it a window and a length, and it returns the earliest free slot of each clinician, best first. Hand it the same padded events, so the gap is respected:

import { suggestResources } from "resource-scheduler";

const [next] = suggestResources(
  withEvents(clinicians, padded(events)),
  { from: new Date(), to: new Date(2026, 9, 7, 17), duration: VISIT, step: SLOT },
  { resourceIds: who === "any" ? undefined : [who], limit: 1 }
);
// next = { resourceId, start, end, ... }, or undefined when nobody is free before 17:00

Pass resourceIds to ask about one clinician, or leave it out to ask about all of them. For a single clinician, findAvailableSlots(clinician, { from, to, duration: VISIT, step: SLOT, limit: 3 }) lists the next three free slots to offer the patient. See Availability.

7. Check it on the server too

The browser check is a courtesy: anyone can call your API without the board. The rule is a plain function of dates and events, so the server runs it again before it saves. isPlacementAllowed applies isValidDrop for you:

import { findAvailableSlots, isPlacementAllowed } from "resource-scheduler";
import type { Resource, SchedulerEvent } from "resource-scheduler";

export function canBookVisit(clinician: Resource, visit: SchedulerEvent) {
  return isPlacementAllowed(
    visit,
    { resourceId: clinician.id, start: visit.startDate, end: visit.endDate },
    [clinician], // the clinician with their hours and current visits, read inside your transaction
    {
      isValidDrop: (v, { start, end }) =>
        findAvailableSlots(
          { ...clinician, events: padded(clinician.events, v.id) },
          { from: start, to: end, duration: (end.getTime() - start.getTime()) / MINUTE, step: SLOT }
        ).length > 0,
    }
  );
}

Return an error (HTTP 409 is the usual choice) when it is false, and run the check and the insert in one transaction. See Conflict control.

Where next

Add recurring events for a standing weekly slot, such as a patient seen every Tuesday.
A clinic in another time zone from the browser: Time zones.
Share the day as a calendar file or a spreadsheet: Export.
Other builds: the room booking tutorial, the shift planner and the free resource timeline.
Coming from another library? The comparison lists what each one includes.

Originally published at https://resource-scheduler-docs.vercel.app/tutorials/react-clinic-appointment-board/.

React shift planner (employee roster)

Mohammed Obaid — Wed, 14 Oct 2026 15:10:30 +0000

A shift planner has people down the side and days across the top. The standing rota repeats every week, people have contracted days and leave, someone covers a shift now and then, and there is a house rule about hours. This tutorial builds that with Resource Scheduler in six steps. It is the same component running below.

See it running live: interactive demo.

Try three things. Drag Cy's Friday shift to Ann: she already works 32 hours, so the drop turns red and nothing moves. Drag Cy's Monday shift to Dee instead and it is covered for that day only. Click an empty day in Dee's row to add a shift with your own form.

1. Install

npm install resource-scheduler

Works with React 18 and 19. Import the stylesheet once; it is scoped, so it does not restyle the rest of your page:

import "resource-scheduler/dist/resource-scheduler.css";

2. People are rows, with a contract and leave

Each person is a resource. Their contracted days and hours are businessHours, and leave is unavailable. Both are shaded in the grid:

import type { ResourceInput } from "resource-scheduler";

const staff: ResourceInput[] = [
  { id: "ann", name: "Ann Lee", businessHours: { daysOfWeek: [1, 2, 3, 4, 5], startHour: 7, endHour: 15 } },
  {
    id: "cy",
    name: "Cy Ortiz",
    businessHours: { daysOfWeek: [1, 2, 3, 4, 5], startHour: 7, endHour: 15 },
    unavailable: [{ start: new Date(2026, 9, 7), end: new Date(2026, 9, 9) }], // leave
  },
  { id: "bo", name: "Bo Kim", businessHours: { daysOfWeek: [3, 4, 5, 6], startHour: 11, endHour: 19 } },
];

daysOfWeek counts Sunday as 0, so [1, 2, 3, 4, 5] is Monday to Friday. In a database this is a people table with contract and leave columns.

3. The standing rota is one row per series

You do not store a shift for every week. A shift is one event with a weekly recurrence, and the component expands it into the weeks on screen. Give it the first occurrence and the weekdays it repeats on:

import type { SchedulerEvent } from "resource-scheduler";

const shifts: SchedulerEvent[] = [
  {
    id: "ann-early",
    title: "Early",
    resourceId: "ann",                              // the row it belongs to
    startDate: new Date(2026, 8, 21, 7),            // the first Monday, 7:00
    endDate: new Date(2026, 8, 21, 15),             // 15:00
    recurrence: { freq: "weekly", byWeekday: [1, 2, 3, 4] },   // Monday to Thursday
  },
];

Events are a flat list that names its row with resourceId, so the list can come straight from one query. See recurring events for ending a series and skipping days.

4. Draw the week and refuse bad shifts

import { ResourceScheduler, ViewType } from "resource-scheduler";

<div style={{ height: 530 }}>
  <ResourceScheduler
    resources={staff}
    events={shifts}
    initialView={ViewType.Week}
    allowViewChange={false}
    weekStartsOn={1}
    showUtilization
    blockUnavailable
    eventOverlap={false}
    ariaLabel="Shift roster"
  />
</div>

The component fills its parent, so the parent needs a height. Each prop is one rule:

Prop	What it does
`showUtilization`	A bar per person: rostered hours against contracted hours (utilization)
`blockUnavailable`	No shifts on days off or leave
`eventOverlap={false}`	Nobody works two shifts at once
`weekStartsOn={1}`	The week starts on Monday

5. Cover a shift for one day

Dragging a shift hands your handler one occurrence of the series, with an id such as ann-early::2026-10-07 and a seriesId of ann-early. Covering that one day means skipping it in the series and adding a one-off shift for the new person:

onEventDrop={(shift, _fromId, toId, start, end) =>
  setEvents((all) => {
    if (!shift.seriesId) {
      return all.map((e) => (e.id === shift.id ? { ...e, resourceId: toId, startDate: start, endDate: end } : e));
    }
    const skipped = all.map((e) =>
      e.id === shift.seriesId
        ? { ...e, recurrence: { ...e.recurrence!, exceptions: [...(e.recurrence!.exceptions ?? []), shift.startDate] } }
        : e
    );
    return [...skipped, { ...shift, id: crypto.randomUUID(), seriesId: undefined, resourceId: toId, startDate: start, endDate: end }];
  })
}

A callback is the opt-in: without onEventDrop a dropped shift snaps back. To change the series for good instead, edit the original event.

6. Add a rule: at most 32 hours a week

isValidDrop is a final veto for anything the other props cannot say. It gets the event and where it would land, and returns false to refuse. A weekly cap needs the hours the person already has that week, so count the shifts you hold. expandEvents turns a series into real shifts for a date range, which is the expansion the grid uses:

import { expandEvents, rangesOverlap } from "resource-scheduler";

const MAX_WEEK_HOURS = 32; // four eight-hour shifts

const hoursBetween = (start: Date, end: Date) => (end.getTime() - start.getTime()) / 36e5;

// Hours already rostered for one person in the Monday to Sunday week containing `day`.
const rosteredHours = (all: SchedulerEvent[], personId: string, day: Date, ignoreId?: string) => {
  const from = new Date(day);
  from.setHours(0, 0, 0, 0);
  from.setDate(from.getDate() - ((from.getDay() + 6) % 7));
  const to = new Date(from);
  to.setDate(to.getDate() + 7);
  return expandEvents(all.filter((e) => e.resourceId === personId), from, to)
    .filter((e) => e.id !== ignoreId && rangesOverlap(e.startDate, e.endDate, from, to))
    .reduce((sum, e) => sum + hoursBetween(e.startDate, e.endDate), 0);
};

Then pass the rule. The shift being moved is left out of the count (ignoreId), so moving someone's own shift to another day in the same week is not charged twice:

<ResourceScheduler
  /* ... */
  isValidDrop={(shift, { resourceId, start, end }) =>
    rosteredHours(events, resourceId, start, shift.id) + hoursBetween(start, end) <= MAX_WEEK_HOURS
  }
/>

The refused place turns red before the drop. Ann has four eight-hour shifts, so any shift dropped on her week is refused; Dee has none, so she can take cover.

New shifts come from your form. In the week view a click selects a whole day, so the placement of a new shift is the day, not the eight hours your form will add. The demo therefore applies isValidDrop to moves of existing shifts, and checks a new shift in the form with the same rosteredHours before it adds it. The full code is in the demo source.

Check it on the server too

The browser check is a courtesy: anyone can call your API without the grid. The rule is a plain function of dates and ids, so the server can run exactly the same one before it saves. isPlacementAllowed applies eventOverlap and isValidDrop together:

import { isPlacementAllowed } from "resource-scheduler";
import type { Resource, SchedulerEvent } from "resource-scheduler";

export function canRoster(person: Resource, shift: SchedulerEvent) {
  return isPlacementAllowed(
    shift,
    { resourceId: person.id, start: shift.startDate, end: shift.endDate },
    [person], // the person with their current shifts, read inside your transaction
    {
      eventOverlap: false,
      isValidDrop: (s, { resourceId, start, end }) =>
        rosteredHours(person.events, resourceId, start, s.id) + hoursBetween(start, end) <= MAX_WEEK_HOURS,
    }
  );
}

Return an error (HTTP 409 is the usual choice) when it is false, and run the check and the insert in one transaction. For rest rules, such as at least 11 hours between shifts, write the same kind of function against the neighbouring shifts. See Conflict control.

Where next

The finished shift roster recipe is the same code with notes on night shifts and time zones.
A site in another time zone: Time zones.
Share the rota as a calendar file or a spreadsheet: Export.
Other builds: the room booking tutorial and the free resource timeline.
Coming from another library? The comparison lists what each one includes.

Originally published at https://resource-scheduler-docs.vercel.app/tutorials/react-shift-planner/.

React room booking calendar (no double booking)

Mohammed Obaid — Wed, 14 Oct 2026 15:05:27 +0000

A room booking calendar has rooms down the side and half hours across the top. People pick free time, fill in a form, and two bookings can never share a room. This tutorial builds that with Resource Scheduler in five steps. It is the same component running below.

See it running live: interactive demo.

Drag across free time on a room to open the form. Try the booked blocks: you cannot select them, drop another booking on them, or resize into them.

1. Install

npm install resource-scheduler

Works with React 18 and 19. Import the stylesheet once; it is scoped, so it does not restyle the rest of your page:

import "resource-scheduler/dist/resource-scheduler.css";

2. Rooms are rows, half hours are columns

Each room is a Resource that carries its bookings in events. You own the state; the component only reports what the user did. The day view with 30 minute slots and office hours looks like this:

import { useState } from "react";
import { ResourceScheduler, ViewType } from "resource-scheduler";
import type { Resource } from "resource-scheduler";

const initialRooms: Resource[] = [
  { id: "atlas", name: "Atlas (8 seats)", events: [] },
  { id: "borealis", name: "Borealis (4 seats)", events: [] },
];

export function Rooms() {
  const [rooms, setRooms] = useState<Resource[]>(initialRooms);

  return (
    <div style={{ height: 420 }}>
      <ResourceScheduler
        resources={rooms}
        initialView={ViewType.Day}
        allowViewChange={false}
        slotDuration={30}
        dayStartHour={8}
        dayEndHour={18}
        ariaLabel="Meeting room bookings"
      />
    </div>
  );
}

The component fills its parent, so the parent needs a height. endDate is exclusive: a booking from 9:00 to 10:00 does not collide with one that starts at 10:00.

3. Use your own booking form

Pass onSlotSelect and the built-in create dialog is replaced by your callback. It receives { resourceId, start, end }, the free range the user dragged across. Keep it in state and render whatever form you like:

import type { SlotSelection } from "resource-scheduler";

const [draft, setDraft] = useState<SlotSelection | null>(null);

// ...
<ResourceScheduler /* ... */ onSlotSelect={setDraft} />

{draft && (
  <BookingForm
    slot={draft}
    onCancel={() => setDraft(null)}
    onBook={(title) => {
      setRooms((prev) =>
        prev.map((r) =>
          r.id === draft.resourceId
            ? { ...r, events: [...r.events, { id: crypto.randomUUID(), title, startDate: draft.start, endDate: draft.end }] }
            : r
        )
      );
      setDraft(null);
    }}
  />
)}

BookingForm is yours: a title field, an attendee picker, a recurrence option. See Creating events for the other ways to create.

4. Refuse double booking

One prop covers selecting, moving and resizing. The refused place turns red before the drop:

<ResourceScheduler /* ... */ eventOverlap={false} />

To also let people move or stretch an existing booking, add the two callbacks. A callback is the opt-in: without onEventDrop a dropped booking snaps back, and without onEventResize there are no resize handles.

<ResourceScheduler
  /* ... */
  eventOverlap={false}
  onEventDrop={(event, fromId, toId, start, end) => moveBooking(event, fromId, toId, start, end)}
  onEventResize={(event, resourceId, start, end) => resizeBooking(event, resourceId, start, end)}
/>

For rules beyond overlap (opening hours, a capacity limit, a holiday), pass isValidDrop(event, { resourceId, start, end }). See Conflict control.

5. Check again on the server

The browser check is a courtesy. Two people can pick the same free slot at the same moment, and anyone can call your API without the UI. The save endpoint must decide.

The overlap rule is a plain function, exported as isPlacementAllowed, so the server can run exactly the rule the browser used. Load the room's current bookings and call it before you write:

import { isPlacementAllowed } from "resource-scheduler";
import type { Resource, SchedulerEvent } from "resource-scheduler";

export function canBook(room: Resource, booking: SchedulerEvent) {
  return isPlacementAllowed(
    booking,
    { resourceId: room.id, start: booking.startDate, end: booking.endDate },
    [room], // the room with its current bookings, read inside your transaction
    { eventOverlap: false }
  );
}

Return an error (HTTP 409 is the usual choice) when it is false, and let the client show "someone just booked that". Run the check and the insert in one database transaction, or add a database constraint, so two requests cannot both pass the check. The function takes only dates and ids, so it runs in any JavaScript runtime. See Conflict control.

Where next

The finished room booking recipe is the same code with notes on business hours, capacity and recurring bookings.
Keyboard and accessibility and theming are built in.
Bookings across time zones: see Time zones.
Coming from another library? The comparison lists what each one includes.

Originally published at https://resource-scheduler-docs.vercel.app/tutorials/react-room-booking-calendar/.

A free React resource timeline (a FullCalendar Premium alternative)

Mohammed Obaid — Wed, 14 Oct 2026 14:46:04 +0000

A resource timeline has people, rooms or machines down the side and time across the top. In several popular calendar libraries it is a paid tier (the comparison lists what each one includes and costs). This post builds one with Resource Scheduler, which is MIT and has no paid tier, in four steps. The original tutorial has the same component running live.

Drag across empty days to create a booking, drag one to another row or day, grab an edge to resize it. Drop one on top of another: it turns red and is refused.

1. Install

npm install resource-scheduler

Works with React 18 and 19. Import the stylesheet once, anywhere in your app (it is scoped, so it does not restyle the rest of your page):

import "resource-scheduler/dist/resource-scheduler.css";

2. Keep your bookings as one flat list

Most apps already have a table of bookings. Pass it as events and name the row on each one with resourceId; resources then only needs an id and a name. The component keeps no copy of your data: you hold the state and it tells you what the user did.

import { useState } from "react";
import { ResourceScheduler, ViewType } from "resource-scheduler";
import type { Resource, SchedulerEvent } from "resource-scheduler";

type Booking = SchedulerEvent & { resourceId: string };

const people: Resource[] = [
  { id: "ann", name: "Ann Lee", events: [] },
  { id: "bob", name: "Bob Ruiz", events: [] },
];

export function Timeline() {
  const [events, setEvents] = useState<Booking[]>(initialBookings);

  return (
    <div style={{ height: 480 }}>
      <ResourceScheduler
        resources={people}
        events={events}
        initialView={ViewType.Week}
      />
    </div>
  );
}

The component fills its parent, so the parent needs a height. An event is { id, title, startDate, endDate, color? }; endDate is exclusive, so a meeting from 9:00 to 10:00 does not overlap one that starts at 10:00.

3. Turn on drag, resize and create

Each gesture is a callback, and a callback is also the opt-in: without onEventDrop a dropped event snaps back, and without onEventResize there are no resize handles. Each one is a plain state update.

<ResourceScheduler
  resources={people}
  events={events}
  initialView={ViewType.Week}
  onEventCreate={(event, resourceId) =>
    setEvents((prev) => [...prev, { ...event, id: crypto.randomUUID(), resourceId }])
  }
  onEventDrop={(event, _fromId, toId, start, end) =>
    setEvents((prev) =>
      prev.map((e) => (e.id === event.id ? { ...e, resourceId: toId, startDate: start, endDate: end } : e))
    )
  }
  onEventResize={(event, _resourceId, start, end) =>
    setEvents((prev) => prev.map((e) => (e.id === event.id ? { ...e, startDate: start, endDate: end } : e)))
  }
/>

To open your own form instead of creating an event straight away, pass onSlotSelect; see Creating events.

4. Refuse conflicts

One prop stops double booking for drag, resize and create alike, and shows the refused place in red before the drop:

<ResourceScheduler /* ... */ eventOverlap={false} />

For anything else (capacity, opening hours, a holiday), pass isValidDrop(event, { resourceId, start, end }). The same check is exported as isPlacementAllowed, so you can run it on your server before saving. See Conflict control.

Coming from FullCalendar

The model is close, and so are the callbacks:

FullCalendar	Resource Scheduler
`eventDrop`	`onEventDrop`
`eventResize`	`onEventResize`
`select`	`onSlotSelect`
`eventClick`	`onEventClick`
`eventOverlap`	`eventOverlap` (also accepts a function)
`eventAllow` / `selectAllow`	`isValidDrop`

Know the gaps. This is a younger library. RRULE strings, calendar sync with Google or Outlook, and Gantt dependencies are not built in. Read Alternatives before you switch.

Where next

Finished starting points: room booking, shift roster, equipment rental.
A full-stack version with Next.js and Prisma: Room booking app with Next.js and Prisma.
Source, issues and the shadcn install: github.com/mdobaid311/resource-scheduler.