微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

我想更改我在 big react 日历中单击日期的特定日期的背景颜色

如何解决我想更改我在 big react 日历中单击日期的特定日期的背景颜色

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

请推荐任何免费图书馆

    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;

解决方法

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。