I want to change the background color for the specific date which I clicked on date in big react calendar

Question

when user clicked on the specific date the background color should be changed is there is any idea how to do that. I already try many ways but I'm not able to set the background color on select date please help me if you have any idea about that

or

any free library please suggest

    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;

Answer 1

I really liked React Datepicker - https://reactdatepicker.com/ .

Another alternative is a component from AntD library - https://ant.design/components/time-picker/ .

You can find a plenty of them on github too. One example - https://github.com/wojtekmaj/react-calendar