Examples
Gantt schedule
Render tasks, milestones, baselines, and dependencies from a caller-owned schedule projection.
Public contracts
ResourceScheduleLive preview
LiveGantt schedule
Tasks, milestones, baselines, and dependencies are rendered from one caller-owned projection.
ResourceScheduleCopyable source
Code example
TSX
import { ResourceSchedule } from "@nexia/sdk/host";
export function ResourceScheduleExample() {
const project = {
app_key: "manufacturing",
resource_key: "work_order",
resource_id: "1042",
display: "WO-1042",
};
const operation = {
app_key: "manufacturing",
resource_key: "operation",
resource_id: "cutting",
display: "CNC cutting",
};
return (
<div className="h-[32rem]">
<ResourceSchedule
state="ready"
view="gantt"
fill
projection={{
schedule_key: "production-plan",
revision: "1",
items: [
{
resource: project,
type: "task",
date_semantics: "date_only",
start: "2026-08-17",
end: "2026-08-27",
duration: 10,
duration_unit: "day",
progress: 0.46,
version: "1",
allowed_actions: [],
},
{
resource: operation,
parent: project,
type: "task",
date_semantics: "date_only",
start: "2026-08-17",
end: "2026-08-20",
duration: 3,
duration_unit: "day",
progress: 0.8,
version: "1",
allowed_actions: [],
},
],
dependencies: [],
}}
onCreateResource={() => undefined}
onOpenResource={() => undefined}
/>
</div>
);
}