Disable a row of days (e.g. disable all Sundays) about react-native-calendars

[arinhouck]

I should have followed up here earlier, I disabled based on month change. This worked out perfectly.

const DISABLED_DAYS = ['Saturday', 'Sunday']
state = {
    markedDates: this.getDaysInMonth(moment().month(), moment().year(),  DISABLED_DAYS)
  }

onMonthChange={(date) => {
              this.setState({
                markedDates: this.getDaysInMonth(date.month - 1, date.year, DISABLED_DAYS)
              })
            }}

  getDaysInMonth(month, year, days) {
    let pivot = moment().month(month).year(year).startOf('month')
    const end = moment().month(month).year(year).endOf('month')

    let dates = {}
    const disabled = { disabled: true }
    while(pivot.isBefore(end)) {
      days.forEach((day) => {
        dates[pivot.day(day).format("YYYY-MM-DD")] = disabled
      })
      pivot.add(7, 'days')
    }

    return dates
  }

[tautvilas]

Hi, you can specify which dates are disabled in markedDates prop

[seba9999]

For anyone reaching here ... And trying to use @arinhouck answer...

Juste know that const disabled = { disabled: true } isn't enough to disable the onDayPress trigger

replace it with : const disabled = { disabled: true, disableTouchEvent: true };

Also there's a mistake in the getDaysInMonth fucntion :

During the forEach trying to create the key for the dates object the variable pivot is modified so it skip some weeks ...

Here is my version (I've change the ['Saturday', 'Sunday'] with days indexes to get ride of the locales) :

const DatePicker = ({
  date,
  setDate,
  initDate = new Date(),
  minimumDate = new Date(),
  disabledDaysIndexes = [6, 7],
}) => {
  const [markedDates, setMarkedDates] = useState({});
  
  // And don't forget to disabled the "first" dates on init : 
  useEffect(() => {
    getDisabledDays(
      initDate.getMonth(),
      initDate.getFullYear(),
      disabledDaysIndexes
    );
  }, []);

  const getDisabledDays = (month, year, daysIndexes) => {
    let pivot = moment().month(month).year(year).startOf('month');
    const end = moment().month(month).year(year).endOf('month');
    let dates = {};
    const disabled = { disabled: true, disableTouchEvent: true };
    while (pivot.isBefore(end)) {
      daysIndexes.forEach((day) => {
        const copy = moment(pivot);
        dates[copy.day(day).format('YYYY-MM-DD')] = disabled;
      });
      pivot.add(7, 'days');
    }
    setMarkedDates(dates);
    return dates;
  };

  <Calendar
    theme={{
      textSectionTitleDisabledColor: '#d9e1e8',
    }}
    markedDates={markedDates}
    current={initDate}
    minDate={minimumDate}
    onDayPress={(day) => {
      setDate(day.dateString);
    }}
    firstDay={1}
    enableSwipeMonths={true}
    disabledDaysIndexes={disabledDaysIndexes}
    onMonthChange={(date) => {
      getDisabledDays(date.month - 1, date.year, disabledDaysIndexes);
    }}
  />;
};

[arinhouck]

@tautvilas I may be missing something on this comment. I see you can explicitly disable a date (eg. 10/06/2017), but a given set of days in a week (eg. disable all weekend days like Saturday or Sunday) is infinite. How is that done with this plugin?

[NarendraSingh88]

@arinhouck @404sand808s what is moment()?

[ArtemBozhenko]

simple solution

const checkDay = (value: string) => value.split(" ")[1] === 'Saturday' || value.split(" ")[1] === 'Sunday'

<Calendar
 dayComponent={({accessibilityLabel, date, state}: any) => {

       return (
         <View>
           <Text style={[styles.days, (checkDay(accessibilityLabel) || state)  && styles.disabled]}>
             {date.day}
           </Text>
         </View>
       );
     }}
 />

[NoahSimajji]

Hello guys, i have this issue. When first day of month is Sunday then will became like this.. That's weird. Other day is working fine, just when this happened.

And yaa i am using this formula as well.

const getDisabledDays = (month, year, daysIndexes) => {

let pivot = moment().month(month).year(year).startOf("month")
const end = moment().month(month).year(year).endOf("month")
let dates = {}

const disabled = { disabled: true, disableTouchEvent: true }
while (pivot.isBefore(end)) {
  daysIndexes.forEach((day) => {
    const copy = moment(pivot)
    dates[copy.day(day).format("YYYY-MM-DD")] = disabled
  })
  pivot.add(7, "days")
}
setDisableDates(dates)
return dates

}

[Jean-Kenned]

@NoahSimajji I had the same problem, I fixed this with this approach:

const getDisabledDays = (month, year, daysIndexes) => {

  let pivotDay = moment().month(month).year(year).startOf('month')
  const lastDayOfMonth = moment().month(month).year(year).endOf('month')
  
  let disabledDates = {}
  
  const disabledProps = { disabled: true, disableTouchEvent: true }
  
  let allDayOfMonthChecked = false

  while (!allDayOfMonthChecked) {
    if (!pivotDay.isBefore(lastDayOfMonth)) {
      allDayOfMonthChecked = true
    }
  
    daysIndexes.forEach(day => {
      const copy = moment(pivotDay)
      disabledDates[copy.day(day).format('YYYY-MM-DD')] = disabledProps
    })
    pivotDay.add(7, 'days')
  }
   setDisableDates(disabledDates)
   return disabledDates
}

Please @NoahSimajji , let me know if this works for you

[jeffmwells]

@tautvilas Seconding @arinhouck , how would one disable Weekends without a bunch of extra processing?

[404sand808s]

Curious about this as well.

[rodrix]

Something new?! I need it. :*

[jebora]

implementing a day component and setting state to disabled if it's a weekend is a workaround. example from @eddiegroves here: #280

[404sand808s]

Worked this up:

`let markedDates = {

  [moment().format('YYYY-MM-DD')]: {marked: true, dotColor: PINK_DARK}, // mark today with a red dot
  [this.state.selected]: {selected: true}
}

for (i = 1; i < 13; i++ ) { // figure out if the next X days are weekend days and if so disable them

  let day = moment().add(i, 'd')

  if (day.isoWeekday() === 6 || day.isoWeekday() === 7) {
    markedDates[day.format('YYYY-MM-DD')] = {disabled: true}
  }
}`

After that pass markedDates to the calendar component as a markedDates prop. I only needed it for the next week or two so I ran it few times. If you need a fix to disable weekends far into the future I’m not sure if this would be efficient.

[jebora]

@NarendraSingh88 it's a JS library for time/date manipulation. https://momentjs.com/

[PetroviciMihail]

onDayPress={(day) => {
var date = new Date(day.dateString);
if (date.getDay() != 6 && date.getDay() != 7)
console.log("selected day", day);
}}
to disable just the press event, no ui marking