react-native-future-date-range-calendar/lib/calendar-renderer.js

React Native calendar to pick future date ranges only

import { Dimensions, TouchableOpacity, View } from "react-native";
import { styles } from "./calendar-styles";
import { colors, months, weekDays } from "./utils";
import CustomText from "./components/CustomText";
import { RightChevron } from "./icons/right-chevron";
import { CommonState } from "./context/common-provider";
import React from "react";
import { LeftChevron } from "./icons/left-chevron";
import { getSelectedDatesStyle, getSelectedDatesTextStyle, getStartEndDateBaseStyle } from "./calendar-helper";
export const CalendarRenderer = (props) => {
    const cardWidth = props?.width ?? Dimensions.get("screen").width;
    const { calendarType = 'type1', horizontal = true } = props;
    const monthsList = props?.months ? props?.months : months;
    const weekdays = props?.weekDays ? props?.weekDays : weekDays;
    const { startDate, endDate, setSelectedDate, setDaySelectedDate, dateSelected, setDateSelected } = CommonState();
    return (React.createElement(View, { style: { width: cardWidth, backgroundColor: colors.white } },
        React.createElement(View, { style: styles.calendarWrapper },
            React.createElement(View, { style: styles.currentMonthWrapper },
                React.createElement(View, { style: styles.currentMonthHeaderWrapper },
                    React.createElement(TouchableOpacity, { onPress: props?.handlePrev }, horizontal ?
                        props?.renderPreviousIcon ? props?.renderPreviousIcon : React.createElement(LeftChevron, null)
                        : null),
                    React.createElement(CustomText, { value: props?.disableHeaderYearAppearance ? `${monthsList[props?.month]}` : `${monthsList[props?.month]} ${props?.year}`, textStyle: [styles.currentMonthText, props?.monthTextCustomStyle], size: 22 }),
                    React.createElement(TouchableOpacity, { onPress: props?.handleNext }, horizontal ?
                        props?.renderNextIcon ? props?.renderNextIcon : React.createElement(RightChevron, null)
                        : null)),
                React.createElement(View, { style: [styles.weekdaysWrapper, props?.weekDaysCustomStyle] }, weekdays.map((v, i) => {
                    return (React.createElement(View, { key: i.toFixed(), style: [styles.weekdayWrapper, props?.weekDayCustomStyle] },
                        React.createElement(CustomText, { value: v, textStyle: styles.weekdayText, size: 18 })));
                })),
                React.createElement(View, { style: styles.daysWrapper },
                    props?.days.previousMonth.map((v, i) => {
                        return (React.createElement(View, { key: i, style: [styles.dayWrapperPrevious] }));
                    }),
                    props?.days.currentMonth.map((v, i) => {
                        let fd = v.firstDayOfTheMonth;
                        fd = Math.abs(fd - 7) - 1;
                        const runningDate = v.year +
                            '-' +
                            (v.month < 10 ? '0' + v.month : v.month) +
                            '-' +
                            (v.date < 10 ? '0' + v.date : v.date);
                        const rDate = new Date(runningDate);
                        const sDate = new Date(startDate);
                        const eDate = new Date(endDate);
                        return (React.createElement(View, { key: i, style: [styles.dayWrapper, props?.dayCustomStyle] },
                            React.createElement(React.Fragment, { key: i }, ((rDate >= sDate && rDate <= eDate) ||
                                runningDate === startDate) && (React.createElement(React.Fragment, null,
                                calendarType == "type1" && React.createElement(View, { style: getStartEndDateBaseStyle(runningDate, startDate, endDate, props?.rangeDaysBackgroundColor) }),
                                React.createElement(TouchableOpacity, { activeOpacity: 1, onPress: () => {
                                        setSelectedDate(v.completeDate);
                                        const selectedD = v.year +
                                            '-' +
                                            (v.month < 10 ? '0' + v.month : v.month) +
                                            '-' +
                                            (v.date < 10 ? '0' + v.date : v.date);
                                        setDaySelectedDate(selectedD);
                                        setDateSelected(!dateSelected);
                                    }, key: runningDate, style: getSelectedDatesStyle(runningDate, startDate, endDate, props?.calendarType, props?.startAndEndDateBackgroundColor, props?.rangeDaysBackgroundColor) },
                                    React.createElement(CustomText, { value: `${v.date}`, textStyle: getSelectedDatesTextStyle(runningDate, startDate, endDate, props?.startAndEndDateTextColor, props?.rangeDaysTextColor), size: 18 }))))),
                            v.type === 'disable' ? (React.createElement(View, { style: [styles.disableDayWrapper, props?.disabledDaysCustomStyle] },
                                React.createElement(CustomText, { value: `${v.date}`, textStyle: [styles.disableDayText, props?.disabledDaysCustomTextStyle], size: 18 }))) : (React.createElement(TouchableOpacity, { activeOpacity: props?.activeOpacity ?? 1, onPress: () => {
                                    setSelectedDate(v.completeDate);
                                    const selectedD = v.year +
                                        '-' +
                                        (v.month < 10 ? '0' + v.month : v.month) +
                                        '-' +
                                        (v.date < 10 ? '0' + v.date : v.date);
                                    setDaySelectedDate(selectedD);
                                }, style: [styles.dayNotSelectedWrapper, props?.nonRangeDaysCustomStyle] },
                                React.createElement(CustomText, { value: `${v.date}`, textStyle: [styles.dayText, props?.nonRangeDaysCustomTextStyle], size: 18 })))));
                    }))))));
};