Live preview

Live
Resource scheduler

Occurrences share the calendar contract and add resource lanes, reassignment, and lane-aware empty-range selection.
NxResourceScheduler
Selected lane range: Select an empty lane range to inspect the App-owned creation callback.
Copyable source

Code example
TSX
import { useState } from "react";

import type { NxResourceSchedulerSelection } from "@nexia/sdk/host";
import { NxResourceScheduler } from "@nexia/sdk/host";

export function ResourceSchedulerExample() {
    const [day] = useState(() =>
        new Date().toLocaleDateString("sv-SE", { timeZone: "Asia/Seoul" })
    );
    const [selection, setSelection] =
        useState<NxResourceSchedulerSelection | null>(null);

    return (
        <div>
            <div className="h-[34rem]">
                <NxResourceScheduler
                    resources={[
                        { id: "line-a", label: "Line A" },
                        { id: "cnc-a1", label: "CNC A-1", parent_id: "line-a" },
                    ]}
                    occurrences={[
                        {
                            source_key: "production.operations",
                            app_key: "manufacturing",
                            occurrence_id: "operation-42",
                            source_revision: "1",
                            resource: {
                                app_key: "manufacturing",
                                resource_key: "operation",
                                resource_id: "42",
                                display: "Operation 42",
                            },
                            title: "CNC operation 42",
                            start: `${day}T09:00:00+09:00`,
                            end: `${day}T11:00:00+09:00`,
                            all_day: false,
                            timezone: "Asia/Seoul",
                            resource_ids: ["cnc-a1"],
                            allowed_actions: [],
                        },
                    ]}
                    timezone="Asia/Seoul"
                    locale="en"
                    initialView="resourceTimelineWeek"
                    fill
                    loadingLabel="Loading resource scheduler"
                    emptyTitle="No assigned work"
                    emptyDescription="No operations are assigned in this range."
                    errorTitle="Resource scheduler unavailable"
                    errorDescription="Reload and try again."
                    readOnlyDescription="This scheduler is read-only."
                    retryLabel="Retry"
                    resourceAreaLabel="Production resources"
                    actionErrorMessage={(reason) =>
                        `Scheduler action rejected: ${reason}`
                    }
                    onSelectRange={setSelection}
                />
            </div>
            {selection ? (
                <p>
                    Create for {selection.resource_ids.join(", ")} from{" "}
                    {selection.start}
                </p>
            ) : null}
        </div>
    );
}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768