DHTMLX React Scheduler + Starhive Demo

This project integrates DHTMLX React Scheduler with the Starhive NoSQL backend through Next.js Route Handlers, giving you full CRUD on a typed schema without managing your own server.

Features

• Full sync with the Starhive Events and Resources types
• CRUD via the React Scheduler dataBridge (create / update / delete events)
• TypeScript integration through the generated Starhive schema
• Timeline view grouped by resource (teams)

Stack

• Next.js 16 (App Router)
• React 19
• TypeScript (strict mode)
• @dhtmlx/trial-react-scheduler for the Scheduler component
• axios — peer dependency of the generated Starhive client; you don't import it yourself, the SDK uses it under the hood

Setup

The order matters because the bundled lib/starhive schema in this repo contains placeholder UUIDs that won't match your workspace - you must regenerate it.

1. Clone and install

   git clone https://github.com/DHTMLX/react-scheduler-starhive-demo.git
   cd react-scheduler-starhive-demo
   npm install

2. Create a Starhive space and types at https://app.starhive.com/. Sign up for the 30-day trial if you don't have an account.

   • Create a space named "Scheduler".
   • Add a Resources type with a single label (Text) attribute.
   • Add an Events type with text (Text), start_date (Date & Time), end_date (Date & Time), and resource_id (Reference → Resources).

3. Import sample data via the Starhive UI (Type → "CSV import" button):

   • scheduler_resources.csv into Resources
   • scheduler_events.csv into Events

4. Generate and replace the schema: Workspace Settings → API Connectors → select your space, language TypeScript, click Generate, then Download. Extract the zip and replace the lib/starhive folder in this repo with the starhive folder from the archive (under project/src/io/). The bundled lib/starhive/ is a placeholder for project-structure reference; the workspace-specific UUIDs in it won't match yours.

   Known issue with the Starhive generator. The bundled lib/starhive/ carries three small patches because the upstream generator currently produces output that does not pass strict TypeScript: a missing Sla.ts reference, a missing visitSlaAttribute in the visitor literal, and a client.request<T> call on an any-typed field (TS2347). When you replace the folder you'll need to re-apply the same patches until Starhive ships a fix - the diffs and rationale are documented in lib/starhive/PATCHES.md.

5. Configure environment: copy .env.example to .env.local and fill in:

   STARHIVE_API_TOKEN=<your-personal-access-token>
   STARHIVE_WORKSPACE_ID=<workspace-id-from-app-url>
   

   Personal access tokens live under Starhive Settings → Personal access tokens. The workspace ID is the path segment in https://app.starhive.com/workspace/<workspace-id>/home.

6. Run the dev server:

   npm run dev

   Open http://localhost:3000 and you should see the Scheduler populated with the imported data.

Project structure

react-scheduler-starhive-demo/
├── app/
│   ├── api/
│   │   ├── load/route.ts          # GET — load events + resources
│   │   └── event/
│   │       ├── route.ts           # POST — create
│   │       └── [id]/route.ts      # PUT / DELETE — update / remove
│   ├── layout.tsx
│   └── page.tsx                   # Scheduler client component
├── lib/
│   ├── starhive/                  # Generated TypeScript schema (replace per workspace)
│   └── starhiveClient.ts          # Singleton Starhive client factory
├── services/
│   └── scheduler.ts               # CRUD helpers used by dataBridge
├── scheduler_events.csv           # Sample event data
├── scheduler_resources.csv        # Sample resource data
├── .env.example
└── README.md

Tutorial

A complete tutorial is available at https://docs.dhtmlx.com/scheduler/integrations/react/starhive-integration.

License

Source code in this repo is released under the MIT License.

DHTMLX React Scheduler is a commercial library - use under a valid DHTMLX license or evaluation agreement.

Useful links

• DHTMLX React Scheduler product page
• DHTMLX Scheduler product page
• React Scheduler documentation
• Starhive
• Blog
• Forum