Question

我正在尝试在api调用中获得的react-native-calendars中标记日期。有人可以帮忙吗？

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

在构造函数中，我正在维护

this.state = {dates : []}

我已经调用了marked（）函数，在该函数上我正在数据上映射并将日期推入另一个数组，然后将setState做为

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

我正在分享我自由使用的代码。附注：我是新手。感谢andvance

Answer 1

请使用此库，以自定义日期样式“ react-native-calendar-picker”进行自定义很容易

Answer 2

确保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' },
      ]
    },
  }}

Answer 3

最近，我实际上不得不对react-native-calendars做完全相同的事情。这是我编写的用于创建标记日期的函数的简化版本：

 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});
}

dates是从API传递的日期数组。

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

此外，我认为您的日期必须采用ISO日期格式（YYYY-MM-DD），以便“本机”日历标记日期。

我希望这个例子有帮助！

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

3 个答案: