feat: calendar markers on task count

src/pages/profile_calendar.tsx

@@ -1,26 +1,25 @@
-import { withTitle } from "@/constructors/Component";
-import { UrlsTitle } from "@/enums/urls";
-import { FunctionComponent } from "preact";
-import { useState, useEffect } from "preact/hooks";
-import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
-import { cn } from "@/utils/class-merge";
-import { ITask } from "./profile_tasks.dto";
-import Task from "@/components/task";
-import ModalWindow from "@/components/ui/Modal";
 import ModalCalendar from "@/components/ModalCalendar";
 import ModalTags, { ITags } from "@/components/ModalTags";
-import { useForm } from "react-hook-form";
+import Task from "@/components/task";
-import { ITaskForm } from "./profile_tasks.dto";
+import Dialog from "@/components/ui/Dialog";
-import { Nullable } from "primereact/ts-helpers";
+import ModalWindow from "@/components/ui/Modal";
+import { withTitle } from "@/constructors/Component";
+import { UrlsTitle } from "@/enums/urls";
+import { cn } from "@/utils/class-merge";
 import {
-  PencilIcon,
-  InboxArrowDownIcon,
-  CalendarDaysIcon,
   BookOpenIcon,
+  CalendarDaysIcon,
   DocumentDuplicateIcon,
+  InboxArrowDownIcon,
+  PencilIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-import Dialog from "@/components/ui/Dialog";
+import { FunctionComponent } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
+import { Nullable } from "primereact/ts-helpers";
+import { useForm } from "react-hook-form";
+import { ITask, ITaskForm } from "./profile_tasks.dto";
 
 const example_tags: { first: string[]; second: string[] } = {
   first: ["Программирование", "Информатика", "Физика", "Математика"],
@@ -61,7 +60,6 @@ const ProfileCalendar: FunctionComponent = () => {
   const [tags, setTags] = useState<ITags>({ first: "", second: "" });
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
-
   const {
     handleSubmit,
     register,
@@ -123,6 +121,15 @@ const ProfileCalendar: FunctionComponent = () => {
     setEditContent(newEditContent);
   }, [tags]);
 
+  const tasksCount = (date: CalendarDateTemplateEvent) => {
+    return tasks.filter((task) => {
+      const taskDate = task.date;
+      return (
+        taskDate.getDate() === date.day && taskDate.getMonth() === date.month && taskDate.getFullYear() === date.year
+      );
+    }).length;
+  };
+
   const hasTasksOnDate = (date: CalendarDateTemplateEvent) => {
     return tasks.some((task) => {
       const taskDate = task.date;
@@ -134,6 +141,7 @@ const ProfileCalendar: FunctionComponent = () => {
 
   const dateTemplate = (date: CalendarDateTemplateEvent) => {
     const isHighlighted = hasTasksOnDate(date);
+    const countT = tasksCount(date);
     const isSelected =
       currentDate &&
       currentDate.getDate() === date.day &&
@@ -143,7 +151,6 @@ const ProfileCalendar: FunctionComponent = () => {
       new Date().getDate() === date.day &&
       new Date().getMonth() === date.month &&
       new Date().getFullYear() === date.year;
-
     return (
       <div
         className={cn(
@@ -156,7 +163,14 @@ const ProfileCalendar: FunctionComponent = () => {
         )}
       >
         <span>{date.day}</span>
-        {isHighlighted && <span className="absolute top-2 right-2 h-2 w-2 rounded-full bg-pink-400" />}
+        {isHighlighted && (
+          <div class="absolute top-2 right-2 flex h-fit w-2 flex-col items-center gap-1 md:h-2 md:w-fit md:flex-row">
+            {Array.from({ length: countT > 3 ? 3 : countT }).map((_, i) => (
+              <span key={i} className="size-2 rounded-full bg-pink-400" />
+            ))}
+            {countT > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>}
+          </div>
+        )}
       </div>
     );
   };