react-weekly-planning 1.0.29 → 1.0.30

package/__tests__/page.test.js

@@ -1,46 +1,106 @@
-import moment from "moment";
-function getWeekNumber(date) {
-    date.setHours(0, 0, 0, 0);
-    date.setDate(date.getDate() + 4 - (date.getDay() || 7));
-    const yearStart = new Date(date.getFullYear(), 0, 1).getTime();
-    const weekNumber = Math.ceil(((date.getTime() - yearStart) / 86400000 + 1) / 7);
-    return weekNumber;
-}
-function calculerEcartSemaine(dateSelectionnee) {
-    // Récupérer la date actuelle
-    const dateActuelle = new Date();
-    // Extraire l'année et le numéro de la semaine de la date actuelle
-    const anneeActuelle = dateActuelle.getFullYear();
-    const numeroSemaineActuelle = getWeekNumber(dateActuelle);
-    // Extraire l'année et le numéro de la semaine de la date sélectionnée
-    const anneeSelectionnee = dateSelectionnee.getFullYear();
-    const numeroSemaineSelectionnee = getWeekNumber(dateSelectionnee);
-    // Calculer le nombre de semaines depuis une date d'origine arbitraire
-    // Calculer l'écart entre les semaines en utilisant la formule
-    const ecartSemaine = semainesDepuisOrigine(anneeSelectionnee, numeroSemaineSelectionnee) -
-        semainesDepuisOrigine(anneeActuelle, numeroSemaineActuelle);
-    return ecartSemaine * 7;
-}
-function semainesDepuisOrigine(annee, numeroSemaine) {
-    // Choisir le 1er janvier 2022 comme date d'origine
-    const dateOrigine = new Date(2022, 0, 1);
-    const anneeOrigine = dateOrigine.getFullYear();
-    const numeroSemaineOrigine = getWeekNumber(dateOrigine);
-    // Calculer le nombre total de semaines écoulées depuis la date d'origine
-    let nombreSemaines = 0;
-    for (let i = anneeOrigine; i < annee; i++) {
-        nombreSemaines += moment().year(i).weeksInYear();
-    }
-    nombreSemaines += numeroSemaine - numeroSemaineOrigine;
-    return nombreSemaines;
-}
-const makeCalcul = (date) => calculerEcartSemaine(date);
-describe("Ecartweek", () => {
-    test("current week to next week to be 7", () => {
-        const currentDay = Date.now();
-        const nextWeekDay = currentDay - 14 * 86400000;
-        // console.log(calculerEcartSemaine(new Date(nextWeekDay)));
-        const nextWeek = new Date(nextWeekDay);
-        expect(makeCalcul(nextWeek)).toBe(-14);
-    });
-});
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import "@testing-library/jest-dom";
+import ical from "ical";
+export function parseICSToTasks(icsData, group) {
+    var _a;
+    const events = ical.parseICS(icsData);
+    const tasks = [];
+    for (const key in events) {
+        const event = events[key];
+        if (event.type === "VEVENT") {
+            const taskStart = event.start
+                ? new Date(event.start).getTime()
+                : new Date().getTime();
+            const taskEnd = event.end
+                ? new Date(event.end).getTime()
+                : new Date().getTime();
+            const taskDate = event.start ? new Date(event.start) : new Date();
+            const taskSummary = event.summary || "";
+            const taskLocation = event.location || "";
+            const taskTimezone = "";
+            const taskCreatedAt = event.created
+                ? new Date(event.created)
+                : new Date();
+            const taskExpiryDate = ((_a = event.rrule) === null || _a === void 0 ? void 0 : _a.options.until)
+                ? new Date(event.rrule.options.until)
+                : new Date();
+            const task = {
+                taskStart,
+                taskEnd,
+                taskDate,
+                taskSummary,
+                taskLocation,
+                taskTimzone: taskTimezone,
+                groupId: group,
+                dayIndex: taskDate.getDay() || 0,
+                taskId: event.uid || "",
+                taskCreatedAt,
+                taskExpiryDate,
+            };
+            tasks.push(task);
+            if (!event.start)
+                return [];
+            // Gestion des occurrences récurrentes
+            if (event.rrule) {
+                const occurrences = event.rrule.between(event.start, taskExpiryDate || new Date());
+                occurrences.forEach((occurrence) => {
+                    tasks.push(Object.assign(Object.assign({}, task), { taskStart: occurrence.getTime(), taskEnd: occurrence.getTime() + (taskEnd - taskStart), taskDate: new Date(occurrence.getTime()), dayIndex: new Date(occurrence.getTime()).getDay() }));
+                });
+            }
+        }
+    }
+    return tasks;
+}
+import axios from "axios";
+// Get ICS text however you like, example below
+// Make sure you have the right CORS settings if needed
+const convert = (fileLocation) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const task = fileLocation.map((link) => __awaiter(void 0, void 0, void 0, function* () {
+            const icsRes = yield axios.get(link);
+            const icstext = yield icsRes.data;
+            const data = parseICSToTasks(icstext, "morel");
+            return data;
+        }));
+        console.log(task);
+        return "success";
+    }
+    catch (error) {
+        return "error";
+    }
+});
+export function convertTasksToIcsFormat(tasks) {
+    const ics = tasks.reduce((previousIcs, task) => {
+        previousIcs += `
+
+        BEGIN:VCALENDAR
+        VERSION:1.0
+        BEGIN:VEVENT
+        DTSTART:${task.taskStart}
+        DTEND:${task.taskEnd}
+        LOCATION:
+        DESCRIPTION:Purpose: Provide example of this file type Document file type: ICS Version: 1.0 Created by http://www.online-convert.com More example files: http://www.online-convert.com/file-type License: http://creativecommons.org/licenses Feel free to use & share the file according to the license above.
+        SUMMARY:ICS test file
+        PRIORITY:3
+        END:VEVENT
+        END:VCALENDAR
+
+    `;
+        return previousIcs;
+    }, "");
+    return ics;
+}
+test("the fetch fails with an error", () => {
+    return convert([
+        "https://firebasestorage.googleapis.com/v0/b/ashtonv2.appspot.com/o/example.ics?alt=media&token=679cab97-cde2-4074-b96f-b63c10f1b7e2",
+        "https://firebasestorage.googleapis.com/v0/b/ashtonv2.appspot.com/o/example.ics?alt=media&token=679cab97-cde2-4074-b96f-b63c10f1b7e2",
+    ]).catch((error) => expect(error).toMatch("error"));
+});

package/__tests__/page.test.tsx

@@ -1,57 +1,129 @@
-import moment from "moment";
-
-function getWeekNumber(date: Date) {
-  date.setHours(0, 0, 0, 0);
-  date.setDate(date.getDate() + 4 - (date.getDay() || 7));
-  const yearStart= new Date(date.getFullYear(), 0, 1).getTime();
-  const weekNumber = Math.ceil(((date.getTime() - yearStart) / 86400000 + 1) / 7);
-  return weekNumber;
-}
+import { render } from "@testing-library/react";
+import Calendar from "..";
+import "@testing-library/jest-dom";
+import { TaskFeildsType } from "../definitions";
+import { icsToJson } from "ics-to-json";
+
+import ical from "ical";
+
+export function parseICSToTasks(
+  icsData: string,
+  group: string
+): TaskFeildsType[] {
+  const events = ical.parseICS(icsData);
+  const tasks: TaskFeildsType[] = [];
+
+  for (const key in events) {
+    const event = events[key];
 
-function calculerEcartSemaine(dateSelectionnee: Date) {
-  // Récupérer la date actuelle
-  const dateActuelle = new Date();
+    if (event.type === "VEVENT") {
+      const taskStart = event.start
+        ? new Date(event.start).getTime()
+        : new Date().getTime();
+      const taskEnd = event.end
+        ? new Date(event.end).getTime()
+        : new Date().getTime();
+      const taskDate = event.start ? new Date(event.start) : new Date();
+      const taskSummary = event.summary || "";
+      const taskLocation = event.location || "";
+      const taskTimezone = "";
+      const taskCreatedAt = event.created
+        ? new Date(event.created)
+        : new Date();
+      const taskExpiryDate = event.rrule?.options.until
+        ? new Date(event.rrule.options.until)
+        : new Date();
 
-  // Extraire l'année et le numéro de la semaine de la date actuelle
-  const anneeActuelle = dateActuelle.getFullYear();
-  const numeroSemaineActuelle = getWeekNumber(dateActuelle);
+      const task: TaskFeildsType[][number] = {
+        taskStart,
+        taskEnd,
+        taskDate,
+        taskSummary,
+        taskLocation,
+        taskTimzone: taskTimezone,
+        groupId: group,
+        dayIndex: taskDate.getDay() || 0,
+        taskId: event.uid || "",
+        taskCreatedAt,
+        taskExpiryDate,
+      };
 
-  // Extraire l'année et le numéro de la semaine de la date sélectionnée
+      tasks.push(task);
 
-  const anneeSelectionnee = dateSelectionnee.getFullYear();
-  const numeroSemaineSelectionnee = getWeekNumber(dateSelectionnee);
+      if (!event.start) return [];
 
-  // Calculer le nombre de semaines depuis une date d'origine arbitraire
+      // Gestion des occurrences récurrentes
+      if (event.rrule) {
+        const occurrences = event.rrule.between(
+          event.start,
+          taskExpiryDate || new Date()
+        );
 
-  // Calculer l'écart entre les semaines en utilisant la formule
-  const ecartSemaine =
-    semainesDepuisOrigine(anneeSelectionnee, numeroSemaineSelectionnee) -
-    semainesDepuisOrigine(anneeActuelle, numeroSemaineActuelle);
+        occurrences.forEach((occurrence) => {
+          tasks.push({
+            ...task,
+            taskStart: occurrence.getTime(),
+            taskEnd: occurrence.getTime() + (taskEnd - taskStart),
+            taskDate: new Date(occurrence.getTime()),
+            dayIndex: new Date(occurrence.getTime()).getDay(),
+          });
+        });
+      }
+    }
+  }
 
-  return ecartSemaine * 7;
+  return tasks;
 }
-function semainesDepuisOrigine(annee: number, numeroSemaine: number) {
-  // Choisir le 1er janvier 2022 comme date d'origine
-  const dateOrigine = new Date(2022, 0, 1);
-  const anneeOrigine = dateOrigine.getFullYear();
-  const numeroSemaineOrigine = getWeekNumber(dateOrigine);
-
-  // Calculer le nombre total de semaines écoulées depuis la date d'origine
-  let nombreSemaines = 0;
-  for (let i = anneeOrigine; i < annee; i++) {
-    nombreSemaines += moment().year(i).weeksInYear();
+
+import axios from "axios";
+// Get ICS text however you like, example below
+// Make sure you have the right CORS settings if needed
+const convert = async (fileLocation: string[]) => {
+
+  try {
+    const task = fileLocation.map(async (link)  => {
+      const icsRes = await axios.get(link);
+      const icstext:string = await icsRes.data;
+      const data = parseICSToTasks(icstext, "morel");
+      return data;
+    });
+
+    console.log(task);
+    return "success";
+  } catch (error) {
+    return "error";
   }
-  nombreSemaines += numeroSemaine - numeroSemaineOrigine;
+};
 
-  return nombreSemaines;
+
+export function convertTasksToIcsFormat(tasks: TaskFeildsType[]) {
+  const ics = tasks.reduce((previousIcs: string, task: TaskFeildsType) => {
+    previousIcs += `
+
+        BEGIN:VCALENDAR
+        VERSION:1.0
+        BEGIN:VEVENT
+        DTSTART:${task.taskStart}
+        DTEND:${task.taskEnd}
+        LOCATION:
+        DESCRIPTION:Purpose: Provide example of this file type Document file type: ICS Version: 1.0 Created by http://www.online-convert.com More example files: http://www.online-convert.com/file-type License: http://creativecommons.org/licenses Feel free to use & share the file according to the license above.
+        SUMMARY:ICS test file
+        PRIORITY:3
+        END:VEVENT
+        END:VCALENDAR
+
+    `;
+
+    return previousIcs;
+  }, "");
+
+  return ics;
 }
-const makeCalcul=(date:Date)=>calculerEcartSemaine(date)
-describe("Ecartweek", () => {
-  test("current week to next week to be 7", () => {
-    const currentDay = Date.now();
-    const nextWeekDay = currentDay - 14 * 86400000;
-    // console.log(calculerEcartSemaine(new Date(nextWeekDay)));
-    const nextWeek = new Date(nextWeekDay);
-    expect(makeCalcul(nextWeek)).toBe(-14);
-  });
+
+
+test("the fetch fails with an error", () => {
+  return convert([
+    "https://firebasestorage.googleapis.com/v0/b/ashtonv2.appspot.com/o/example.ics?alt=media&token=679cab97-cde2-4074-b96f-b63c10f1b7e2",
+    "https://firebasestorage.googleapis.com/v0/b/ashtonv2.appspot.com/o/example.ics?alt=media&token=679cab97-cde2-4074-b96f-b63c10f1b7e2",
+  ]).catch((error) => expect(error).toMatch("error"));
 });

package/babel.config.js

@@ -0,0 +1 @@
+module.exports = {presets: ['@babel/preset-env']}

package/components/AddTask/index.js

@@ -1,17 +1,17 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
-const AddTask = ({ currentGroup, handleAddTask, addTaskRender, dayInfo, addTaskStyle, addTaskClassName, }) => {
-    if (addTaskRender) {
-        return (_jsx(_Fragment, { children: addTaskRender({
-                currentGroup,
-                dayInfo,
-            }) }));
-    }
-    const handleClick = () => {
-        if (!handleAddTask)
-            return;
-        handleAddTask(currentGroup, dayInfo);
-    };
-    return (_jsx("div", { onClick: handleClick, style: addTaskStyle, className: `addPlanStyle ${addTaskClassName}`, children: "+" }));
-};
-export default memo(AddTask);
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const AddTask = ({ currentGroup, handleAddTask, addTaskRender, dayInfo, addTaskStyle, addTaskClassName, }) => {
+    if (addTaskRender) {
+        return (_jsx(_Fragment, { children: addTaskRender({
+                currentGroup,
+                dayInfo,
+            }) }));
+    }
+    const handleClick = () => {
+        if (!handleAddTask)
+            return;
+        handleAddTask(currentGroup, dayInfo);
+    };
+    return (_jsx("div", { onClick: handleClick, style: addTaskStyle, className: `addPlanStyle ${addTaskClassName}`, children: "+" }));
+};
+export default memo(AddTask);

package/components/AddTask/index.tsx

@@ -2,12 +2,14 @@ import { memo } from "react";
 import { AddTaskPropsType } from "../../definitions";
 
 const AddTask = ({
+  
   currentGroup,
   handleAddTask,
   addTaskRender,
   dayInfo,
   addTaskStyle,
   addTaskClassName,
+
 }: AddTaskPropsType) => {
   if (addTaskRender) {
     return (
@@ -21,8 +23,10 @@ const AddTask = ({
   }
 
   const handleClick = () => {
+
     if (!handleAddTask) return;
     handleAddTask(currentGroup, dayInfo);
+
   };
 
   return (

package/components/CalendarForWeek.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import GroupContainer from "./GroupContainer";
+import GroupsHeadContainer from "./GroupsHeadContainer";
+import { groupTdStyle, theadTrStyle } from "../lib/slyles";
+import DayContainer from "./DayContainer";
+import SumHoursHead from "./SumHoursHead";
+import { compareWeekOffset, getSessionStorageRecordForDragAndDrop, saveTasksToLocalStorage, sumHoursByGroups, } from "../lib/utils";
+import TaskContainer from "./TaskContainer";
+import AddTask from "./AddTask";
+import SumHoursContainer from "./SumHoursContainer";
+import { memo, useEffect } from "react";
+import useCalendarDateState from "../hooks/useCalendarDateState";
+function CalendarForWeek(props) {
+    var _a;
+    const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset, props.timeZone);
+    const handleDragOver = (event) => {
+        event.preventDefault();
+    };
+    useEffect(() => {
+        saveTasksToLocalStorage(props.tasks);
+    }, [props.tasks]);
+    return (_jsxs("table", { className: `planningCalendar ${props.className}`, style: Object.assign({}, props.style), children: [_jsx("thead", { children: _jsxs("tr", { className: `${props.rowsClassName}`, style: Object.assign(Object.assign({}, theadTrStyle), props.rowsStyle), children: [_jsx("th", { className: `dayTh ${props.groupsColsClassName}`, style: Object.assign({}, props.groupsColsStyle), children: _jsx(GroupsHeadContainer, { className: `${props.groupHeadContainerClassName}`, style: props.groupHeadContainerStyle, groupsHeadRender: props.groupsHeadRender }) }), weekDays.map((day, i) => (_jsx("th", { className: `${props.daysColsClassName}`, style: Object.assign({}, props.daysColsStyle), children: _jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: i, dayRender: props.dayRender, day: day.day, dayOfTheMonth: day.dayOfTheMonth, dayMonth: day.dayMonth, dayYear: day.dayYear }) }, i))), _jsx("th", { className: `totalTh ${props.hoursColsClassName}`, style: props.hoursColsStyle, children: _jsx(SumHoursHead, { className: props.sumHoursHeadClassName, style: props.sumHoursHeadStyle, sumHoursHeadRender: props.sumHoursHeadRender }) })] }, "") }), _jsx("tbody", { children: (_a = props.groups) === null || _a === void 0 ? void 0 : _a.map((group, i) => (_jsxs("tr", { className: `${props.rowsClassName}`, style: Object.assign({}, props.rowsStyle), children: [_jsx("td", { className: `${props.groupsColsClassName}`, style: Object.assign(Object.assign({}, groupTdStyle), props.groupsColsStyle), children: _jsx(GroupContainer, { style: props.groupContainerStyle, className: props.groupContainerClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }, i), dailyHours.map((_, positionDay) => (_jsx("td", { onDragOver: handleDragOver, onDrop: (event) => {
+                                if (!props.handleDropTask || !props.tasks)
+                                    return;
+                                const dropInfo = getSessionStorageRecordForDragAndDrop(props.tasks, positionDay, group.id);
+                                if (!dropInfo)
+                                    return;
+                                props.handleDropTask(event, dropInfo.taskDropStart, dropInfo.taskDropEnd, dropInfo.taskDropDate, group.id, positionDay, dropInfo.newTask, dropInfo.newTasks);
+                            }, id: `td-${group.id}day-i`, className: props.dayColsClassName, style: props.dayColsStyle, children: _jsxs("div", { style: {
+                                    display: "flex",
+                                    width: "100%",
+                                    height: "100%",
+                                    flexDirection: "column",
+                                    padding: "5px",
+                                }, children: [_jsx(_Fragment, { children: props.tasks
+                                            .map((task, taskKey) => {
+                                            if (task.dayIndex === positionDay &&
+                                                task.groupId === group.id &&
+                                                compareWeekOffset(props.date, props.weekOffset || 0, task.taskDate)) {
+                                                return (_jsx(TaskContainer, { handleDragTask: props.handleDragTask, taskRender: props.taskRender, handleDragTaskEnd: props.handleDragTaskEnd, style: props.taskContainerStyle, className: `${props.taskContainerClassName}`, currentTask: task, handleClickTask: props.handleClickTask }, `${taskKey} task`));
+                                            }
+                                            else
+                                                return "";
+                                        }) }), _jsx(AddTask, { addTaskStyle: props.addTaskStyle, addTaskClassName: props.addTaskClassName, currentGroup: group, dayInfo: dailyHours[positionDay], addTaskRender: props.addTaskRender, handleAddTask: props.handleAddTask })] }, positionDay) }, `td-${group.id}day-i${positionDay}`))), _jsx("td", { style: props.hoursColsStyle, className: props.hoursColsClassName, children: _jsx(SumHoursContainer, { groupId: group.id, tasks: props.tasks, weekOffset: props.weekOffset || 0, calendarDate: props.date, sumHoursRender: props.sumHoursRender, sumHoursByGroups: sumHoursByGroups(group.id, props.tasks, props.weekOffset || 0, props.date), className: props.sumHoursContainerClassName, style: props.sumHoursContainerStyle }) }, `${i}sumHours`)] }, `${i} tr`))) })] }));
+}
+export default memo(CalendarForWeek, (prevProps, nextProps) => prevProps.tasks === nextProps.tasks &&
+    prevProps.date === nextProps.date &&
+    prevProps.groups === nextProps.groups &&
+    prevProps.weekOffset === nextProps.weekOffset);

package/components/{CalendarTable.tsx → CalendarForWeek.tsx}

@@ -1,6 +1,9 @@
-"use client"
-
-import { CalendarPropsType, CalendarTablePropsType } from "../definitions";
+"use client";
+import {
+  CalendarPropsType,
+  CalendarTablePropsType,
+  TaskFeildsType,
+} from "../definitions";
 import GroupContainer from "./GroupContainer";
 import GroupsHeadContainer from "./GroupsHeadContainer";
 
@@ -13,27 +16,26 @@ import {
   getSessionStorageRecordForDragAndDrop,
   saveTasksToLocalStorage,
   sumHoursByGroups,
+  updateOffsetWithDateCalendar,
 } from "../lib/utils";
 
 import TaskContainer from "./TaskContainer";
+
 import AddTask from "./AddTask";
 import SumHoursContainer from "./SumHoursContainer";
-import { memo, useCallback, useEffect } from "react";
+import { memo, useEffect } from "react";
 import useCalendarDateState from "../hooks/useCalendarDateState";
 
-function CalendarTable(props: CalendarTablePropsType) {
-
+function CalendarForWeek(props: CalendarTablePropsType) {
   const { dailyHours, weekDays } = useCalendarDateState(
     props.date,
-    props.weekOffset
+    props.weekOffset,
+    props.timeZone
   );
 
-  const handleDragOver = useCallback(
-    (event: React.DragEvent<HTMLTableDataCellElement>) => {
-      event.preventDefault();
-    },
-    []
-  );
+  const handleDragOver = (event: React.DragEvent<HTMLTableCellElement>) => {
+    event.preventDefault();
+  };
 
   useEffect(() => {
     saveTasksToLocalStorage(props.tasks);
@@ -50,7 +52,10 @@ function CalendarTable(props: CalendarTablePropsType) {
           style={{ ...theadTrStyle, ...props.rowsStyle }}
           key=""
         >
-          <th className="dayTh">
+          <th
+            className={`dayTh ${props.groupsColsClassName}`}
+            style={{ ...props.groupsColsStyle }}
+          >
             <GroupsHeadContainer
               className={`${props.groupHeadContainerClassName}`}
               style={props.groupHeadContainerStyle}
@@ -75,7 +80,10 @@ function CalendarTable(props: CalendarTablePropsType) {
               />
             </th>
           ))}
-          <th className="totalTh">
+          <th
+            className={`totalTh ${props.hoursColsClassName}`}
+            style={props.hoursColsStyle}
+          >
             <SumHoursHead
               className={props.sumHoursHeadClassName}
               style={props.sumHoursHeadStyle}
@@ -97,8 +105,8 @@ function CalendarTable(props: CalendarTablePropsType) {
               style={{ ...groupTdStyle, ...props.groupsColsStyle }}
             >
               <GroupContainer
-                style={props.groupStyle}
-                className={props.groupClassName}
+                style={props.groupContainerStyle}
+                className={props.groupContainerClassName}
                 groupRender={props.groupRender}
                 currentGroup={group}
                 handleClickGroup={props.handleClickGroup}
@@ -128,6 +136,8 @@ function CalendarTable(props: CalendarTablePropsType) {
                   );
                 }}
                 id={`td-${group.id}day-i`}
+                className={props.dayColsClassName}
+                style={props.dayColsStyle}
               >
                 <div
                   key={positionDay}
@@ -141,8 +151,8 @@ function CalendarTable(props: CalendarTablePropsType) {
                 >
                   <>
                     {props.tasks
-                      ?.filter(
-                        (task) =>
+                      .map((task, taskKey) => {
+                        if (
                           task.dayIndex === positionDay &&
                           task.groupId === group.id &&
                           compareWeekOffset(
@@ -150,21 +160,20 @@ function CalendarTable(props: CalendarTablePropsType) {
                             props.weekOffset || 0,
                             task.taskDate
                           )
-                      )
-                      .sort((a, b) => a.taskStart - b.taskStart)
-                      .map((task, taskKey) => {
-                        return (
-                          <TaskContainer
-                            key={`${taskKey} task`}
-                            handleDragTask={props.handleDragTask}
-                            taskRender={props.taskRender}
-                            handleDragTaskEnd={props.handleDragTaskEnd}
-                            style={props.taskContainerStyle}
-                            className={`${props.taskContainerClassName}`}
-                            currentTask={task}
-                            handleClickTask={props.handleClickTask}
-                          />
-                        );
+                        ) {
+                          return (
+                            <TaskContainer
+                              key={`${taskKey} task`}
+                              handleDragTask={props.handleDragTask}
+                              taskRender={props.taskRender}
+                              handleDragTaskEnd={props.handleDragTaskEnd}
+                              style={props.taskContainerStyle}
+                              className={`${props.taskContainerClassName}`}
+                              currentTask={task}
+                              handleClickTask={props.handleClickTask}
+                            />
+                          );
+                        } else return "";
                       })}
                   </>
 
@@ -179,7 +188,11 @@ function CalendarTable(props: CalendarTablePropsType) {
                 </div>
               </td>
             ))}
-            <td key={`${i}sumHours`}>
+            <td
+              key={`${i}sumHours`}
+              style={props.hoursColsStyle}
+              className={props.hoursColsClassName}
+            >
               <SumHoursContainer
                 groupId={group.id}
                 tasks={props.tasks}
@@ -204,16 +217,13 @@ function CalendarTable(props: CalendarTablePropsType) {
 }
 
 export default memo(
-
-  CalendarTable,
+  CalendarForWeek,
   (
     prevProps: Readonly<CalendarPropsType>,
     nextProps: Readonly<CalendarPropsType>
   ) =>
-
     prevProps.tasks === nextProps.tasks &&
     prevProps.date === nextProps.date &&
     prevProps.groups === nextProps.groups &&
     prevProps.weekOffset === nextProps.weekOffset
-
 );