@drivy/cobalt/components/Calendar/CalendarView/CalendarViewMonth.js

Opinionated design system for Drivy's projects.

import { jsxs, jsx } from 'react/jsx-runtime';
import cx from 'classnames';
import { getDaysInMonth, differenceInCalendarWeeks, endOfMonth, getISODay, setDate, isPast, isToday, format } from 'date-fns';
import { useCallback, useMemo } from 'react';

const CalendarViewMonth = ({ monthName, monthStart, statusByDate = {}, isSundayFirstDayOfWeek = false, }) => {
    const getMonthByWeek = useCallback(() => {
        const daysInMonth = getDaysInMonth(monthStart);
        const weeksInMonth = differenceInCalendarWeeks(endOfMonth(monthStart), monthStart, {
            weekStartsOn: isSundayFirstDayOfWeek ? 0 : 1,
        }) + 1;
        const weekDay = isSundayFirstDayOfWeek
            ? (getISODay(monthStart) % 7) + 1
            : getISODay(monthStart);
        const month = [];
        let cursor = 0;
        let date = 0;
        for (let week = 0; week < weeksInMonth; week++) {
            month[week] = [];
            for (let day = 0; day < 7; day++) {
                month[week][day] = { date: null };
                if (cursor >= weekDay - 1 && date < daysInMonth) {
                    month[week][day].date = ++date;
                    const currentDate = setDate(monthStart, date);
                    month[week][day].status =
                        isPast(currentDate) && !isToday(currentDate)
                            ? "past"
                            : statusByDate[format(currentDate, "yyyy-MM-dd")];
                }
                cursor++;
            }
        }
        return month;
    }, [monthStart, isSundayFirstDayOfWeek, statusByDate]);
    const monthByWeek = useMemo(() => getMonthByWeek(), [getMonthByWeek]);
    return (jsxs("div", { className: "cobalt-CalendarView__month", children: [jsx("div", { className: "cobalt-CalendarView__monthName", children: monthName }), jsx("div", { className: "c-flex c-flex-col c-gap-2xs", children: monthByWeek.map((week, weekIndex) => (jsx("div", { className: "cobalt-CalendarView__week", children: week.map((day, dayIndex) => (jsx("div", { className: cx("cobalt-CalendarView__day", {
                            [`cobalt-CalendarView__day--${day.status}`]: day.status,
                        }), children: day.date }, `day-${weekIndex}-${dayIndex + 1}-${day.date}`))) }, `week-${weekIndex}-${week.map((day) => day.date).join("-")}`))) })] }));
};
CalendarViewMonth.displayName = "CalendarViewMonth";

export { CalendarViewMonth as default };
//# sourceMappingURL=CalendarViewMonth.js.map