CODEWITHSUNDEEP
react-nativecalendarexpo
Ahmed Essaadi
Ahmed Essaadi

Reputation: 415

react native calendar disable touch event on sundays

hi i'm new to react native i'm trying to disable Sundays and all dates before today date i'm using react-native-calendars i managed to disable all the Sundays but the touch event still works any help please ?

here's the code to disable sundays
import React, {Component} from 'react';
import { isSunday } from "date-fns";
import Day from "react-native-calendars/src/calendar/day/basic";

export class CustomDay extends Component {
  render() {
    const { date, marking } = this.props;
    marking.disabled = isSunday(date.timestamp);
    return <Day {...this.props} />;
  }
}

<Calendar
  dayComponent={props => {
    return <CustomDay {...props} />;
  }}
/>
````

Upvotes: 2

Views: 5360

Answers (1)

hong developer
hong developer

Reputation: 13926

Could you try this?

react-native-calendars has a default event set. However, the value true and false are not specified when the value is disabled.

import React, {Component} from 'react';
import { isSunday } from "date-fns";
import Day from "react-native-calendars/src/calendar/day/basic";

export class CustomDay extends Component {
  render() {
    const { date, marking } = this.props;
    marking.disabled = isSunday(date.timestamp);
     marking.disableTouchEvent = marking.disabled === true ? true : false
    return <Day {...this.props} />;
  }
}

reference link

Definition of Day

 <TouchableOpacity
        testID={this.props.testID}
        style={containerStyle}
        onPress={this.onDayPress}
        onLongPress={this.onDayLongPress}
        activeOpacity={marking.activeOpacity}
        disabled={marking.disableTouchEvent}
      >
        <Text allowFontScaling={false} style={textStyle}>{String(this.props.children)}</Text>
        {dot}
      </TouchableOpacity>

Upvotes: 3

Related Questions