Date Validation

Restrict selectable dates using the validRange property. Two forms are supported:

Tuple form: [from, to] — bounds as ISO strings or Excel serial numbers.
Predicate form: (day, month, year, item) => boolean — return truthy to disable a cell.

Example

import React, { useState } from 'react';
import { Calendar } from '@calendarjs/react';

export default function App() {
    const [selected, setSelected] = useState('2024-06-15');

    return (
        <div>
            <Calendar
                type="inline"
                value="2024-06-15"
                validRange={['2024-06-01', '2024-06-30']}
                onChange={(value) => setSelected(value)}
            />
            <p>Selected: {selected}</p>
        </div>
    );
}

Predicate form

Use a function to disable cells dynamically — e.g. block weekends:

import React from 'react';
import { Calendar } from '@calendarjs/react';

export default function App() {
    const blockWeekends = (day, month, year, item) => {
        const dt = new Date(year, month, day);
        const wd = dt.getDay();
        return wd === 0 || wd === 6; // truthy = disabled
    };

    return (
        <Calendar
            type="inline"
            value="2024-06-15"
            validRange={blockWeekends}
        />
    );
}