日历标记 react-native-calendars

Question

如何在用户单击日期时显示新标记？我确定我只是在文档中遗漏了一些参考，但我将不胜感激指向正确方向的指针。

我正在使用库 react-native-calendars (https://github.com/wix/react-native-calendars) 及其样板代码。

        <Calendar
            // Collection of dates that have to be colored in a special way. Default = {}
            markedDates={{
                '2021-05-20': {textColor: 'green'},
                '2021-05-22': {startingDay: true, color: 'green'},
                '2021-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
                '2021-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
            }}
            // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
            markingType={'period'}
        />

目前当我点击日期时没有任何反应。我猜我应该检测到点击并相应地更改 markedDates 字典，但我不知道该怎么做。是否有 onMarked 回调方法或我可以使用的方法？

Answer 1

好吧，我在这里做的是，当我点击一天时，它标记了从你点击那天到第 4 天的 4 天（这是为了示例，但你可以调整代码以供你使用案例):

此外，我使用moment来添加日期和格式化日期。您可以使用另一个日期库

import React, { useState } from "react";
import {Calendar} from 'react-native-calendars';
import moment from 'moment';

const App = () => {
  const [markedDates, setMarkedDates] = useState({
    '2021-01-20': {textColor: 'green'},
    '2021-01-22': {startingDay: true, color: 'green'},
    '2021-01-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
    '2021-01-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
  })

  const handleDayPress = (day) => {
    setMarkedDates({
      [day.dateString]: {
        startingDay: true,color: 'green'
      },
      [moment(day.dateString).add(1, 'days').format('YYYY-MM-DD')]: {
        color: 'green'
      },
      [moment(day.dateString).add(2, 'days').format('YYYY-MM-DD')]: {
        color: 'green'
      },
      [moment(day.dateString).add(3, 'days').format('YYYY-MM-DD')]: {
        endingDay: true,color: 'green'
      }
    })
  }

  return (
    <Calendar
      markedDates={markedDates}
      markingType={'period'}
      onDayPress={handleDayPress}
    />
  )
}

export default App;

Answer 2

您可以使用主题作为该日历组件的道具来覆盖样式，如下所示：

theme={{ agendaDayTextColor: '#5A595B', agendaDayNumColor: '#5A595B', agendaTodayColor: '#FF7391', agendaKnobColor: '#FF7391', textSectionTitleColor: '#5A595B', selectedDayBackgroundColor: '#FF7391', selectedDayTextColor: 'white', todayTextColor: '#FF7391', dayTextColor: '#5A595B', textDisabledColor: '#5A595B', dotColor: '#FF7391', selectedDotColor: 'white', arrowColor: '#FF7391', monthTextColor: '#5A595B', }}

日历标记 react-native-calendars

Calendar marking react-native-calendars

reactjs

react-native

react-native-calendars