React-native-calendars: Selecting/Unselecting multiple days.

[davidfloegel]

Hey,

Love the calendar! :)

One issue though. I'm trying to implement it so the user can select certain dates for an event they're hosting.

Now, selecting dates works great but unselecting seems to be an issue:

https://www.dropbox.com/s/u95gkubrtrmjul0/calendar-issue.mov?dl=0

I've made a quick video.

My calendar implementation looks like this:

<Calendar
current={'2017-05-16'}
minDate={'2017-05-10'}
maxDate={'2017-05-29'}
firstDay={1}
selected={ this.state.marked }
onDayPress={ day => this.onSelect( day ) }

this.onSelect() just changes the array. The updating for adding/removing dates works correctly however the calendar is not updating accordingly.

Is this something that _should_ be working?

Thanks!

[tautvilas]

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

[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 [e-mail]
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
https://github.com/wix/react-native-calendars/issues/34#issuecomment-304360536,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMm7VIEigVld_PaVHVCl_MYFf-_3icBPks5r9x6egaJpZM4NnjnK
.

--

David FloegelUI/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

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

[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!

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

[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().