diff --git a/src/pages/calendar.tsx b/src/pages/calendar.tsx index 187d971..4277793 100644 --- a/src/pages/calendar.tsx +++ b/src/pages/calendar.tsx @@ -1,9 +1,28 @@ import { withTitle } from "@/constructors/Component"; import { UrlsTitle } from "@/enums/urls"; import { cn } from "@/utils/class-merge"; +import { BackwardIcon } from "@heroicons/react/24/solid"; import { FunctionComponent, h } from "preact"; import { useState } from "preact/hooks"; +interface BackButtonProps { + selectedDate: Date; + onClick: () => void; +} + +const BackButton: FunctionComponent = ({ selectedDate, onClick }: BackButtonProps) => { + const currentDate = new Date(); + + return currentDate.getMonth() !== selectedDate.getMonth() ? ( + + ) : null; +}; + type MarkedDateType = "event" | "holiday" | "important" | string; type MarkedDates = Record; @@ -44,7 +63,7 @@ const BigCalendar: FunctionComponent = ({ const getFirstDayOfMonth = (year: number, month: number): number => { const day = new Date(year, month, 1).getDay(); - return day === 0 ? 6 : day - 1; + return day === 0 ? 6 : day; }; const handlePrevMonth = (): void => { @@ -60,7 +79,7 @@ const BigCalendar: FunctionComponent = ({ setCurrentDate(new Date(date.getFullYear(), date.getMonth(), 1)); } setSelectedDate(date); - onDateSelect?.(date); + onDateSelect(date); }; const isDateMarked = (date: Date): MarkedDateType | undefined => { @@ -70,7 +89,7 @@ const BigCalendar: FunctionComponent = ({ const getLastDayOfMonth = (year: number, month: number): number => { const day = new Date(year, month + 1, 0).getDay(); - return day === 0 ? 6 : day - 1; + return day === 0 ? 6 : day; }; const renderDays = (): h.JSX.Element[] => { @@ -84,12 +103,11 @@ const BigCalendar: FunctionComponent = ({ const days: h.JSX.Element[] = []; // Дни предыдущего месяца - //TODO: work on click on 31 march const prevMonthDays = getDaysInMonth(year, month - 1); const daysFromPrevMonth = firstDayOfMonth === 0 ? 6 : firstDayOfMonth; for (let i = daysFromPrevMonth - 1; i >= 0; i--) { const day = prevMonthDays - i; - const date = new Date(year, month - 1, day + 1); + const date = new Date(year, month - 1, day); const dateStr = date.toISOString().split("T")[0]; const isSelected = selectedDate?.toISOString().split("T")[0] === dateStr; const markType = isDateMarked(date); @@ -122,7 +140,7 @@ const BigCalendar: FunctionComponent = ({ // Дни текущего месяца for (let day = 1; day <= daysInMonth; day++) { - const date = new Date(year, month, day + 1); + const date = new Date(year, month, day); const dateStr = date.toISOString().split("T")[0]; const isSelected = selectedDate?.toISOString().split("T")[0] === dateStr; const markType = isDateMarked(date); @@ -166,9 +184,9 @@ const BigCalendar: FunctionComponent = ({ } // Дни следующего месяца - const daysToAdd = 6 - (lastDayOfMonth === 6 ? 4 : lastDayOfMonth); + const daysToAdd = 6 - (lastDayOfMonth === 6 ? 3 : lastDayOfMonth); for (let day = 1; day <= daysToAdd; day++) { - const date = new Date(year, month + 1, day + 1); + const date = new Date(year, month + 1, day); const dateStr = date.toISOString().split("T")[0]; const isSelected = selectedDate?.toISOString().split("T")[0] === dateStr; const markType = isDateMarked(date); @@ -235,7 +253,6 @@ const BigCalendar: FunctionComponent = ({ -
{dayNames.map((day) => (
@@ -243,8 +260,8 @@ const BigCalendar: FunctionComponent = ({
))}
-
{renderDays()}
+ setCurrentDate(new Date())} /> ); };