navigator is not defined for next js application

Unfortunately, I’m not able to reproduce the issue with Next.js 14 and 15.

With 'use client';, you should be able to import DayPilotScheduler in a standard way:

import {DayPilot, DayPilotScheduler} from "@daypilot/daypilot-lite-react";

You can also try generating a Next project with the Scheduler component using the UI Builder.

Anyway, there was one navigator reference that was probably causing the problem. You can give it a try with @daypilot/daypilot-lite-react@4.7.0-sandbox.740 - it should be fixed there.

Let me know if the problem persists.

Yes, with this version i can import it normaly without “dynamic“. For now I will test it with this version. Thanks.
Does
controlRef={setScheduler}
should work in lite version or its pro feature or can it be problem with next js implementation?

Great, thanks for the update.

Yes, you can use controlRef in the Lite version. It works in Next.js as well:

'use client';

import React, {useEffect, useRef, useState} from "react";
import {DayPilot, DayPilotScheduler} from "@daypilot/daypilot-lite-react";

export default function Scheduler() {

    const [scheduler, setScheduler] = useState<DayPilot.Scheduler>();

    // ...

    const onTimeRangeSelected = async (args: DayPilot.SchedulerTimeRangeSelectedArgs) => {
        const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
        scheduler?.clearSelection();
        if (modal.canceled) {
            return;
        }
        scheduler?.events.add({
            start: args.start,
            end: args.end,
            id: DayPilot.guid(),
            text: modal.result,
            resource: args.resource
        });
    };

    return (
        <div>
            <DayPilotScheduler
                ...
                onTimeRangeSelected={onTimeRangeSelected}
                controlRef={setScheduler}
            />
        </div>
    )
}

You can also use the standard ref but that way you get a reference to the DayPilotScheduler React component, not the DayPilot.Scheduler instance. So the usage would be slightly different:

'use client';

import React, {useEffect, useRef, useState} from "react";
import {DayPilot, DayPilotScheduler} from "@daypilot/daypilot-lite-react";

export default function Scheduler() {

    const schedulerRef = useRef<DayPilotScheduler>(null);

    const onTimeRangeSelected = async (args: DayPilot.SchedulerTimeRangeSelectedArgs) => {
        const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
        schedulerRef.current?.control.clearSelection();
        if (modal.canceled) {
            return;
        }

        schedulerRef.current?.control.events.add({
            start: args.start,
            end: args.end,
            id: DayPilot.guid(),
            text: modal.result,
            resource: args.resource
        });
    };

    return (
        <div>
            <DayPilotScheduler
                ...
                onTimeRangeSelected={onTimeRangeSelected}
                ref={schedulerRef}
            />
        </div>
    )
}

Worked like a charm, thank you