Calendar component

ViewDetailsCalendar.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Calendar } from 'react-native-calendars';

import { calendarTheme } from '../../assets/styles/elements';
import { buildSelectedDays } from '../../utils/calendar';

const styles = {
  calendar: {
    marginLeft: 5,
    marginRight: 5,
  },
};

class ViewDetailsCalendar extends Component {
  render() {
    const { startingDay, endingDay } = this.props.bookingDates;
    
    return (
      <Calendar
        current={startingDay}
        hideExtraDays={true}
        theme={calendarTheme}
        markedDates={this.markedDates(startingDay, endingDay)}
        markingType={'period'}
        style={styles.calendar} 
      />
    );
  }
  
  markedDates(startingDay, endingDay) {
    const dayAttributes = {
      color: calendarTheme.selectedDayBackgroundColor,
      textColor: calendarTheme.selectedDayTextColor
    };

    return buildSelectedDays({ startingDay, endingDay, dayAttributes });
  }
}

ViewDetailsCalendar.propTypes = {
  bookingDates: PropTypes.shape({
    startingDay: PropTypes.string.isRequired,
    endingDay: PropTypes.string.isRequired,
  }).isRequired,
};

export default ViewDetailsCalendar;