Programmatic Control

Control the calendar using the forwarded ref. Pass a ref to the <Calendar /> component and call methods on ref.current.

Available Methods

Method	Description
getValue(): string | number	Get current date value
setValue(value: string | Date): void	Set date value
reset(): void	Clear value and close
setView(view: 'days' | 'months' | 'years'): void	Change calendar view
next(): void	Navigate to next month/year
prev(): void	Navigate to previous month/year
open(): void	Open calendar popup
close(): void	Close calendar popup
isClosed(): boolean	Check if calendar is closed
update(): void	Accept current selection

Examples

Control Panel

Create custom navigation and view controls using useRef():

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

export default function App() {
    const calendarRef = useRef();
    const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);

    const goToToday = () => {
        calendarRef.current?.setValue(new Date());
        calendarRef.current?.setView('days');
    };

    return (
        <div>
            <div style={{ marginBottom: '15px', display: 'flex', gap: '10px' }}>
                <button onClick={() => calendarRef.current?.prev()}>Previous</button>
                <button onClick={goToToday}>Today</button>
                <button onClick={() => calendarRef.current?.next()}>Next</button>
                <button onClick={() => calendarRef.current?.setView('days')}>Days</button>
                <button onClick={() => calendarRef.current?.setView('months')}>Months</button>
                <button onClick={() => calendarRef.current?.setView('years')}>Years</button>
                <button onClick={() => calendarRef.current?.reset()}>Reset</button>
            </div>

            <Calendar
                ref={calendarRef}
                type="inline"
                value={new Date()}
                onChange={(value) => setSelectedDate(value)}
            />

            <div style={{ marginTop: '10px' }}>Selected: {selectedDate || 'None'}</div>
        </div>
    );
}

With useCalendar

The hook is a drop-in alternative to useRef. The instance it returns is reactive — null before mount, the live instance after — so toolbar buttons can disable themselves until the calendar is ready:

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

export default function App() {
    const { ref, instance } = useCalendar();
    const [date, setDate] = useState(new Date().toISOString().split('T')[0]);

    return (
        <div>
            <div style={{ display: 'flex', gap: '8px', marginBottom: 12 }}>
                <button disabled={!instance} onClick={() => instance.prev()}>Previous</button>
                <button disabled={!instance} onClick={() => instance.setValue(new Date())}>Today</button>
                <button disabled={!instance} onClick={() => instance.next()}>Next</button>
                <button disabled={!instance} onClick={() => instance.setView('months')}>Months</button>
                <button disabled={!instance} onClick={() => instance.setView('years')}>Years</button>
                <button disabled={!instance} onClick={() => instance.reset()}>Reset</button>
            </div>

            <Calendar ref={ref} type="inline" value={date} onChange={setDate} />

            <div>Selected: {date || 'None'}</div>
        </div>
    );
}

Related

• Calendar Documentation
• Calendar Events
• Hooks — useCalendar and friends