Time Configuration

Configure time grid intervals, working hours, and time restrictions.

Grid Interval

Set time slot intervals in minutes using grid:

import { Schedule } from '@calendarjs/react';

export default function App() {
    return (
        <Schedule
            type="week"
            grid={30}
            data={[]}
            style={{ height: '500px' }}
        />
    );
}

Common Grid Values

Interval	Minutes	Use Case
15 min	15	Default, detailed scheduling
30 min	30	Standard appointments
60 min	60	Hourly blocks

Valid Time Range

Restrict available hours using validRange:

import { Schedule } from '@calendarjs/react';

export default function App() {
    return (
        <Schedule
            type="week"
            validRange={['09:00', '18:00']}
            data={[]}
            style={{ height: '500px' }}
        />
    );
}

Read-Only Time Ranges

Block specific time periods using readOnlyRange:

Single Range

import { Schedule } from '@calendarjs/react';

export default function App() {
    // Lunch break: 12 PM - 1 PM
    return (
        <Schedule
            type="week"
            readOnlyRange={['12:00', '13:00']}
            data={[]}
            style={{ height: '500px' }}
        />
    );
}

Multiple Ranges

import { Schedule } from '@calendarjs/react';

export default function App() {
    // Block before 9 AM and after 6 PM, plus lunch
    return (
        <Schedule
            type="week"
            readOnlyRange={[
                ['00:00', '09:00'], // Before work
                ['12:00', '13:00'], // Lunch
                ['18:00', '23:59']  // After work
            ]}
            data={[]}
            style={{ height: '500px' }}
        />
    );
}

Combined Configuration

import { Schedule } from '@calendarjs/react';

export default function App() {
    return (
        <Schedule
            type="week"
            grid={30}
            validRange={['08:00', '20:00']}
            readOnlyRange={[
                ['12:00', '13:00'],
                ['17:00', '17:30']
            ]}
            data={[]}
            style={{ height: '500px' }}
        />
    );
}

Programmatic Updates

Change time configuration at runtime via the forwarded ref:

import { useRef, useEffect } from 'react';
import { Schedule } from '@calendarjs/react';

export default function App() {
    const scheduleRef = useRef();

    useEffect(() => {
        // Change grid interval
        scheduleRef.current.grid = 60;
        scheduleRef.current.render();

        // Update valid range
        scheduleRef.current.setRange(['10:00', '16:00']);

        // Update readonly range
        scheduleRef.current.setReadOnly([['12:00', '13:00']]);
    }, []);

    return (
        <Schedule
            ref={scheduleRef}
            type="week"
            grid={30}
            data={[]}
            style={{ height: '500px' }}
        />
    );
}

Related

• Schedule Documentation - Main schedule docs
• Weekly Mode - Recurring schedules
• Event Management - CRUD operations