본문으로 건너뛰기
Developers

예제

간트 일정

호출자가 소유한 일정 프로젝션에서 작업, 마일스톤, 기준 일정, 의존성을 표시합니다.

공개 계약ResourceSchedule

실행 미리 보기

실시간

간트 일정

작업, 마일스톤, 기준 일정, 의존성을 호출자가 소유한 하나의 프로젝션에서 표시합니다.

ResourceSchedule
이 일정은 읽기 전용입니다.

일정 항목 4개가 있는 간트입니다. 텍스트 표에는 4개 항목이 포함됩니다.

작업
시작
종료
간트
작업시작종료진행률
WO-1042 · Pump housing2026-09-302026-10-1046%
CNC 절삭2026-09-302026-10-0380%
조립2026-10-032026-10-0825%
품질 승인2026-10-092026-10-090%

복사 가능한 소스

코드 예시
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>
    );
}