fix(Calendar): should show days and weekdays in current lang and selected timezone (#149)

Author: ValeraS

src/components/CalendarView/CalendarView.tsx

@@ -156,7 +156,7 @@ interface WeekdaysProps {
     state: CalendarState | RangeCalendarState;
 }
 function Weekdays({state}: WeekdaysProps) {
-    const weekdays = getWeekDays();
+    const weekdays = getWeekDays(state);
 
     return (
         <div className={b('grid-row')} role="row">
@@ -182,7 +182,7 @@ interface CalendarGridProps {
 function CalendarGridCells({state}: CalendarGridProps) {
     const rowsInPeriod = state.mode === 'days' ? 6 : 4;
     const columnsInRow = state.mode === 'days' ? 7 : 3 + (state.mode === 'quarters' ? 1 : 0);
-    const days = getDaysInPeriod(state.startDate, state.endDate, state.mode);
+    const days = getDaysInPeriod(state);
     return (
         <div className={b('grid-rowgroup', {mode: state.mode})} role="rowgroup">
             {[...new Array(rowsInPeriod).keys()].map((rowIndex) => (

src/components/CalendarView/utils.ts

@@ -1,31 +1,32 @@
 import {dateTime} from '@gravity-ui/date-utils';
 import type {DateTime} from '@gravity-ui/date-utils';
 
-import type {CalendarLayout} from './hooks/types';
+import type {CalendarLayout, CalendarState, RangeCalendarState} from './hooks/types';
 
-export function getDaysInPeriod(startDate: DateTime, _endDate: DateTime, mode: CalendarLayout) {
+export function getDaysInPeriod(state: CalendarState | RangeCalendarState) {
     const days: DateTime[] = [];
 
-    if (mode === 'days') {
+    const startDate = dateTime({input: state.startDate, timeZone: state.timeZone});
+    if (state.mode === 'days') {
         const currentDate = startDate.startOf('week');
         for (let i = 0; i < 42; i++) {
             days.push(currentDate.add({days: i}));
         }
-    } else if (mode === 'quarters') {
+    } else if (state.mode === 'quarters') {
         for (let i = 0; i < 16; i++) {
             days.push(startDate.add(i, 'quarters'));
         }
     } else {
         for (let i = 0; i < 12; i++) {
-            days.push(startDate.add({[mode]: i}));
+            days.push(startDate.add({[state.mode]: i}));
         }
     }
     return days;
 }
 
-export function getWeekDays() {
+export function getWeekDays(state: CalendarState | RangeCalendarState) {
     const weekDays = [];
-    const weekStart = dateTime().startOf('week');
+    const weekStart = dateTime({timeZone: state.timeZone}).startOf('week');
     for (let i = 0; i < 7; i++) {
         const date = weekStart.add({days: i});
         weekDays.push(date);