cally/components/pages/calendar/DetailedCalendarController.tsx

import React, {useCallback, useEffect, useRef} from 'react';
import {useAtomValue} from 'jotai';
import {useAtomCallback} from 'jotai/utils';
import {modeAtom, selectedDateAtom} from '@/components/pages/calendar/atoms';
import {isToday} from 'date-fns';
import {CalendarKitHandle} from "@howljs/calendar-kit";

interface DetailedCalendarDateControllerProps {
    calendarRef: React.RefObject<CalendarKitHandle>;
    setCustomKey: (key: string) => void;
}

export const DetailedCalendarController: React.FC<DetailedCalendarDateControllerProps> = ({
                                                                                              calendarRef,
                                                                                              setCustomKey
                                                                                          }) => {
    const selectedDate = useAtomValue(selectedDateAtom);
    const lastSelectedDate = useRef(selectedDate);

    const checkModeAndGoToDate = useAtomCallback(useCallback((get) => {
        const currentMode = get(modeAtom);
        if ((selectedDate && isToday(selectedDate)) || currentMode === "month") {
            if (currentMode === "month") {
                setCustomKey(selectedDate.toISOString());
            }
            calendarRef?.current?.goToDate({date: selectedDate});
        }
    }, [selectedDate, calendarRef, setCustomKey]));

    useEffect(() => {
        if (selectedDate !== lastSelectedDate.current) {
            checkModeAndGoToDate();
            lastSelectedDate.current = selectedDate;
        }
    }, [selectedDate, checkModeAndGoToDate]);

    return null;
};