文章/答案/技术大牛

发布

社区首页 >问答首页 >如何自定义带有循环边框的日期项？

问如何自定义带有循环边框的日期项？
EN

Stack Overflow用户

提问于 2022-10-24 08:55:43

回答 1查看 82关注 0票数 1

目前，我在我的项目中使用了一个自定义的样式日历。我想要自定义每个日期项目的圆形边框，如下图。

我的dataSources是

type SourceType = {
    title: string,
    startDate: Date,
    endDate: Date,
    color: 'red' | 'blue'
}

dataSources: SourceType[]

和React Calendar组件是

import Calendar from 'react-calendar'
...
const [selectedDate, setSelectedDate] = React.useState(new Date())
...
<Calendar
    view='month'
    onChange={setSelectedDate}
    value={selectedDate}
/>

请分享你的解决方案。

reactjs

calendar

datasource

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-10-26 09:07:51

您可以使用react日历的tileClassName属性。这是我的解决方案：

  import moment from 'moment';
  ...
  <Calendar
    view='month'
    onChange={setSelectedDate}
    value={selectedDate}
    tileClassName={({ date, view }: CalendarTileProperties) => {
        let resClassName = ''
        if (dataSources.find(x => (moment(x.startDate).format("DD-MM-YYYY") === moment(date).format("DD-MM-YYYY")) && (x.color === 'red'))) {
            resClassName += ' red_item'
        }
        if (dataSources.find(x => (moment(x.startDate).format("DD-MM-YYYY") === moment(date).format("DD-MM-YYYY")) && (x.color === 'blue'))) {
            resClassName += ' blue_item'
        }
        return resClassName
    }}
  />

并插入以下scss代码：

.calendar {
    .month-container {
        .day {
            .day-content {
                padding: 3px 6px;
                border-radius: 50%;

                &.blue_item {
                    border: 2px solid blue;
                }

                &.red_item {
                    border: 2px solid red;
                }
            }
        }
    }
}

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74178696

复制

相似问题

问如何自定义带有循环边框的日期项？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何自定义带有循环边框的日期项？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何自定义带有循环边框的日期项？
EN