react native 日历中添加节假日文字标记（react-

image.png

记录一下 虽然方法不太可取，但是功能实现了
修改上图中的源码即可

import { View ,Text} from 'react-native';
...

return <View style={{width:35,height:35,alignItems:'center'}}><Text style={{color:'red'}}>休</Text></View>; 

首先安装react-native-calendars

npm install --save react-native-calendars
or
yarn add react-native-calendars

image.png

写个组件吧

import React from 'react';
import { CalendarList, Agenda, LocaleConfig, Calendar} from 'react-native-calendars';
import { View, StyleSheet,Dimensions, Text,TouchableOpacity } from 'react-native';

LocaleConfig.locales['zh'] = {
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
    dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    today: '今天'
  };
  
LocaleConfig.defaultLocale = 'zh';

const {width, height} = Dimensions.get('screen');
  
// 自定义日历组件
const CustomCalendar = ({
 markedDates,
 onDayPress,
 onMonthChange,
 // 其他你需要的props...
}) => {

const MyDayComponent = ({ date, state, marking }) => {  
  const isToday = state === 'today';  
  const isMarked = marking && marking.marked;  
  
  return (  
    <TouchableOpacity
      onPress={()=>{
        console.log(date,state,marking)
        if(isMarked) return alert ("休息日不建议选择")
        onDayPress(date)
      }} 
    >
      <View style={styles.dayComponent}>  
        <Text style={[styles.dayText, isToday && styles.todayText, isMarked && styles.markedText]}>  
          {date.day}  
        </Text> 
        {isMarked ? <Text>休</Text> : null} 
      </View> 
    </TouchableOpacity> 
  );  
}; 

const renderDayComponent = (dayProps) => {  
  return <MyDayComponent {...dayProps} />;  
}; 


 return (
   <View style={styles.calendarContainer}>
     <CalendarList
        // dayComponent = {renderDayComponent}
        monthFormat={'yyyy年MM月'}
        // maxDate={new Date().toISOString().split('T')[0]}
        calendarHeight={height/2.2}
        calendarWidth={width}
        horizontal={true}
        pagingEnabled={true}
        markedDates={markedDates}
        markingType='custom'
        onDayPress={onDayPress}
        onMonthChange={onMonthChange}
     />
   </View>
 );
};

const styles = StyleSheet.create({
 calendarContainer: {
   flex: 1,
   // 其他样式...
 },
 dayComponent: {  
  padding: 10,  
  justifyContent: 'center',  
  alignItems: 'center',  
},  
dayText: {  
  fontSize: 16,  
},  
todayText: {  
  color: 'blue',  
  fontWeight: 'bold',  
},  
markedText: {  
  color: 'red',  
},  
});

export default CustomCalendar;

引用一下吧

import CustomCalendar from './CustomCalendar';

......

// 日历 start
    const [markedDates, setMarkedDates] = useState({
        '2024-04-04': { markingType:'dot',marked:true, 
            customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
        },
        '2024-04-05': { markingType:'dot',marked:true, 
            customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
        },
        '2024-04-06': { markingType:'dot',marked:true, 
            customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
        },
        // '2024-05-01': { markingType:'dot', dotColor: 'blue',marked:true,selected: true},
});

    const [calendarsFlag, setCalendarsFlag] = useState(true)

    const handleDayPress = (day) => {
        console.log('selected day', day);
        // 你可以在这里更新 markedDates 或执行其他操作
        // setCalendarsFlag(false)
        
        if(markedDates.hasOwnProperty(day.dateString)){
            return alert ("休日不建议选择")
        }
        alert (day.dateString)
    };
   const handleMonthChange = (month) => {
        console.log('month changed', month);
        setCurrentMonth(month);
    };

......


<CustomCalendar
    markedDates={markedDates}
    onDayPress={handleDayPress}
    onMonthChange={handleMonthChange}
/>

示例图如下：

0df8c882518307e66353effc10505fa.jpg db7818d70ceadc1cec22377fc20c22f.jpg