Fix technical limits and bugs

client/src/components/DayPicker/Calendar.tsx

@@ -2,19 +2,22 @@ import React, { useState } from 'react';
 import { LeftArrow as SVGLeftArrow, RightArrow as SVGRightArrow } from 'components/Arrows';
 import { range } from 'utils/arrays.utils'
 import {
-  addDaysToDateString,
-  daysOfWeekAbbr,
-  getDateFromString,
- } from 'utils/dates.utils';
+    addDaysToDateString,
+    daysOfWeekAbbr,
+    getDateFromString,
+    getFullMonthName,
+    getNormalYearMonthDayFromDate,
+
+} from 'utils/dates.utils';
 import CalendarCell from './CalendarCell';
 
 export default function Calendar({firstVisibleDate}: {firstVisibleDate: string}) {
   const [page, setPage] = useState(0);
   const firstSelectedDate_dayOfWeek = getDateFromString(firstVisibleDate).getDay();
   const firstDateInGridForPage0 = addDaysToDateString(firstVisibleDate, -firstSelectedDate_dayOfWeek);
-  const firstDateInGrid = addDaysToDateString(firstDateInGridForPage0, 28 * page);
+  const firstDateInGrid = addDaysToDateString(firstDateInGridForPage0, 35 * page);
 
-  const monthCells = range(28).map((cellIdx) => (
+  const monthCells = range(35).map((cellIdx) => (
     <CalendarCell
       key={cellIdx}
       firstVisibleDate={firstVisibleDate}
@@ -38,17 +41,33 @@ export default function Calendar({firstVisibleDate}: {firstVisibleDate: string})
   );
 
   return (
-    <div style={{display: 'flex', flexFlow: 'row nowrap'}}>
-      {leftArrow}
-      <div className="daypicker-calendar">
-        <DayOfWeekRow />
-        {monthCells}
-      </div>
-      {rightArrow}
-    </div>
+      <>
+          <CalendarMonthTextCell date={firstDateInGrid}/>
+          <div style={{display: 'flex', flexFlow: 'row nowrap'}}>
+              {leftArrow}
+              <div className="daypicker-calendar">
+                  <DayOfWeekRow/>
+                  {monthCells}
+              </div>
+              {rightArrow}
+          </div>
+      </>
   );
 };
 
+const CalendarMonthTextCell = React.memo(function CalendarMonthTextCell(
+    {date}: { date: string }
+) {
+    const middleOfMonth = addDaysToDateString(date, 10);
+    const [tableYear, monthNum] = getNormalYearMonthDayFromDate(new Date(middleOfMonth));
+    const [currentYear] = getNormalYearMonthDayFromDate(new Date());
+    const monthName = `${getFullMonthName(monthNum, true)}`;
+    const dateText = tableYear === currentYear
+        ? monthName
+        : `${monthName} ${tableYear}`;
+    return <div className="weeklyview-grid__monthtext">{dateText}</div>;
+});
+
 const DayOfWeekRow = React.memo(function DayOfWeekRow() {
   return (
     <>

client/src/utils/dates.utils.ts

@@ -128,6 +128,11 @@ export function getLocalYearMonthDayFromDate(date: Date): [number, number, numbe
   return [date.getFullYear(), date.getMonth() + 1, date.getDate()];
 }
 
+export function getNormalYearMonthDayFromDate(date: Date): [number, number, number] {
+  return [date.getFullYear(), date.getMonth(), date.getDate()];
+}
+
+
 export function to12HourClock(n: number) {
   return (n === 0 || n === 12) ? 12 : (n % 12);
 }
@@ -277,15 +282,20 @@ export function getLongerMonthAbbr(monthIdx: number, uppercase: boolean = true):
   return uppercase ? abbr : abbr.toUpperCase();
 }
 
+export function getFullMonthName(monthIdx: number, uppercase: boolean = true) {
+  const abbr = months[monthIdx];
+  return uppercase ? abbr : abbr.toUpperCase();
+}
+
 /**
  * Returns the three-letter abbreviation of the month of the given date
  */
 export function getMonthAbbrFromDate(date: Date): string {
-  return getMonthAbbr(date.getMonth());
+  return getMonthAbbr(date.getUTCMonth());
 }
 
 export function getDayOfWeekAbbr(date: Date) {
-  return daysOfWeekAbbr[date.getDay()];
+  return daysOfWeekAbbr[date.getUTCDay()];
 }
 
 export const months = [

server/src/meetings/put-respondent.dto.ts

@@ -10,7 +10,7 @@ export default class PutRespondentDto {
       ' the format `YYYY-MM-DDTHH:mm:ssZ`.',
     example: ['2022-10-23T10:00:00Z', '2022-10-23T10:30:00Z'],
   })
-  @ArrayMaxSize(512)
+  @ArrayMaxSize(10000)
   @IsCustomISO8601String({ each: true })
   availabilities: string[];
 }