接上集//www.greatytc.com/p/483bdcd045e5
引用

<TouchableOpacity 
      style={{paddingHorizontal:10,paddingVertical:5,borderColor:'#08107b',borderWidth:1,borderRadius:8.5}}
     onPress={()=>{
            CalendarSelect.select(res=>{
                     if(res){}
                })
      }}
   >
        Text style={{ fontSize: 14, textAlign: 'left',color:'#08107b'}}>{ '点击选择'}</Text>
</TouchableOpacity>

/**
 * @author q
 * @description 日期选择
 */

 import React, { Component , useEffect} from 'react';
 import NavigationBar from "../../components/NavigationBar";
 import { RouterHelper } from '../../utils';
 import DeviceStorage from '../../utils/DeviceStorage';

 import { CalendarList, Agenda, LocaleConfig, Calendar} from 'react-native-calendars';
 import { View, StyleSheet,Dimensions, Text,TouchableOpacity } from 'react-native';
 import * as api from '@/api/apicommon';
 import dayjs from 'dayjs';
import { Toast } from '@ant-design/react-native';

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

const {width, height} = Dimensions.get('screen');
 
export default class CalendarSelect extends Component<any> {
 
    callback = (data: any) => { }

    static select(callback: (data: any) => void) {
        RouterHelper.navigate('CalendarSelect', { callback })
    }

    static hide() {
        RouterHelper.back()
    }

    state = {
        show: false,
        initVal: "",
        selectDate:'',
        selectTime:'',
        //  currentMonth:new Date().getMonth(),
        selectedDate: new Date(), // 初始日期  
        currentMonth: new Date(), // 当前显示的月份  
        markedDates:{
            "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',marked:true, 
                customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
            },
            '2024-05-02': { markingType:'dot',marked:true, 
                customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
            },
            '2024-05-03': { markingType:'dot',marked:true, 
                customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
            },
            '2024-05-04': { markingType:'dot',marked:true, 
                customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
            },
            '2024-05-05': { 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},
        }
    }

    // 当按钮被点击时，更改月份  
    changeMonth = (month) => {  
        const newDate = new Date(month);  
        this.setState({ currentMonth: newDate });
    };
 
    componentDidMount() {
        this.callback = this.props.navigation.getParam("callback");
        currentMonths = dayjs(new Date()).format('YYYY-MM');
        //  XLoading.show()
        this.setState({
            show:true,
        })
        try {
            DeviceStorage.get("CalendarSelect")
            .then(res=>{
                if(res){
                    this.setState({
                        form : res
                    })
                }
            })
            this.getHoliday()
        } catch (error) {console.log(error)}
        
    }

    getHoliday=()=>{
        api.getData('/appointment/getNoWork')
        .then(res => {
            console.log("/appointment/getNoWork>>>>>>>>",JSON.stringify(res))
            if(res.code == 200 && res.data){
                let markedDatesList = {}
                res.data.map((item, index)=>{
                    markedDatesList[item] = { markingType:'dot',marked:true, 
                        customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
                    }
                })
                this.setState({
                    markedDates:markedDatesList
                })
                console.log('sd>>>>>>>>',markedDatesList)
            }
        })
    }

    _onPress = (day) => {
        // success
        CalendarSelect.hide()
        this.props.navigation.state.params.callback(day)
    }

     // 日历 start

    handleDayPress = (day) => {
        console.log('selected day', day, day.timestamp);
        // 你可以在这里更新 markedDates 或执行其他操作
        if(this.state.markedDates.hasOwnProperty(day.dateString)){
            // return alert ("休日不建议选择")
            return Toast.info("休息日不建议选择",1) // 停留1秒
        }
        this.setState({
            selectDate: day.dateString
        },()=>{
            this._onPress(day.dateString)
            // if(this.state.selectDate != '' && this.state.selectTime != ''){
            //     this._onPress(day.dateString + "|" + this.state.selectTime)
            // }else{
            //     return alert ("请选择上午还是下午")
            // }
        })
    };

    handleTimePress = (time)=>{
        this.setState({
            selectTime: time
        },()=>{
            if(this.state.selectDate != '' && this.state.selectTime != ''){
                this._onPress(this.state.selectDate + "|" + time)
            }else{
                return alert ("请选择日期")
            }
        })
    }

    handleMonthChange = (month) => {
        currentMonths = month.dateString;
        console.log('month changed>>>', month, currentMonths);
    };

    // 更新当前显示的月份  
    updateCurrentMonth = (month) => { 
        if(monthChage) {
            monthChage = false;
            this.setState({ currentMonth: month },()=>{
                monthChage = true
            });
        } 
    };
    // 通过按钮选择月份  
    onButtonPress = (offsetMonths) => {  
        const currentMonth = new Date(currentMonths);
        currentMonth.setMonth(currentMonth.getMonth() + offsetMonths);  
        currentMonths = currentMonth.toString();
        this.updateCurrentMonth(currentMonth);  
    }; 
    // 日历 end
 
     render() {
        const { currentMonth } = this.state;
        return <View style={{ flex: 1, backgroundColor: '#f8f8f8'}}>
            <NavigationBar title="时间选择" />
            <CalendarList
                firstDay={1}
                current={currentMonth}
                // dayComponent = {renderDayComponent}
                monthFormat={'yyyy年MM月'}
                // minDate={new Date().toISOString().split('T')[0]}
                // calendarHeight={height}
                calendarWidth={width}
                horizontal={true}
                pagingEnabled={true}
                markedDates={this.state.markedDates}
                markingType='custom'
                onDayPress={this.handleDayPress}
                onMonthChange={this.handleMonthChange}
                // showScrollIndicator={true}
            />
            {/* <View style={{flexDirection:'row',justifyContent:'space-around',marginTop:20}}>
                <TouchableOpacity
                    onPress={()=>{
                        this.handleTimePress('上午')
                    }}
                >
                    <Text style={styles.fontStyles}>上午</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={()=>{
                        this.handleTimePress('下午')
                    }}
                >
                    <Text style={styles.fontStyles}>下午</Text>
                </TouchableOpacity>
            </View> */}
            <View style={{flexDirection:'row',justifyContent:'space-around',marginTop:20}}>
                <TouchableOpacity
                    onPress={() => this.onButtonPress(-1)}
                >
                    <Text style={styles.fontStyles}>上个月</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={() => this.onButtonPress(+1)}
                >
                    <Text style={styles.fontStyles}>下个月</Text>
                </TouchableOpacity>
            </View>
         </View>
     }
 }

 const styles = StyleSheet.create({
    item: {
        flexDirection: 'row',
        marginLeft: 14.5,
        marginRight: 15.5,
        borderRadius: 12.5,
        paddingHorizontal: 10,
        paddingVertical: 9.5,
        marginBottom: 15,
        justifyContent: 'space-between'
    },
    textStyle: {
          borderColor:'#08107b',
          paddingVertical:8,
          paddingHorizontal:40,
          borderWidth:1,
          borderRadius:12.5,
          color:'#fff',
          fontSize:16,
          backgroundColor: '#08107B'
      },
    send_btn: {
        justifyContent:'center',
        marginVertical:20,
        alignContent:'center',
        alignItems:'center'
    },
    fontStyles:{
        fontSize:16,
        textAlign:'center',
        padding:10
    }
  })