0

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

或者

任何免费图书馆请建议

    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;
4

1 回答 1

0

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

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

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

于 2021-06-25T11:00:46.530 回答