react-weekly-planning 1.0.31 → 1.0.32

package/README.md

@@ -55,6 +55,39 @@ It is possible to use either Weekoffset or Date, or even both simultaneously.
   <Calendar date={currentDate} ... />
   ```
 
+#### `timeZone`
+
+- **Description**: This prop sets the timezone to be used by the calendar for all date and time calculations.
+- **Type**: `TimeZone` (e.g., `"America/New_York"`, `"Europe/Paris"`, etc.)
+- **Use Case**: Use this prop to align the calendar's display and event calculations to a specific global timezone instead of relying on the user's local browser timezone. This ensures consistency across different geographical locations.
+
+  **Example**:
+  ```jsx
+  <Calendar timeZone="Europe/Paris" ... />
+  ```
+
+#### `scope`
+
+- **Description**: This prop sets the view scope of the calendar.
+- **Type**: `"day" | "week"`
+- **Use Case**: Use this prop to define whether the calendar should display a full week or only a single day. If omitted, it defaults to a weekly view.
+
+  **Example**:
+  ```jsx
+  <Calendar scope="day" dayOffset={0} ... />
+  ```
+
+#### `dayOffset`
+
+- **Description**: This prop specifies which day of the week to display when the scope is set to "day".
+- **Type**: `0 | 1 | 2 | 3 | 4 | 5 | 6`
+- **Use Case**: If `scope="day"`, use this prop to target a specific day of the week (`0` being the first day of the week, up to `6`).
+
+  **Example**:
+  ```jsx
+  <Calendar scope="day" dayOffset={2} ... />
+  ```
+
 #### `tasks`
 
 - **Description**: This prop is an array of tasks to be displayed in the calendar.
@@ -94,7 +127,61 @@ It is possible to use either Weekoffset or Date, or even both simultaneously.
 
   <Calendar tasks={tasks} ... />
   ```
+
 ---
+
+## Full Example for Beginners
+
+Here is a complete, minimal example showing how to set up the `Calendar` with simple groups and tasks.
+
+```tsx
+import React, { useState } from "react";
+import Calendar from "react-pweekly-planning"; // Verify your exact import path based on package.json
+import "react-pweekly-planning/dist/style.css"; // Ensure CSS is imported depending on your setup
+
+const App = () => {
+  const [date] = useState(new Date());
+  
+  // Define groups (e.g., resources, team members, or projects)
+  const groups = [
+    { id: "1", label: "Developer A" },
+    { id: "2", label: "Developer B" }
+  ];
+
+  // Create start and end times in milliseconds
+  const todayAt10 = new Date().setHours(10, 0, 0, 0);
+  const todayAt12 = new Date().setHours(12, 0, 0, 0);
+
+  // Define your tasks
+  const tasks = [
+    { 
+      taskId: "t1", 
+      groupId: "1", // Belongs to "Developer A"
+      taskStart: todayAt10, 
+      taskEnd: todayAt12,   
+      taskDate: new Date(), 
+      dayIndex: new Date().getDay(), // Matches the task's day of week
+      taskSummary: "Code Review"
+    }
+  ];
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <h1>My Weekly Planner</h1>
+      <Calendar 
+        date={date}
+        weekOffset={0}
+        groups={groups}
+        tasks={tasks}
+        scope="week" // Change to "day" for daily view
+      />
+    </div>
+  );
+};
+
+export default App;
+```
+
 ---
 
 ## `CalendarPropsType`
@@ -105,10 +192,13 @@ Props for the Calendar component.
 | Prop Name                    | Type                                                                                  | Description                                                                                       |
 |------------------------------|---------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
 | `weekOffset`                 | number                                                                                | Offset for the week (e.g., -7 for last week, 0 for current week, 7 for next week).                |
+| `scope`                      | "day" \| "week"                                                                       | Sets the calendar view to either a full week or a single day.                                     |
+| `dayOffset`                  | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6                                                       | Offset index for the day column (0 = first day of week, …, 6 = last day) when scope is "day".     |
 | `groups`                     | GroupFeildsType[]                                                                     | Array of group data to be displayed in the calendar.                                              |
 | `className`                  | string                                                                                | Additional class names for the calendar component.                                                |
 | `style`                      | React.CSSProperties \| undefined                                                      | Additional styles for the calendar component.                                                     |
 | `date`                       | Date                                                                                  | The current date to display in the calendar.                                                      |
+| `timeZone`                   | TimeZone                                                                              | The timezone to use for displaying and manipulating the calendar dates.                           |
 | `groupRender`                | ({ currentGroup }: { currentGroup: GroupFeildsType }) => React.ReactNode              | Custom render function for a group.                                                               |
 | `dayRender`                  | ({ dayIndex, day, dayOfTheMonth, dayMonth, dayYear }: { dayIndex: number; day: string; dayOfTheMonth: number; dayMonth: string; dayYear: number; }) => React.ReactNode | Custom render function for a day.                                                                 |
 | `taskRender`                 | ({ currentTask, handleDragTask }: { currentTask: TaskFeildsType}) => React.ReactNode             | Custom render function for a task. |

package/__tests__/page.test.js

@@ -1,84 +1,84 @@
-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) => {
+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
@@ -93,14 +93,14 @@ export function convertTasksToIcsFormat(tasks) {
         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"));
-});
+    `;
+        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/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/CalendarForWeek.js

@@ -1,50 +1,49 @@
-"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);
+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, props.timeZone)) {
+                                                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, props.timeZone), 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/CalendarForWeek.tsx

@@ -1,4 +1,4 @@
-"use client";
+
 import {
   CalendarPropsType,
   CalendarTablePropsType,
@@ -27,6 +27,8 @@ import { memo, useEffect } from "react";
 import useCalendarDateState from "../hooks/useCalendarDateState";
 
 function CalendarForWeek(props: CalendarTablePropsType) {
+
+
   const { dailyHours, weekDays } = useCalendarDateState(
     props.date,
     props.weekOffset,
@@ -158,7 +160,8 @@ function CalendarForWeek(props: CalendarTablePropsType) {
                           compareWeekOffset(
                             props.date,
                             props.weekOffset || 0,
-                            task.taskDate
+                            task.taskDate,
+                            props.timeZone
                           )
                         ) {
                           return (
@@ -203,7 +206,8 @@ function CalendarForWeek(props: CalendarTablePropsType) {
                   group.id,
                   props.tasks,
                   props.weekOffset || 0,
-                  props.date
+                  props.date,
+                  props.timeZone
                 )}
                 className={props.sumHoursContainerClassName}
                 style={props.sumHoursContainerStyle}

package/components/CalendarForday.js

@@ -1,34 +1,33 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../style.css";
-import { memo, useEffect } from "react";
-import { compareWeekOffset, saveTasksToLocalStorage } from "../lib/utils";
-import useCalendarDateState from "../hooks/useCalendarDateState";
-import AddTask from "./AddTask";
-import TaskContainer from "./TaskContainer";
-import GroupContainer from "./GroupContainer";
-import DayContainer from "./DayContainer";
-function CalendarForDay(props) {
-    const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset, props.timeZone);
-    useEffect(() => {
-        saveTasksToLocalStorage(props.tasks);
-    }, [props.tasks]);
-    const currentDay = weekDays[props.dayOffset || 0];
-    const currentDailyHours = dailyHours[props.dayOffset || 0];
-    return (_jsxs("div", { className: ` CalendarTableForDay ${props.className}`, style: Object.assign({}, props.style), children: [currentDay && (_jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: props.dayOffset || 0, dayRender: props.dayRender, day: currentDay.day, dayOfTheMonth: currentDay.dayOfTheMonth, dayMonth: currentDay.dayMonth, dayYear: currentDay.dayYear })), _jsx("div", { className: `CalendarTableForDayTasksContainer`, children: currentDailyHours &&
-                    props.groups.map((group, i) => {
-                        return (_jsxs("div", { style: Object.assign({ width: "100%", height: "auto", background: "#f2f8f8", padding: "5px", borderBottom: "1.5px solid #0f52737e", borderRight: "0.74px solid rgba(198, 219, 225, 0.68)", borderLeft: "0.74px solid rgba(198, 219, 225, 0.68)" }, props.rowsStyle), className: `${props.rowsClassName}`, children: [_jsx("div", { style: Object.assign({ width: "auto", height: "auto" }, props.groupsColsStyle), className: props.groupsColsClassName, children: _jsx(GroupContainer, { style: props.groupContainerStyle, className: props.groupContainerClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }), props.tasks.map((task, taskKey) => {
-                                    if (task.dayIndex === (props.dayOffset || 0) &&
-                                        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: currentDailyHours, addTaskRender: props.addTaskRender, handleAddTask: props.handleAddTask })] }, i));
-                    }) })] }));
-}
-export default memo(CalendarForDay, (prevProps, nextProps) => prevProps.tasks === nextProps.tasks &&
-    prevProps.date === nextProps.date &&
-    prevProps.groups === nextProps.groups &&
-    prevProps.weekOffset === nextProps.weekOffset);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../style.css";
+import { memo, useEffect } from "react";
+import { compareWeekOffset, saveTasksToLocalStorage } from "../lib/utils";
+import useCalendarDateState from "../hooks/useCalendarDateState";
+import AddTask from "./AddTask";
+import TaskContainer from "./TaskContainer";
+import GroupContainer from "./GroupContainer";
+import DayContainer from "./DayContainer";
+function CalendarForDay(props) {
+    const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset, props.timeZone);
+    useEffect(() => {
+        saveTasksToLocalStorage(props.tasks);
+    }, [props.tasks]);
+    const currentDay = weekDays[props.dayOffset || 0];
+    const currentDailyHours = dailyHours[props.dayOffset || 0];
+    return (_jsxs("div", { className: ` CalendarTableForDay ${props.className}`, style: Object.assign({}, props.style), children: [currentDay && (_jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: props.dayOffset || 0, dayRender: props.dayRender, day: currentDay.day, dayOfTheMonth: currentDay.dayOfTheMonth, dayMonth: currentDay.dayMonth, dayYear: currentDay.dayYear })), _jsx("div", { className: `CalendarTableForDayTasksContainer`, children: currentDailyHours &&
+                    props.groups.map((group, i) => {
+                        return (_jsxs("div", { style: Object.assign({ width: "100%", height: "auto", background: "#f2f8f8", padding: "5px", borderBottom: "1.5px solid #0f52737e", borderRight: "0.74px solid rgba(198, 219, 225, 0.68)", borderLeft: "0.74px solid rgba(198, 219, 225, 0.68)" }, props.rowsStyle), className: `${props.rowsClassName}`, children: [_jsx("div", { style: Object.assign({ width: "auto", height: "auto" }, props.groupsColsStyle), className: props.groupsColsClassName, children: _jsx(GroupContainer, { style: props.groupContainerStyle, className: props.groupContainerClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }), props.tasks.map((task, taskKey) => {
+                                    if (task.dayIndex === (props.dayOffset || 0) &&
+                                        task.groupId === group.id &&
+                                        compareWeekOffset(props.date, props.weekOffset || 0, task.taskDate, props.timeZone)) {
+                                        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: currentDailyHours, addTaskRender: props.addTaskRender, handleAddTask: props.handleAddTask })] }, i));
+                    }) })] }));
+}
+export default memo(CalendarForDay, (prevProps, nextProps) => prevProps.tasks === nextProps.tasks &&
+    prevProps.date === nextProps.date &&
+    prevProps.groups === nextProps.groups &&
+    prevProps.weekOffset === nextProps.weekOffset);

package/components/CalendarForday.tsx

@@ -1,4 +1,4 @@
-"use client";
+
 import "../style.css";
 import { memo, useEffect } from "react";
 
@@ -84,7 +84,8 @@ function CalendarForDay(props: CalendarTablePropsType) {
                     compareWeekOffset(
                       props.date,
                       props.weekOffset || 0,
-                      task.taskDate
+                      task.taskDate,
+                      props.timeZone
                     )
                   ) {
                     return (

package/components/DayContainer/index.js

@@ -1,15 +1,15 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
-const DayContainer = ({ dayIndex, dayOfTheMonth, day, dayMonth, dayYear, dayRender, className, style, }) => {
-    if (dayRender) {
-        return (_jsx(_Fragment, { children: dayRender({
-                dayIndex,
-                day,
-                dayOfTheMonth,
-                dayMonth,
-                dayYear,
-            }) }));
-    }
-    return (_jsx("div", { className: `${className}`, style: style, children: `${day}. ${dayOfTheMonth}` }));
-};
-export default memo(DayContainer);
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const DayContainer = ({ dayIndex, dayOfTheMonth, day, dayMonth, dayYear, dayRender, className, style, }) => {
+    if (dayRender) {
+        return (_jsx(_Fragment, { children: dayRender({
+                dayIndex,
+                day,
+                dayOfTheMonth,
+                dayMonth,
+                dayYear,
+            }) }));
+    }
+    return (_jsx("div", { className: `${className}`, style: style, children: `${day}. ${dayOfTheMonth}` }));
+};
+export default memo(DayContainer);