Allow for multiple selection of dates

[Elricos]

Hi, in the app I am working where I wish to allow for booking multiple days at once, noticed that if multiple dates in an array have selected set to true, all selection indicators disappear and then only reappear when there is only one case within that array with selected set to true.

So I wish for a feature to be added that could allow for multiple dates to be selected at once and still show the user that these dates are all selected.

[tautvilas]

hey, this should be supported, could you give me your code snippet? I guess you're doing something wrong

[Elricos]

export default class CalendarView extends React.Component {
constructor(props) {
super(props);
this.state = {
selectDays: []
};
this.onDayPress = this.onDayPress.bind(this);
}
render() {

  return(

    <Calendar
    style = {styles}
    theme = {theme}
    onDayPress={this.onDayPress}
    monthFormat={'MMM yyyy'}
    onMonthChange={(month) => {console.log('month changed', month)}}
    firstDay={1}
    markedDates={{
      [this.state.selectDays]: {selected: true}
    }}
    />
  );
}

onDayPress(day) {
  var found = this.getIndex(day.dateString, this.state.selectDays)
  if(found == -1) {
    this.setState({ selectDays: this.state.selectDays.concat([day.dateString]) })
  } else {
    this.removeItem(found)
  }
  console.log("day", this.state.selectDays)
}

getIndex(value, arr) {
for(var i = 0; i < arr.length; i++) {
    if(arr[i] === value) {
        return i;
    }
  }
  return -1;

}
removeItem(index) {
const data = this.state.selectDays;
this.setState({
selectDays: [...data.slice(0,index), ...data.slice(index+1)]
});
}
}`

sorry its not all styled right it seems to be acting weirdly
basically it should be holding an array for all the selected dates so they are set to true then selecting it again removes that date from the array.

[eddiegroves]

Multiple selected items are supported, here's an example solution based on my answer to #283, just uses selected instead of marked:

https://snack.expo.io/Bk0mHPE7z

[Sheryar-code]

Mulitple periods Calender.

npm install --save react-native-calendars

<Calendar
style={styles.calendar}
current={'2012-05-16'}
markingType={'multi-period'}
markedDates={{
'2012-05-10': {
periods: [
{ startingDay: true, endingDay: false, color: '#555' },

        ]
        },

        '2012-05-16': {
          periods:[
            { startingDay: false, endingDay: true, color: '#555' },
            { startingDay: true, endingDay: false, color: '#5f9ea0' },
            { startingDay: true, endingDay: false, color: '#5f9ea0' },
            { startingDay: true, endingDay: false, color: '#ffa500' },
            { startingDay: true, endingDay: false, color: '#000' },
          ]
        },
        '2012-05-17': {
          periods: [
            { startingDay: false, endingDay: true, color: '#5f9ea0' },
            { startingDay: false, endingDay: true, color: '#ffa500' },
            { startingDay: false, endingDay: true, color: '#000' },
            { startingDay: true, endingDay: false, color: '#f0e68c' },
          ]
        },

        
        '2012-05-18': {
          periods: [
            { startingDay: true, endingDay: true, color: '#ffa500' },
            { color: 'transparent' },
            { startingDay: false, endingDay: false, color: '#f0e68c' },
          ]
        },
      }}
      hideArrows={false}
    />

[achyuthjoism]

Mulitple periods Calender.

npm install --save react-native-calendars

<Calendar
style={styles.calendar}
current={'2012-05-16'}
markingType={'multi-period'}
markedDates={{
'2012-05-10': {
periods: [
{ startingDay: true, endingDay: false, color: '#555' },

        ]
        },

        '2012-05-16': {
          periods:[
            { startingDay: false, endingDay: true, color: '#555' },
            { startingDay: true, endingDay: false, color: '#5f9ea0' },
            { startingDay: true, endingDay: false, color: '#5f9ea0' },
            { startingDay: true, endingDay: false, color: '#ffa500' },
            { startingDay: true, endingDay: false, color: '#000' },
          ]
        },
        '2012-05-17': {
          periods: [
            { startingDay: false, endingDay: true, color: '#5f9ea0' },
            { startingDay: false, endingDay: true, color: '#ffa500' },
            { startingDay: false, endingDay: true, color: '#000' },
            { startingDay: true, endingDay: false, color: '#f0e68c' },
          ]
        },

        
        '2012-05-18': {
          periods: [
            { startingDay: true, endingDay: true, color: '#ffa500' },
            { color: 'transparent' },
            { startingDay: false, endingDay: false, color: '#f0e68c' },
          ]
        },
      }}
      hideArrows={false}
    />

Can you pls say how to mark dynamicly

[AftabUfaq]

here is the example with functional component

import React, { useState } from 'react'
import moment from 'moment' // 2.20.1
import { View,Text,ScrollView } from 'react-native' // 0.0.1
import { Calendar } from 'react-native-calendars'
const _format = 'YYYY-MM-DD'
const _today = moment().format(_format)
const _maxDate = moment().add(100, 'days').format(_format)

const WixCalendar = () => {
  const [_markedDates, setMarkedDates] = useState([_today])
  const [selectedDates, setSelectdates] = useState([])
  const onDaySelect = (day) => {
     let temp = [...selectedDates]
      const _selectedDay = moment(day.dateString).format(_format);
      
      let selected = true;
      if (_markedDates[_selectedDay]) {
        delete temp[_selectedDay]
        selected = !_markedDates[_selectedDay].selected;
      }else{
        temp.push(_selectedDay)
        setSelectdates(temp)
      }
      const updatedMarkedDates = {..._markedDates, ...{ [_selectedDay]: { selected} } }
      
 
      setMarkedDates(updatedMarkedDates);
  }
 
    return (
      <View style={{flex: 1, marginTop:100}}>
        <Calendar
        style={{width:"100%", height:250}}
            minDate={_today}
            maxDate={_maxDate}
            onDayPress={onDaySelect}
            markedDates={_markedDates}
        />
        <View style={{height:10}} />
        
      </View>
    );
}

export default WixCalendar

snack running example