import React, { useState } from "react";
import { View, Text, SafeAreaView } from "react-native";
import { Calendar } from "react-native-calendars";
const Home = () => {
const [date, setDate] = useState("")
const [datecolor,setDateColor]=useState("")
const addZero = (a) => {
if (a < 10 && a > 0) {
return '0' + a.toString();
} else {
return a;
}
}
const getCurrentDate = () => {
var date = new Date().getDate();
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
return year + '-' + addZero(month) + '-' + addZero(date);//yyyy-mm-dd
}
const getMinDate = () => {
var date = new Date().getDate();
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
return year + '-' + addZero(month) + '-' + addZero(date);//yyyy-mm-dd
}
return (
<SafeAreaView style = {{ flex: 1 }}>
<View>
<Calendar
current = {getCurrentDate().toString()}
minDate = {getMinDate().toString()}
maxData = {'2050-01-01'}
monthFormat = {'MMMM yyyy'}
onDayPress = {day => {
setDate(day.dateString)
setDateColor("#000")
}}
hideArrows = {false}
hideExtraDays = {true}
disableMonthChange = {false}
firstDay = {1}
theme = {{
todayTextColor: 'red',
}}
/>
<Text style = {{fontSize:20,textAlign:'center',fontSize:25,fontWeight:'bold'}}>{date}</Text>
</View>
</SafeAreaView>
);
}
export default Home;
он работает идеально
но я хочу, если я выберу любую дату в изменении цвета фона даты календаря
как По умолчанию выбрать дату в календаре
это мой результат
здесь я выбираю 20-ю дату, но фон 20-й даты не меняется в календаре
Я хочу как 12-дневный фон в календаре
Вам нужно добавить реквизит под названием markedDates
в компонент Calendar
. Вы можете увидеть пример в документации здесь wix/react-native-calendars
...
<Calendar
markedDates = {{
[date]: { selected: true, marked: true, selectedColor: 'blue' },
}}
current = {getCurrentDate().toString()}
minDate = {getMinDate().toString()}
maxData = {'2050-01-01'}
monthFormat = {'MMMM yyyy'}
onDayPress = {(day) => {
setDate(day.dateString);
setDateColor('#000');
}}
hideArrows = {false}
hideExtraDays = {true}
disableMonthChange = {false}
firstDay = {1}
theme = {{
todayTextColor: 'red',
}}
/>
...