react-native-plain-calendar/build/src/components/Cells/Cells.js

Calendar component for React-Native

import * as dateFns from 'date-fns';
import * as React from 'react';
import { useMemo } from 'react';
import { View } from 'react-native';
import { dateFormats } from '../../constants';
import { Cell } from './Cell';
import { s } from './styles';
export function Cells({ currentMonth, selectedDate, onDateClick, startSelectedDate, endSelectedDate, minDate, maxDate, disabledDates, weekStartsOn, cellsStyle, daysRowStyle, dayContainerStyle, DayComponent, dayPropsStyle, disabledDayPick, }) {
    const { monthStart, startDate, endDate } = useMemo(() => {
        const currentMonthStart = dateFns.startOfMonth(currentMonth);
        const currentMonthEnd = dateFns.endOfMonth(currentMonthStart);
        const currentMonthStartDate = dateFns.startOfWeek(currentMonthStart, {
            weekStartsOn,
        });
        const currentMonthEndDate = dateFns.startOfWeek(currentMonthEnd, {
            weekStartsOn,
        });
        return {
            monthStart: currentMonthStart,
            startDate: currentMonthStartDate,
            endDate: currentMonthEndDate,
        };
    }, [currentMonth, weekStartsOn]);
    const dateFormat = dateFormats.cellsFormat;
    const weeks = [];
    let days = [];
    let day = startDate;
    let key = day.toString();
    let formattedDate = '';
    // The loop "while" form array of the weeks of the month
    while (day <= endDate) {
        // The loop "for" form array of the days of the week
        for (let i = 0; i < 7; i += 1) {
            formattedDate = dateFns.format(day, dateFormat);
            const cloneDay = day;
            days.push(<Cell key={key} day={cloneDay} monthStart={monthStart} currentMonth={currentMonth} formattedDate={formattedDate} DayComponent={DayComponent} onDateClick={onDateClick} dayPropsStyle={dayPropsStyle} disabledDayPick={disabledDayPick} selectedDate={selectedDate} startSelectedDate={startSelectedDate} endSelectedDate={endSelectedDate} minDate={minDate} maxDate={maxDate} disabledDates={disabledDates} dayContainerStyle={dayContainerStyle}/>);
            day = dateFns.addDays(day, 1);
            key = dateFns.format(day, dateFormats.cellsFormatKey);
        }
        weeks.push(<View style={[s.week, daysRowStyle]} key={key}>
        {days}
      </View>);
        days = [];
    }
    return <View style={cellsStyle}>{weeks}</View>;
}