Reactjs 在本机日历中动态标记日期

我正在尝试在我从api调用获得的react本机日历中标记日期。有人能帮忙吗

<Calendar
markingType={'multi-dot'}
markedDates={this.state.dates}
/>

我调用了标记为（）的函数，在该函数中，我映射数据并将日期推送到另一个数组中，然后按如下所示执行setState

this.setState({ 
    dates : {
        [attendance] : [
            { 
                key: 'vacation', 
                color: 'blue', 
                selectedDotColor: 'red' 
            }
        ]
    }
})

我正在分享我可以自由分享的代码。 附言：我是新手。

---

感谢andvance

请使用此库使用自定义日期样式“react native calendar picker”可以轻松自定义

请使用此库使用自定义日期样式“react native calendar picker”可以轻松自定义

确保markedDates参数不可变。如果更改markedDates对象内容，但对其的引用未更改，则不会触发日历更新

请试一试

  markedDates={{
    '2019-12-9': {
      periods: [
        { startingDay: false, endingDay: true, color: '#5f9ea0' },
        { startingDay: false, endingDay: true, color: '#ffa500' },
        { startingDay: true, endingDay: false, color: '#f0e68c' },
      ]
    },
    '2019-12-9': {
      periods: [
        { startingDay: true, endingDay: false, color: '#ffa500' },
        { color: 'transparent' },
        { startingDay: false, endingDay: false, color: '#f0e68c' },
      ]
    },
  }}

---

确保markedDates参数是不可变的。如果更改markedDates对象内容，但对其的引用未更改，则不会触发日历更新

请试一试

  markedDates={{
    '2019-12-9': {
      periods: [
        { startingDay: false, endingDay: true, color: '#5f9ea0' },
        { startingDay: false, endingDay: true, color: '#ffa500' },
        { startingDay: true, endingDay: false, color: '#f0e68c' },
      ]
    },
    '2019-12-9': {
      periods: [
        { startingDay: true, endingDay: false, color: '#ffa500' },
        { color: 'transparent' },
        { startingDay: false, endingDay: false, color: '#f0e68c' },
      ]
    },
  }}

---

事实上，我最近在react原生日历上也做了同样的事情。以下是我编写的用于创建标记日期的函数的简化版本：

 createMarkedDates = (dates) => {
    let markedEvents = {};
    let numEvents = {};
    let uniqueDates = [...new Set(dates)]; //remove duplicate event dates

    dates.forEach(function (count) { //if multiple events on one date, determine how many events are on each date
        numEvents[count] = (numEvents[count] || 0) + 1;
    });
        uniqueDates.forEach(function (date) {
            let dots = [];
            let markedData = {};
            for (let i = 0; i < numEvents[date]; i++) {
                dots.push(event); //add dots for as many events are on that day
            }
            markedData['dots'] = dots; //set the array of dots
            markedEvents[date] = markedData; //add markers to marked dates
        });
    };
    this.setState({markedDates: markedEvents});
}

createMarkedDates=（日期）=>{
设markedEvents={}；
设numEvents={}；
让uniqueDates=[…新设置（日期）]；//删除重复的事件日期
dates.forEach（函数（计数）{//如果一个日期上有多个事件，则确定每个日期上有多少个事件
numEvents[计数]=（numEvents[计数]| | 0）+1；
});
uniqueDates.forEach（函数（日期）{
让点=[]；
设markedData={}；
for（设i=0；i

dates是从API传递的日期数组

这将输出一个带有标记的日期对象，每个日期都有标记，如果需要，它将在一天中放置多个点，如果它在数组中出现多次

此外，我认为您的日期需要采用ISO日期格式（YYYY-MM-DD），以便使用react本机日历来标记日期

---

我希望这个例子有帮助

事实上，我最近在react原生日历上也做了同样的事情。以下是我编写的用于创建标记日期的函数的简化版本：

 createMarkedDates = (dates) => {
    let markedEvents = {};
    let numEvents = {};
    let uniqueDates = [...new Set(dates)]; //remove duplicate event dates

    dates.forEach(function (count) { //if multiple events on one date, determine how many events are on each date
        numEvents[count] = (numEvents[count] || 0) + 1;
    });
        uniqueDates.forEach(function (date) {
            let dots = [];
            let markedData = {};
            for (let i = 0; i < numEvents[date]; i++) {
                dots.push(event); //add dots for as many events are on that day
            }
            markedData['dots'] = dots; //set the array of dots
            markedEvents[date] = markedData; //add markers to marked dates
        });
    };
    this.setState({markedDates: markedEvents});
}

createMarkedDates=（日期）=>{
设markedEvents={}；
设numEvents={}；
让uniqueDates=[…新设置（日期）]；//删除重复的事件日期
dates.forEach（函数（计数）{//如果一个日期上有多个事件，则确定每个日期上有多少个事件
numEvents[计数]=（numEvents[计数]| | 0）+1；
});
uniqueDates.forEach（函数（日期）{
让点=[]；
设markedData={}；
for（设i=0；i

dates是从API传递的日期数组

这将输出一个带有标记的日期对象，每个日期都有标记，如果需要，它将在一天中放置多个点，如果它在数组中出现多次

此外，我认为您的日期需要采用ISO日期格式（YYYY-MM-DD），以便使用react本机日历来标记日期

---

我希望这个例子有帮助

你到底有什么问题？我需要标记从api获取的日期。我无法做到这一点。这里面的

出勤率是什么？我将它作为映射后的另一个变量来推送日期。你到底有什么问题？我需要标记我从api获得的日期。我不能这样做。这是什么
attention
？在映射它之后，我使用它作为另一个变量来推送日期。customDatesStyles.push（{date:“12/8/2019”，style:{backgroundColor:“yellow”}，textStyle:{color:'black'}，containerStyle:[]，}）；非常感谢。但我希望通过react native calendars.customDatesStyles.push（{date:“12/8/2019”，style:{backgroundColor:“yellow”}，textStyle:{color:'black'}，containersstyle:[]，}）来完成；非常感谢。但我希望它是通过本地日历来完成的。