실행 미리 보기

실시간

캘린더 프로젝션

Occurrence는 도메인 레코드를 표시하며 빈 시간 선택은 App 소유 생성 흐름만 호출합니다.

NxCalendar

선택한 범위: 빈 시간 범위를 선택해 생성 콜백을 확인하세요.

복사 가능한 소스

코드 예시

TSX

import { useState } from "react";

import type { NxCalendarSelection } from "@nexia/sdk/host";
import { NxCalendar } from "@nexia/sdk/host";

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

    return (
        <div>
            <div className="h-[34rem]">
                <NxCalendar
                    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",
                            allowed_actions: [],
                        },
                    ]}
                    timezone="Asia/Seoul"
                    locale="en"
                    initialView="timeGridWeek"
                    fill
                    loadingLabel="Loading calendar"
                    emptyTitle="No scheduled work"
                    emptyDescription="No occurrences fall within this range."
                    errorTitle="Calendar unavailable"
                    errorDescription="Reload and try again."
                    readOnlyDescription="This calendar is read-only."
                    retryLabel="Retry"
                    actionErrorMessage={(reason) =>
                        `Calendar action rejected: ${reason}`
                    }
                    keyboardInstructions="Use Alt and arrow keys to move; add Shift to resize."
                    onSelectRange={setSelection}
                />
            </div>
            {selection ? (
                <p>
                    Create from {selection.start} to {selection.end}
                </p>
            ) : null}
        </div>
    );
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263