= (props) => {
+ const {
+ cells,
+ } = props;
+
+ const firstDate = cells[0];
+ const lastDate = cells[cells.length - 1];
+
+ if (!firstDate || !lastDate) {
+ return null;
+ }
+
+ const firstDataDate = getDataDateString(firstDate);
+ const lastDataDate = getDataDateString(lastDate);
+
+ return (
+
+ {cells.map((item) => (
+
+ ))}
+
+ );
+};
+
+export default DateRow;
diff --git a/src/widgets/CalendarWidget/ui/components/DateWrapper/index.ts b/src/widgets/CalendarWidget/ui/components/DateWrapper/index.ts
new file mode 100644
index 0000000..e38158d
--- /dev/null
+++ b/src/widgets/CalendarWidget/ui/components/DateWrapper/index.ts
@@ -0,0 +1 @@
+export { default as DateWrapper } from './ui/DateWrapper.ui';
diff --git a/src/widgets/CalendarWidget/ui/components/DateWrapper/ui/DateWrapper.spec.tsx b/src/widgets/CalendarWidget/ui/components/DateWrapper/ui/DateWrapper.spec.tsx
new file mode 100644
index 0000000..8dc3855
--- /dev/null
+++ b/src/widgets/CalendarWidget/ui/components/DateWrapper/ui/DateWrapper.spec.tsx
@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+
+import { CalendarWidgetProvider } from 'widgets/CalendarWidget/ui/CalendarWidgetContext';
+
+import { withProvider } from 'shared/hoc/withProvider';
+
+import DateWrapper from './DateWrapper.ui';
+
+describe('Base render DateWrapper', () => {
+ const setup = () => {
+ const DateWrapperWithProvider = withProvider(CalendarWidgetProvider)(DateWrapper);
+
+ render();
+ };
+
+ test('Base render', () => {
+ setup();
+
+ const dateWrapperElem = screen.getByTestId('date-wrapper');
+ expect(dateWrapperElem).toBeInTheDocument();
+
+ expect(dateWrapperElem).toHaveClass('dateWrapper');
+ });
+});
diff --git a/src/widgets/CalendarWidget/ui/components/DateWrapper/ui/DateWrapper.styles.module.css b/src/widgets/CalendarWidget/ui/components/DateWrapper/ui/DateWrapper.styles.module.css
new file mode 100644
index 0000000..a4b7e8f
--- /dev/null
+++ b/src/widgets/CalendarWidget/ui/components/DateWrapper/ui/DateWrapper.styles.module.css
@@ -0,0 +1,3 @@
+.dateWrapper {
+ border-top: 1px solid black;
+}
diff --git a/src/widgets/CalendarWidget/ui/components/DateWrapper/ui/DateWrapper.ui.tsx b/src/widgets/CalendarWidget/ui/components/DateWrapper/ui/DateWrapper.ui.tsx
new file mode 100644
index 0000000..fcdbff0
--- /dev/null
+++ b/src/widgets/CalendarWidget/ui/components/DateWrapper/ui/DateWrapper.ui.tsx
@@ -0,0 +1,61 @@
+import { useCallback, useContext } from 'react';
+
+import DateRow from 'widgets/CalendarWidget/ui/components/DateRow/ui/DateRow.ui';
+
+import { DAYS_IN_WEEK } from 'shared/constants';
+
+// todo fix eslint - no empty line
+import { CalendarWidgetContext } from '../../../CalendarWidgetContext';
+
+import classes from './DateWrapper.styles.module.css';
+
+const DateWrapper = () => {
+ const { targetYear, targetMonthIndex } = useContext(CalendarWidgetContext);
+
+ const renderDateWrapper = useCallback(() => {
+ const rowsCount = 6;
+ const days = [];
+
+ const lastDatePrevMonth = new Date(targetYear, targetMonthIndex, 0);
+ const startOffset = lastDatePrevMonth.getDay();
+ if (startOffset) {
+ for (let i = 0; i < startOffset; i++) {
+ const newDate = new Date(targetYear, targetMonthIndex, i - startOffset + 1);
+ days.push(newDate);
+ }
+ }
+
+ const daysPerMonth = new Date(targetYear, targetMonthIndex + 1, 0).getDate();
+ // eslint-disable-next-line @stylistic/padding-line-between-statements
+ for (let i = 1; i <= daysPerMonth; i++) {
+ const newDate = new Date(targetYear, targetMonthIndex, i);
+ days.push(newDate);
+ }
+
+ const endOffset = rowsCount * DAYS_IN_WEEK - days.length;
+ if (endOffset) {
+ for (let i = 1; i <= endOffset; i++) {
+ const newDate = new Date(targetYear, targetMonthIndex + 1, i);
+ days.push(newDate);
+ }
+ }
+
+ const rows = [];
+ // eslint-disable-next-line @stylistic/padding-line-between-statements
+ for (let i = 0; i < rowsCount; i++) {
+ rows.push(days.slice(i * 7, (i + 1) * 7));
+ }
+
+ return rows.map((item) => (
+
+ ));
+ }, [targetMonthIndex, targetYear]);
+
+ return (
+
+ {renderDateWrapper()}
+
+ );
+};
+
+export default DateWrapper;
diff --git a/src/widgets/CalendarWidget/ui/components/DayOfWeekCell/index.ts b/src/widgets/CalendarWidget/ui/components/DayOfWeekCell/index.ts
new file mode 100644
index 0000000..5476336
--- /dev/null
+++ b/src/widgets/CalendarWidget/ui/components/DayOfWeekCell/index.ts
@@ -0,0 +1 @@
+export { default as DayOfWeekCell } from './ui/DayOfWeekCell.ui';
diff --git a/src/widgets/CalendarWidget/ui/components/DayOfWeekCell/ui/DayOfWeekCell.spec.tsx b/src/widgets/CalendarWidget/ui/components/DayOfWeekCell/ui/DayOfWeekCell.spec.tsx
new file mode 100644
index 0000000..00cb8d8
--- /dev/null
+++ b/src/widgets/CalendarWidget/ui/components/DayOfWeekCell/ui/DayOfWeekCell.spec.tsx
@@ -0,0 +1,139 @@
+import { render, screen } from '@testing-library/react';
+
+import { WEEK_DAYS } from 'shared/constants';
+import { withProvider } from 'shared/hoc/withProvider';
+
+import { CalendarWidgetProvider } from '../../../CalendarWidgetContext';
+
+import DayOfWeekCell from './DayOfWeekCell.ui';
+
+import type { DayOfWeekCellProps } from './DayOfWeekCell.ui';
+import type { CalendarWidgetProviderProps } from '../../../CalendarWidgetContext';
+
+describe('Test DayOfWeekCell', () => {
+ const setup = (day: DayOfWeekCellProps['day'], locale: CalendarWidgetProviderProps['locale']) => {
+ const DayOfWeekCellComponent = () => (
+
+ );
+
+ const Provider = (props: CalendarWidgetProviderProps) => (
+
+ );
+
+ const DayOfWeekCellWithProvider = withProvider(Provider)(DayOfWeekCellComponent);
+
+ render();
+ };
+
+ describe('Basic render sunday', () => {
+ test('en locale', () => {
+ setup(WEEK_DAYS.SUNDAY, 'en');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Sun.');
+ });
+
+ test('ru locale', () => {
+ setup(WEEK_DAYS.SUNDAY, 'ru');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Вс.');
+ });
+ });
+
+ describe('Basic render monday', () => {
+ test('en locale', () => {
+ setup(WEEK_DAYS.MONDAY, 'en');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Mon.');
+ });
+
+ test('ru locale', () => {
+ setup(WEEK_DAYS.MONDAY, 'ru');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Пн.');
+ });
+ });
+
+ describe('Basic render tuesday', () => {
+ test('en locale', () => {
+ setup(WEEK_DAYS.TUESDAY, 'en');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Tue.');
+ });
+
+ test('ru locale', () => {
+ setup(WEEK_DAYS.TUESDAY, 'ru');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Вт.');
+ });
+ });
+
+ describe('Basic render wednesday', () => {
+ test('en locale', () => {
+ setup(WEEK_DAYS.WEDNESDAY, 'en');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Wed.');
+ });
+
+ test('ru locale', () => {
+ setup(WEEK_DAYS.WEDNESDAY, 'ru');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Ср.');
+ });
+ });
+
+ describe('Basic render thursday', () => {
+ test('en locale', () => {
+ setup(WEEK_DAYS.THURSDAY, 'en');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Thu.');
+ });
+
+ test('ru locale', () => {
+ setup(WEEK_DAYS.THURSDAY, 'ru');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Чт.');
+ });
+ });
+
+ describe('Basic render friday', () => {
+ test('en locale', () => {
+ setup(WEEK_DAYS.FRIDAY, 'en');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Fri.');
+ });
+
+ test('ru locale', () => {
+ setup(WEEK_DAYS.FRIDAY, 'ru');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Пт.');
+ });
+ });
+
+ describe('Basic render saturday', () => {
+ test('en locale', () => {
+ setup(WEEK_DAYS.SATURDAY, 'en');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Sat.');
+ });
+
+ test('ru locale', () => {
+ setup(WEEK_DAYS.SATURDAY, 'ru');
+
+ const dayOfWeekCellElem = screen.getByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElem).toHaveTextContent('Сб.');
+ });
+ });
+});
diff --git a/src/widgets/CalendarWidget/ui/components/DayOfWeekCell/ui/DayOfWeekCell.style.module.css b/src/widgets/CalendarWidget/ui/components/DayOfWeekCell/ui/DayOfWeekCell.style.module.css
new file mode 100644
index 0000000..c10bbc9
--- /dev/null
+++ b/src/widgets/CalendarWidget/ui/components/DayOfWeekCell/ui/DayOfWeekCell.style.module.css
@@ -0,0 +1,4 @@
+.content {
+ max-width: 100%;
+ font-weight: 600;
+}
diff --git a/src/widgets/CalendarWidget/ui/components/DayOfWeekCell/ui/DayOfWeekCell.ui.tsx b/src/widgets/CalendarWidget/ui/components/DayOfWeekCell/ui/DayOfWeekCell.ui.tsx
new file mode 100644
index 0000000..220c38b
--- /dev/null
+++ b/src/widgets/CalendarWidget/ui/components/DayOfWeekCell/ui/DayOfWeekCell.ui.tsx
@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+
+import type { WeekDaysValues } from 'shared/constants';
+import { WEEK_DAYS_LABEL } from 'shared/constants';
+
+import { CalendarWidgetContext } from '../../../CalendarWidgetContext';
+
+import classes from './DayOfWeekCell.style.module.css';
+
+import type { FC } from 'react';
+
+export type DayOfWeekCellProps = {
+ day: WeekDaysValues;
+};
+const DayOfWeekCell: FC = (props) => {
+ const { day } = props;
+ const { locale } = useContext(CalendarWidgetContext);
+ const content = WEEK_DAYS_LABEL[day]?.[locale].short;
+
+ return (
+
+ {content}
+ .
+
+ );
+};
+
+export default DayOfWeekCell;
diff --git a/src/widgets/CalendarWidget/ui/components/DayOfWeekRow/index.ts b/src/widgets/CalendarWidget/ui/components/DayOfWeekRow/index.ts
new file mode 100644
index 0000000..238cd25
--- /dev/null
+++ b/src/widgets/CalendarWidget/ui/components/DayOfWeekRow/index.ts
@@ -0,0 +1 @@
+export { default as DayOfWeekRow } from './ui/DayOfWeekRow.ui';
diff --git a/src/widgets/CalendarWidget/ui/components/DayOfWeekRow/ui/DayOfWeekRow.spec.jsx b/src/widgets/CalendarWidget/ui/components/DayOfWeekRow/ui/DayOfWeekRow.spec.jsx
new file mode 100644
index 0000000..7fd1783
--- /dev/null
+++ b/src/widgets/CalendarWidget/ui/components/DayOfWeekRow/ui/DayOfWeekRow.spec.jsx
@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+
+import { withProvider } from 'shared/hoc/withProvider';
+
+import { CalendarWidgetProvider } from '../../../CalendarWidgetContext';
+
+import DayOfWeekRow from './DayOfWeekRow.ui';
+
+describe('Test DayOfWeekRow', () => {
+ const setup = () => {
+ const DayOfWeekRowWithProvider = withProvider(CalendarWidgetProvider)(DayOfWeekRow);
+
+ render();
+ };
+
+ test('Basic render row', () => {
+ setup();
+
+ const dayOfWeekRowElem = screen.getByTestId('day-of-week-row');
+ expect(dayOfWeekRowElem).toBeInTheDocument();
+ });
+
+ test('Basic render cells', () => {
+ setup();
+
+ const dayOfWeekCellElems = screen.getAllByTestId('day-of-week-cell');
+ expect(dayOfWeekCellElems).toHaveLength(7);
+ });
+});
diff --git a/src/widgets/CalendarWidget/ui/components/DayOfWeekRow/ui/DayOfWeekRow.style.module.css b/src/widgets/CalendarWidget/ui/components/DayOfWeekRow/ui/DayOfWeekRow.style.module.css
new file mode 100644
index 0000000..20062f0
--- /dev/null
+++ b/src/widgets/CalendarWidget/ui/components/DayOfWeekRow/ui/DayOfWeekRow.style.module.css
@@ -0,0 +1,24 @@
+.dayOfWeekRow {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-top: 1px solid black;
+
+ >div {
+ width: calc(100% / 7 - 1px);
+ max-width: calc(100% / 7 - 1px);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+
+ &:last-child {
+ width: calc(100% / 7);
+ max-width: calc(100% / 7);
+ }
+
+ &:not(:last-child) {
+ border-right: 1px solid black;
+ }
+ }
+}
diff --git a/src/widgets/CalendarWidget/ui/components/DayOfWeekRow/ui/DayOfWeekRow.ui.jsx b/src/widgets/CalendarWidget/ui/components/DayOfWeekRow/ui/DayOfWeekRow.ui.jsx
new file mode 100644
index 0000000..c2110d1
--- /dev/null
+++ b/src/widgets/CalendarWidget/ui/components/DayOfWeekRow/ui/DayOfWeekRow.ui.jsx
@@ -0,0 +1,39 @@
+import { WEEK_DAYS } from 'shared/constants';
+
+import { DayOfWeekCell } from '../../DayOfWeekCell';
+
+import classes from './DayOfWeekRow.style.module.css';
+
+const DayOfWeekRow = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+
+ Сегодня
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+ {date.getDate()}
+
+
+