Я хочу изменить цвет фона для конкретной даты, на которую я нажал дату в большом календаре реакции

когда пользователь щелкнул определенную дату, цвет фона должен быть изменен, есть ли идеи, как это сделать. Я уже пробовал много способов, но я не могу установить цвет фона на выбранную дату, пожалуйста, помогите мне, если у вас есть какие-либо представления об этом

или же

любую бесплатную библиотеку, пожалуйста, предложите

          import React from 'react';
    import { Calendar, momentLocalizer } from 'react-big-calendar'
    import moment from 'moment';
    import 'react-big-calendar/lib/css/react-big-calendar.css';
    import './calendarCustomization.scss';
    const localizer = momentLocalizer( moment );
    
    const CalendarView = props => {
    
      const myEventsList = []    
    
      const customDayPropGetter = date => {
      if (date.getDate() === 7 || date.getDate() === 15)
        return {
          className: 'special-day',
          style: {
            border: 'solid 3px ' + (date.getDate() === 7 ? '#faa' : '#afa'),
          },
        }
      else return {}
      }
      
      const selectedDate = (slotInfo) => {
        alert(
                  `selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
                    `\nend: ${slotInfo.end.toLocaleString()}` +
                    `\naction: ${slotInfo.action}`
        )
     
      }      
      return <div><Calendar
               selectable={true}
                className='customCalendar'
                localizer={ localizer }
                 events={ myEventsList }    
                onSelectSlot={selectedDate }
                onNavigate={ (date,view) =>console.log('Date',date,'view',view) }    
            /></div>
    }
    
    export default CalendarView;

1 ответ

Мне очень понравился React Datepicker - https://reactdatepicker.com/ .

Другой альтернативой является компонент из библиотеки AntD - https://ant.design/components/time-picker/ .

Вы также можете найти множество из них на github. Один пример - https://github.com/wojtekmaj/react-calendar

Другие вопросы по тегам