@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
45 lines (42 loc) • 2.31 kB
JavaScript
import React, { useMemo } from 'react';
import { getDaysInMonth, differenceInCalendarWeeks, endOfMonth, getISODay, setDate, isPast, isToday, format } from 'date-fns';
import cx from 'classnames';
const CalendarViewMonth = ({ monthName, monthStart, statusByDate = {}, isSundayFirstDayOfWeek = false, }) => {
const getMonthByWeek = () => {
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;
};
const monthByWeek = useMemo(() => getMonthByWeek(), []);
return (React.createElement("div", { className: "cobalt-CalendarView__month" },
React.createElement("div", { className: "cobalt-CalendarView__monthName" }, monthName),
React.createElement("div", { className: "c-flex c-flex-col c-gap-2xs" }, monthByWeek.map((week, weekIndex) => (React.createElement("div", { key: weekIndex, className: "cobalt-CalendarView__week" }, week.map((day, dayIndex) => (React.createElement("div", { key: weekIndex + 1 * dayIndex + 1, className: cx("cobalt-CalendarView__day", {
[`cobalt-CalendarView__day--${day.status}`]: day.status,
}) }, day.date)))))))));
};
CalendarViewMonth.displayName = "CalendarViewMonth";
export { CalendarViewMonth as default };
//# sourceMappingURL=CalendarViewMonth.js.map