react-native-booking-calendar/lib/module/BookingCalendar/components/Date.js

calendar component for booking app

import React, { useEffect, useState } from 'react';
import { Dimensions, StyleSheet, Text, View } from 'react-native';
import Time from './Time';
const {
  width: windowWidth
} = Dimensions.get('window');

const Date = ({
  defaultRow,
  startDate,
  startTime,
  endTime,
  intervalMinutes,
  dateTime,
  fontColor,
  borderColor
}) => {
  const [date, setDate] = useState([]);
  useEffect(() => {
    const arr = [];
    arr.push({
      date: startDate,
      day: startDate.toFormat('EEEE')
    });

    for (let i = 1; i < 7; i++) {
      const oneDayLater = {
        date: startDate.plus({
          day: i
        }),
        day: startDate.plus({
          day: i
        }).toFormat('EEEE')
      };
      arr.push(oneDayLater);
    }

    setDate(arr);
  }, [startDate]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
    style: DateStyles.dateWrapper
  }, /*#__PURE__*/React.createElement(View, {
    style: DateStyles.date
  }, /*#__PURE__*/React.createElement(View, {
    style: [DateStyles.border, {
      borderColor: borderColor
    }]
  }), date === null || date === void 0 ? void 0 : date.map(item => /*#__PURE__*/React.createElement(View, {
    key: item.day,
    style: [DateStyles.dateItem, {
      borderColor: borderColor
    }]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [DateStyles.text, {
      color: fontColor
    }, item.date.toFormat('E') === '6' && DateStyles.blueText, item.date.toFormat('E') === '7' && DateStyles.redText],
    adjustsFontSizeToFit: true
  }, item.date.toFormat('LL/d')), /*#__PURE__*/React.createElement(Text, {
    style: [DateStyles.text, {
      color: fontColor
    }, item.date.toFormat('E') === '6' && DateStyles.blueText, item.date.toFormat('E') === '7' && DateStyles.redText],
    adjustsFontSizeToFit: true
  }, item.day))))), /*#__PURE__*/React.createElement(Time, {
    defaultRow,
    startTime,
    endTime,
    intervalMinutes,
    dateTime,
    date,
    borderColor,
    fontColor
  }));
};

const DateStyles = StyleSheet.create({
  dateWrapper: {},
  border: {
    borderRightWidth: 1
  },
  date: {
    flexDirection: 'row',
    height: 60,
    justifyContent: 'flex-end'
  },
  dateItem: {
    width: windowWidth * 0.1272,
    justifyContent: 'center',
    alignItems: 'center',
    borderTopWidth: 1,
    borderRightWidth: 1
  },
  text: {
    fontSize: 12
  },
  redText: {
    color: 'red'
  },
  blueText: {
    color: 'blue'
  }
});
export default Date;
//# sourceMappingURL=Date.js.map