Live product demos

Scheduling examples that look like actual app screens.

Switch between operational workflows, move events across resources, drag ranges to create, resize events from either end, and open the editor to change details.

Crew ALocal jobs

Packing crewAnderson family - $2.4k

Local deliveryMorgan condo - $4.1k

Crew BLong haul

Overflow crewRivera home - $3.6k

Interstate loadPatel relocation - $12k

EstimatesSales desk

Estimate callChen townhouse - $7.8k

WarehouseInventory

LoadoutDepot ops - 3 trucks

InventoryStorage audit - Ops

Interstate loadPatel relocation - $12k

Workflow walkthroughs

Each walkthrough pairs a live UI with the product scenario, buyer use cases, scheduler capabilities, and optional TypeScript API example.

React resource scheduler

Dispatch board for crews, trucks, jobs, and operational work.

This demo shows a resource timeline calendar where each row is an assignable crew, desk, warehouse, room, or asset. It is the core pattern for businesses that need to see who is doing what, when it starts, and whether the schedule has conflicts.

Crew ALocal jobs

Packing crewAnderson family - $2.4k

Local deliveryMorgan condo - $4.1k

Crew BLong haul

Overflow crewRivera home - $3.6k

Interstate loadPatel relocation - $12k

EstimatesSales desk

Estimate callChen townhouse - $7.8k

WarehouseInventory

LoadoutDepot ops - 3 trucks

InventoryStorage audit - Ops

Interstate loadPatel relocation - $12k

Use cases

Moving company dispatch boards with crews, trucks, estimates, and warehouse windows
Field service calendars for technicians, installers, routes, and service calls
Room, equipment, bay, vehicle, or production-line scheduling
Ops dashboards where managers drag work between resources during the day

What to test

Timeline view with horizontal time slots and resource rows
Drag events between resources and time slots
Resize events from either end
Unavailable ranges for blocked resources
Custom event cards with business metadata

Show example code

Dispatch board@bravocalendar/react

const resources = [
  { id: "crew-a", title: "Crew A", subtitle: "Local jobs", color: "#2563eb" },
  { id: "warehouse", title: "Warehouse", subtitle: "Inventory", color: "#f59e0b" }
];

<CalendarRoot
  date={date}
  events={jobs}
  resources={resources}
  view="timeline"
  startHour={7}
  endHour={16}
  stepMinutes={30}
  showResourceFilters
  eventEditing
  schedulingPolicy={{
    unavailableRanges: [{ resourceId: "warehouse", start, end, reason: "Dock unavailable" }]
  }}
  onEventUpdate={saveJobMove}
  onEventCreate={createJobFromRange}
  renderEvent={({ event }) => <JobCard job={event.metadata.job} />}
/>

React appointment scheduler

Appointment calendar for booking flows and provider schedules.

This demo models timed appointments that can be created, moved, edited, and resized. It is useful when a product needs booking screens, provider calendars, service windows, or appointment capacity without building calendar math from scratch.

8:00 AM

8:30 AM

9:00 AM

9:30 AM

10:00 AM

10:30 AM

11:00 AM

11:30 AM

12:00 PM

12:30 PM

New patientNorth Clinic - Intake

Lab reviewDr. Patel - Results

Follow-upCare team - 30m

Coverage blockCare team - Capacity

Telehealth consultRemote - Consult

Intake callbackNorth Clinic - Callback

Procedure prepLab room - Prep

Use cases

Healthcare intake, consultation, and follow-up booking
Sales demo scheduling with owners, account executives, and availability windows
Salon, clinic, coaching, repair, or professional-service calendars
Customer-facing booking flows that still need an internal admin scheduler

What to test

Day and resource views for timed appointments
Drag to create appointment ranges
Rich editor fields for title, status, notes, color, and location
Controlled callbacks for validation and persistence
Compact event cards for dense provider schedules

Show example code

Appointment scheduler@bravocalendar/react

type AppointmentMeta = {
  patientId: string;
  appointmentType: "intake" | "follow-up" | "consult";
};

<CalendarRoot<AppointmentMeta>
  events={appointments}
  resources={providers}
  view="resources"
  eventEditing
  onEventCreate={(proposal) => {
    return createAppointment({
      providerId: proposal.resourceId,
      start: proposal.start,
      end: proposal.end
    });
  }}
  onEventUpdate={({ nextEvent }) => updateAppointment(nextEvent)}
  renderEvent={({ event, compact }) => (
    <AppointmentCard event={event} compact={compact} />
  )}
/>

SaaS scheduling component

SaaS follow-up calendar for customer success and sales workflows.

This demo treats scheduled work as product workflow, not just meetings. Follow-ups, onboarding reviews, renewal checks, sales touches, and implementation milestones can all use the same date, time, resource, and event-editing primitives.

8:00 AM

8:30 AM

9:00 AM

9:30 AM

10:00 AM

10:30 AM

11:00 AM

11:30 AM

12:00 PM

12:30 PM

1:00 PM

1:30 PM

Onboarding reviewTelo demo - CS

Launch retroTelo demo - Done

Expansion prepBravoMove - $9k ARR

Renewal check-inAcme Logistics - $18k ARR

Risk reviewAcme Logistics - High risk

Support escalationMatrix Ops - P1

Use cases

CRM next-action calendars for sales and success teams
Customer onboarding milestones, launch plans, and implementation reviews
Renewal, risk, expansion, and support follow-up queues
Internal SaaS operations calendars with account-specific metadata

What to test

Custom metadata on every event
Agenda, day, week, and resource views over the same event model
Status and color coding for workflow state
Controlled state for server persistence
Render props for account, value, owner, and priority labels

Show example code

SaaS follow-ups@bravocalendar/react

type FollowUpMeta = {
  account: string;
  value: string;
  ownerId: string;
  priority: "normal" | "high";
};

<CalendarRoot<FollowUpMeta>
  events={followUps}
  resources={owners}
  view="week"
  eventEditing
  onEventUpdate={({ event, nextEvent }) => {
    audit("followup.rescheduled", { from: event, to: nextEvent });
    return saveFollowUp(nextEvent);
  }}
  renderEvent={({ event }) => (
    <AccountFollowUpCard
      account={event.metadata.account}
      value={event.metadata.value}
      status={event.status}
    />
  )}
/>

Custom event renderer

Bring your own event cards, resource headers, and product UI.

This demo is about customization. The package should feel at home in a shadcn/Tailwind product, but users should be able to replace event cards, toolbars, resource headers, editor fields, empty states, and styling tokens without fighting the scheduler.

Design podWhite label

VIP install prepWhite-label customer - VIP

PlatformCapacity

Capacity planningPlatform team - Medium

White-label QAPlatform team - QA

Revenue opsPriority

SLA risk badgeRevenue ops - At risk

Ops podExceptions

Route density auditOps pod - High

Exception reviewOps pod - Review

Use cases

Vertical SaaS dashboards where events need domain-specific labels and actions
Internal tools with custom status badges, warnings, value labels, and owner chips
White-label products that need different colors, density, and copy per customer
Products migrating from generic calendar widgets to app-native scheduling UI

What to test

Render props for event cards and dense states
CSS variables for shadcn-style tokens
Business metadata carried through create, update, and delete callbacks
Composable toolbar and editor patterns
Minimal dependencies so host apps keep design-system control

Show example code

Custom renderer@bravocalendar/react

<CalendarRoot
  events={events}
  resources={resources}
  view={view}
  theme="dark"
  eventEditing
  onViewChange={setView}
  onEventUpdate={validateAndSave}
  renderEvent={({ event, compact }) => (
    <div className="rounded-md border bg-background px-2 py-1">
      <div className="flex items-center justify-between gap-2">
        <strong>{event.title}</strong>
        <StatusBadge status={event.status} />
      </div>
      {!compact ? <p>{event.metadata.account}</p> : null}
    </div>
  )}
/>

Scheduling examples that look like actual app screens.

May 2026

Dispatch board for crews, trucks, jobs, and operational work.

May 2026

Use cases

What to test

Appointment calendar for booking flows and provider schedules.

May 2026

Use cases

What to test

SaaS follow-up calendar for customer success and sales workflows.

May 2026

Use cases

What to test

Bring your own event cards, resource headers, and product UI.

May 2026

Use cases

What to test