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

Created on 1 Jun 2017 · 10Comments · Source: wix/react-native-calendars

How to disable a row of days, like all Sundays or all Saturdays?

Source

yayanartha

Most helpful comment

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)
              })
            }}



md5-80ff9403592e9ee3ae1033ad5329c2a6



  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
  }

arinhouck on 18 Jan 2018

👍21 🎉14 ❤12 🚀6

All 10 comments

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

tautvilas on 21 Jun 2017

👎3

@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?

arinhouck on 7 Oct 2017

👍8

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

jeffmwells on 1 Nov 2017

Curious about this as well.

404sand808s on 8 Jan 2018

Something new?! I need it. :*

rodrix on 10 Jan 2018

implementing a day component and setting state to disabled if it's a weekend is a workaround. example from @eddiegroves here: https://github.com/wix/react-native-calendars/issues/280

jebora on 10 Jan 2018

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.

404sand808s on 10 Jan 2018

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)
              })
            }}



md5-80ff9403592e9ee3ae1033ad5329c2a6



  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
  }

arinhouck on 18 Jan 2018

👍21 🎉14 ❤12 🚀6

@arinhouck @404sand808s what is moment()?