Range Selection

Select date ranges for booking systems, filters, and date span inputs.

Example

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

export default function App() {
    const [start, setStart] = useState('2025-12-01');
    const [end, setEnd] = useState('2025-12-05');

    const handleChange = (value) => {
        if (value) {
            setStart(value[0]);
            setEnd(value[1]);
        }
    };

    return (
        <div>
            <Calendar
                type="inline"
                range={true}
                value="2025-12-01,2025-12-05"
                onChange={handleChange}
            />
            <p>Start: {start} | End: {end}</p>
        </div>
    );
}