feat: modal calendar in edit tasks

src/pages/profile_tasks.tsx

@@ -17,6 +17,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { Nullable } from "primereact/ts-helpers";
 import { ITask } from "./profile_tasks.dto";
 import classes from "./profile_tasks.module.scss";
 
@@ -64,14 +65,24 @@ const ProfileTasks: FunctionComponent = () => {
     localStorage.setItem("tasks", JSON.stringify(tasks));
   }, [tasks]);
   const [openModal, setIsOpen] = useState(false);
+  const [openModalCalendar, setOpenModalCalendar] = useState(false);
   const [isEdit, setIsEdit] = useState(false);
   const [isCreating, setIsCreating] = useState(false);
   const [editContent, setEditContent] = useState<ITask | null>(null);
   const taskNameRef = useRef<HTMLInputElement>(null);
   const taskDescriptionRef = useRef<HTMLTextAreaElement>(null);
+  const [calendarDate, setCalendarDate] = useState<Nullable<Date>>();
   return (
     <div class={classes.container}>
-      <ModalCalendar isOpen />
+      <ModalCalendar
+        isOpen={openModalCalendar}
+        setIsOpen={setOpenModalCalendar}
+        onClose={() => {
+          setCalendarDate(null);
+        }}
+        onChange={(e) => isCreating && setCalendarDate(e.value)}
+        value={calendarDate!}
+      />
       <ModalWindow
         isOpen={openModal}
         setIsOpen={setIsOpen}
@@ -94,7 +105,13 @@ const ProfileTasks: FunctionComponent = () => {
               </div>
             </div>
             <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
-              <div class="flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1">
+              <div
+                class="flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1"
+                onClick={() => {
+                  setOpenModalCalendar(true);
+                  setCalendarDate(editContent.date);
+                }}
+              >
                 <CalendarDaysIcon class="size-10" />
                 <p>
                   {Intl.DateTimeFormat("ru-RU", {