How to change the time frame to span from 9 AM to 9 PM only (React Scheduler)

If you use scale: "Hour", which displays one hour per cell, you can hide the non-business hours using the built-in mechanism.

React example:

import React, { useState } from 'react';
import { DayPilot, DayPilotScheduler } from "daypilot-pro-react";

const Scheduler = () => {
    const [config, setConfig] = useState({
        startDate: DayPilot.Date.today().firstDayOfMonth(),
        days: DayPilot.Date.today().daysInMonth(),
        scale: "Hour",
        businessBeginsHour: 9,
        businessEndsHour: 21,
        showNonBusiness: false,
        timeHeaders: [
            { groupBy: "Month" },
            { groupBy: "Day", format: "d" },
            { groupBy: "Cell", format: "h tt" }
        ],
    });

    return (
        <DayPilotScheduler 
           {...config}
        />
    );
};

export default Scheduler;

If you want to display one day per cell, where each day is limited to the 9 AM - 9 PM range, you can generate a custom timeline.

React example:

import React, { useState, useEffect } from 'react';
import { DayPilot, DayPilotScheduler } from "daypilot-pro-react";

const Scheduler = () => {
    const createTimeline = () => {
        const days = DayPilot.Date.today().daysInMonth();
        const start = DayPilot.Date.today().firstDayOfMonth();

        const result = [];
        for (let i = 0; i < days; i++) {
            const day = start.addDays(i);
            result.push({
                start: day.addHours(9),
                end: day.addHours(21) // 9 PM is represented as 21 in 24-hour time
            });
        }
        return result;
    }

    const [config, setConfig] = useState({
        timeline: createTimeline(),
        scale: "Manual",
        timeHeaders: [
            { groupBy: "Month" },
            { groupBy: "Day", format: "d" },
        ],
    });

    return (
        <DayPilotScheduler 
           {...config}
        />
    );
};

export default Scheduler;

The timeline property replaces the startDate, days, scale, and showNonBusiness properties which are otherwise used to generate the timeline automatically.

This approach can be used to create custom time units (such as shifts, which you can see in the React Shift Scheduling tutorial).

Hello, Used above code but no changes in timeHeader. It will remains same for 24 hrs, starting from 12 am to 11 pm. what to do ,to made changes in code to achieve time frame 9am to 9pm only in timesheet time header. Attached time header only required 9am to 9 pm time only. And Demo tag mark have to remove. kindly help me out.

You may need to check your config - the first example produces a timeline that looks like this:

The “DEMO” label appears in the upper-left corner because you are using a trial version of DayPilot Pro. If you want to use DayPilot Pro in your project (and get rid of the DEMO label) you will need to purchase a license.