reactjs - 我想更改在大反应日历中单击日期的特定日期的背景颜色

Question

当用户单击特定日期时，应更改背景颜色是否知道如何做到这一点。我已经尝试了很多方法，但是我无法在选定日期设置背景颜色，如果您对此有任何想法，请帮助我

或者

任何免费图书馆请建议

    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;

标签： reactjsreact-nativecalendarreact-calendar

Answer 1

我真的很喜欢 React Datepicker - https://reactdatepicker.com/。

另一种选择是来自 AntD 库的组件 - https://ant.design/components/time-picker/。

你也可以在 github 上找到很多。一个例子 - https://github.com/wojtekmaj/react-calendar