Как перерисововать дневной график при изменении даты (React Calendar)

Question

Мне нужно что бы при нажатии на стрелку каждый раз перерндировалось этот график с "Лист Ожидания". Ниже прикрепляю код указанный для toolbar (Где стрелки и тд)

        toolbar.date.setDate(toolbar.date.getDate() - 1);
        toolbar.onNavigate('prev');
      };
      
      const goToNext = () => {
        toolbar.date.setDate(toolbar.date.getDate() + 1);
        toolbar.onNavigate('next');
      };
    
    const goToCurrent = () => {
        const now = new Date();
        toolbar.date.setMonth(now.getMonth());
        toolbar.date.setYear(now.getFullYear());
        toolbar.onNavigate('current');
    };

    const label = () => {
        const date:any = moment(toolbar.date);
        return (
            <span>
                <b>{date.format('D')} {date.format('MMMM')}, </b>
                <b>{days[new Date(date).getDate()+1]}</b>
            </span>
        );
    };

    return (
        <HeaderBar sx={{display:"flex", alignItems:'center', gap:5}}>
            <div>
                <NavigateGroup>
                    <Today>
                        <Button  onClick={goToCurrent}>Сегодня</Button>
                    </Today>
                    <NavigateGroup>
                        <Button onClick={goToBack}>&#8249;</Button>
                        <Button  onClick={goToNext}>&#8250;</Button>
                    </NavigateGroup>
                </NavigateGroup>
            </div>
            <LabelDate >{label()}</LabelDate>
        </HeaderBar >
    );
};

Answer 1

Попробуйте использовать встроенные в библиотеку методы для перерисовки даты

import {ToolbarProps} from "react-big-calendar";

export interface ICustomTooolbarProps {
    view: string
    views: string[]
    label: any
    localizer: any
    onNavigate: (action: any) => void
    onView: (view: any) => void
    onViewChange: (view: any) => void
    messages: any
}


export const navigateContants = {
    PREV: 'PREV',
    NEXT: 'NEXT',
    TODAY: 'TODAY',
    DATE: 'DATE',
}

export const views = {
    MONTH: 'month',
    WEEK: 'week',
    WORK_WEEK: 'work_week',
    DAY: 'day',
    AGENDA: 'agenda',
}
export const Toolbar: React.FC<ToolbarProps> = props =>{

    function navigate(action) {
        props.onNavigate(action)
    }

    return (
            <div className={styles.wrapbtn}>
                <button
                    style={{ background: '#001529', borderColor: '#001529' }}
                    onClick={navigate.bind(null, navigateContants.TODAY)}
                >
                    Сейчас
                </button>
                <button
                    style={{ background: '#001529', borderColor: '#001529' }}
                    onClick={navigate.bind(null, navigateContants.PREV)}
                >
                   Прошлый
                </button>
                <button
                    style={{ background: '#001529', borderColor: '#001529' }}
                    onClick={navigate.bind(null, navigateContants.NEXT)}
                >
                    Следующий
                </button>
            </div>

            <span className={styles.label}>{props.label}</span>

            <span className={styles.wrapbtnViews}>
        <button onClick={() => props.onView('month')}>
          Месяц
        </button>
        <button onClick={() => props.onView('week')}>
          Неделя
        </button>
      </span>
    )
}

БЛОГ НА HUSL

Как перерисововать дневной график при изменении даты (React Calendar)

Ответы (1 шт):