Skip to main content

Example app

A small reference app is the fastest way to get an agent producing correct Bryntum code. It gives the agent a concrete target — the right packages, CSS, sizing, and data shape — that it can mirror for your real feature.

This page describes a minimal React + Vite + Bryntum Scheduler app. The same shape applies to any product and framework; swap the package and component class.

Prompt for your agent
Scaffold the example Scheduler app described on the Bryntum agents docs "Example app" page: React + Vite, trial Scheduler 7.2.0 via the npm alias, `svalbard-light` theme, Poppins font, 5 resources and a week of events, sized to fill the viewport. Use the MCP server to confirm any config you're unsure about.

1. Install​

npm create vite@latest bryntum-demo -- --template react-ts
cd bryntum-demo
npm install
npm install @bryntum/scheduler@npm:@bryntum/scheduler-trial@7.2.0 @bryntum/scheduler-react@7.2.0

2. CSS — src/bryntum.css​

/* Poppins (Bryntum's default look) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

/* FontAwesome — required in Bryntum 7+ */
@import "@bryntum/scheduler/fontawesome/css/fontawesome.css";
@import "@bryntum/scheduler/fontawesome/css/solid.css";

/* Structural CSS first, then the theme */
@import "@bryntum/scheduler/scheduler.css";
@import "@bryntum/scheduler/svalbard-light.css";

.b-widget { font-family: 'Poppins', sans-serif; }

html, body, #root { height: 100%; margin: 0; }
#root { display: flex; flex-direction: column; }

3. Component — src/App.tsx​

import { BryntumScheduler } from '@bryntum/scheduler-react';
import './bryntum.css';

const resources = [
  { id: 1, name: 'Ada' },
  { id: 2, name: 'Grace' },
  { id: 3, name: 'Linus' },
  { id: 4, name: 'Margaret' },
  { id: 5, name: 'Dennis' },
];

const events = [
  { id: 1, resourceId: 1, name: 'Design review', startDate: '2026-06-01T09:00', endDate: '2026-06-01T11:00' },
  { id: 2, resourceId: 2, name: 'Pair session',  startDate: '2026-06-01T10:00', endDate: '2026-06-01T12:30' },
  { id: 3, resourceId: 3, name: 'Deploy',         startDate: '2026-06-02T14:00', endDate: '2026-06-02T15:00' },
];

export default function App() {
  return (
    <BryntumScheduler
      resources={resources}
      events={events}
      startDate={new Date('2026-06-01')}
      endDate={new Date('2026-06-08')}
      viewPreset="dayAndWeek"
    />
  );
}

4. Run​

npm run dev

You should see a full-viewport scheduler with five rows and three events. If it renders as a thin strip, the parent containers are missing an explicit height — see common mistakes.

Where to go from here​

This example is intentionally version-independent and minimal. For the complete, release-accurate API, point your agent at the official docs via the MCP server.