Selecting/Unselecting multiple days. about react-native-calendars

[turkle12]

@chapeljuice this is a basic version of what I used.

<Calendar firstDay={1} onDayPress={this.onSelectDay} markedDates={this.dates} markingType="interactive" minDate={today} hideExtraDays={true} />

This is the onSelectDay function

`const { booked, dates } = this.state
const selectedDate = date.dateString

  if ( dates[selectedDate] ) {
    const newDates = { ...dates }
    delete newDates[selectedDate]
    this.setState( {
      dates: newDates
    } )

  } else {
    const newDates = { ...dates }
    newDates[selectedDate] = [
      {startingDay: true, color: colors.sea, textColor: colors.white},
      {endingDay: true, color: colors.sea, textColor: colors.white},
    ]
    this.setState( {
      dates: newDates
    }  )
  }`

[tautvilas]

It should be working, I suspect there is a bug in componentShouldUpdate and rerender does not happen. I will look into it.

[davidfloegel]

Yes dude that's perfect now!! cheers mate :)

[turkle12]

Sorry to bring this up but I'm trying to implement this functionality but I'm a bit stumped as to how. Could either of you @tautvilas @davidfloegel help out?
Thanks

(Let me know if this needs to be a separate issue)

[davidfloegel]

Awesome thank you :)

[tautvilas]

Do you mutate this.state.marked in onDayPress ? I think the API is built on the premise that immutable objects are being passed to it (so that reference checks can be done in shouldComponentUpdate). What if you recreate the this.state.marked object on each selection? Maybe it solves the problem?

[davidfloegel]

I did create a new variable where I push/remove the entries. So an === should be false! Would it work with adding though? That should face the same issue no?

…

On Friday, 26 May 2017, Tautvilas Mečinskas ***@***.***> wrote: Do you mutate this.state.marked in onDayPress ? I think the API is built on the premise that immutable objects are being passed to it (so that reference checks can be done in shouldComponentUpdate). What if you recreate the this.state.marked object on each selection? Maybe it solves the problem? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMm7VIEigVld_PaVHVCl_MYFf-_3icBPks5r9x6egaJpZM4NnjnK> .

-- *David Floegel*UI/UX Developer The Clarence Centre 6 St George's Circus London SE1 6FE www.LearningLadders.info <http://www.learningladders.info/> This email, including any attachments, is confidential and is protected by copyright. If you have a reason to believe that you are not the intended recipient please do not copy, disseminate or print this email, delete it from your system and contact us immediately at [email protected].

[tautvilas]

could you post onSelect code?

[davidfloegel]

Sorry for the delay!

Sorry for the messy code, it's just for trying out:

onSelect( date ) {
        const { marked } = this.state

        let { year, month, day } = date
        month = month < 10 ? `0${ month }` : month
        day = day < 10 ? `0${ day }` : day
        const key = `${ year }-${ month }-${ day }`


        const index = marked.indexOf( key )

        if( index > -1 ) {
            this.setState( { marked: [
                ...marked.slice( 0, index ),
                ...marked.slice( index + 1 )
            ] } )
        } else {
            this.setState( { marked: [
                ...marked,
                key
            ] } )
        }
    }

I even tried to do a deep clone when passing in the dates into the calendar but no luck!

[tautvilas]

Hey, I changed marking api in new version to be easier to use. Now you can specified if date is selected or marked in same markedDates object

https://github.com/wix/react-native-calendars/blob/master/README.md#date-marking

Also added dateString prop to object returned from onDayPress so you don't need to do manual conversion anymore.

Plz check if these changes solve your bug

[chapeljuice]

I would also like to know how to do this if you have a minute to spare for some code examples! Lovely calendar, btw!

[Veeraharikumar]

Hi @tautvilas ,
im trying to highlight days for whole years.But i can only highlight days for current month.How to highlight days for all months using onMonthChange().