react-weekly-planning 1.0.44 → 1.0.46

package/README.md

@@ -54,27 +54,7 @@ It is possible to use either Weekoffset or Date, or even both simultaneously.
   ```
 
 
-#### `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} ... />
-  ```
 
 
 ---
@@ -106,7 +86,6 @@ const App = () => {
           date={date}
           weekOffset={0}
           groups={groups}
-          scope="week"
         />
       </div>
     </CalendarTaskContextProvider>
@@ -126,8 +105,6 @@ 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.                                                     |
@@ -300,7 +277,7 @@ const App = () => (
 
 ### 2. Default Behavior of `<Calendar />`
 
-It's important to note that the main `<Calendar />` component uses the `"week"` hash scope by default. If you use the standard component, you are implicitly using this scope. Explicitly defining a `hashScope` on the `CalendarTaskContextProvider` is only necessary when you want to change how tasks are indexed or when building a fully custom UI as shown above.
+It's important to note that the main `<Calendar />` component uses the `"day"` hash scope by default. If you use the standard component, you are implicitly using this scope. Explicitly defining a `hashScope` on the `CalendarTaskContextProvider` is only necessary when you want to change how tasks are indexed or when building a fully custom UI as shown above.
 
 ### 3. Understanding Hashes and Scopes
 
@@ -392,6 +369,34 @@ to create an organization that truly reflects you.
   console.log(offset); // Logs the week offset for the given date
   ```
 
+### `updateOffsetWithDateCalendarForMonth`
+
+- **Description**: Calculates the month offset from a given calendar date.
+- **Parameters**: 
+  - `calendarDate` (Date): The date to compare.
+  - `timeZone` (string, optional): The timezone to use.
+- **Returns**: The calculated month offset.
+
+  **Example**:
+  ```javascript
+  import { updateOffsetWithDateCalendarForMonth } from "react-weekly-planning";
+  const offset = updateOffsetWithDateCalendarForMonth(new Date());
+  ```
+
+### `updateOffsetWithDateCalendarForDay`
+
+- **Description**: Calculates the day offset from a given calendar date.
+- **Parameters**: 
+  - `calendarDate` (Date): The date to compare.
+  - `timeZone` (string, optional): The timezone to use.
+- **Returns**: The calculated day offset.
+
+  **Example**:
+  ```javascript
+  import { updateOffsetWithDateCalendarForDay } from "react-weekly-planning";
+  const offset = updateOffsetWithDateCalendarForDay(new Date());
+  ```
+
 ### `millisecondsToHours`
 
 - **Description**: Converts milliseconds to a formatted hour string.
@@ -440,6 +445,66 @@ to create an organization that truly reflects you.
   console.log(diff); // Logs 0 if it's the current week
   ```
 
+### `calculateDayDifference`
+
+- **Description**: Calculates the absolute difference in days between a selected date and the current date (both normalized to midnight).
+- **Parameters**: 
+  - `dateSelectionnee` (Date): The date to compare.
+  - `timeZone` (string, optional): The timezone to use.
+- **Returns**: The difference in days.
+
+  **Example**:
+  ```javascript
+  import { calculateDayDifference } from "react-weekly-planning";
+  const diff = calculateDayDifference(new Date());
+  console.log(diff); // Logs the day difference
+  ```
+
+### `calculateMonthDifference`
+
+- **Description**: Calculates the difference in months between a selected date and the current date.
+- **Parameters**: 
+  - `dateSelectionnee` (Date): The date to compare.
+  - `timeZone` (string, optional): The timezone to use.
+- **Returns**: The difference in months (e.g., 0, 1, -1...).
+
+  **Example**:
+  ```javascript
+  import { calculateMonthDifference } from "react-weekly-planning";
+  const diff = calculateMonthDifference(new Date());
+  console.log(diff); // Logs the month difference
+  ```
+
+### `getMonthDay`
+
+- **Description**: Returns an array containing the metadata for all days in a specified month, based on a month offset from the current date.
+- **Parameters**: 
+  - `monthOffset` (number): The number of months to offset from the current month (e.g., 0 for current, 1 for next).
+  - `timeZone` (string, optional): The timezone to use.
+- **Returns**: An array of objects, where each object contains `day`, `dayMonth`, `dayYear`, and `dayOfTheMonth`.
+
+  **Example**:
+  ```javascript
+  import { getMonthDay } from "react-weekly-planning";
+  const days = getMonthDay(0); // Current month
+  console.log(days); // Logs all days of the current month
+  ```
+
+### `getDayHourlyForMonth`
+
+- **Description**: Returns an array of day objects (start and end timestamps) for every day in a specified month, based on a month offset.
+- **Parameters**: 
+  - `monthOffset` (number): The number of months to offset from the current month.
+  - `timeZone` (string, optional): The timezone to use.
+- **Returns**: An array of objects containing `positionDay`, `day`, `start`, and `end`.
+
+  **Example**:
+  ```javascript
+  import { getDayHourlyForMonth } from "react-weekly-planning";
+  const hours = getDayHourlyForMonth(0); // Current month
+  console.log(hours); 
+  ```
+
 ### `getUniqueId`
 
 - **Description**: Generates a unique identifier (UUID v4).
@@ -491,6 +556,8 @@ to create an organization that truly reflects you.
 ### `useIntersectionObserver`
 
 - **Description**: Utility hook designed to help virtualize scrolling components. It leverages the Intersection Observer API to detect when an element enters or leaves the viewport, allowing you to mount or unmount heavy DOM elements dynamically for better performance in long lists or large grids.
+  👉 **Watch the performance demo (rendering 7,000 tasks in a single week):**  
+  [![Performance Demo](https://img.youtube.com/vi/st4QmsaHoDM/0.jpg)](https://youtu.be/st4QmsaHoDM)
 - **Parameters**:
   - `ref` (React.RefObject): The ref assigned to the DOM element you want to observe.
   - `options` (IntersectionObserverInit, optional): Configuration object (e.g., `rootMargin`, `threshold`).
@@ -521,4 +588,32 @@ to create an organization that truly reflects you.
   };
   ```
 
+### `useCalendarDateState`
+
+- **Description**: A hook that calculates and manages the foundational date state for the calendar. It generates the necessary grid data (days of the week and hourly slots) based on a reference date and offset.
+- **Parameters**:
+  - `date` (Date): The reference date to center the calendar on.
+  - `weekOffset` (number, optional): The week offset (e.g., 0 for current week, 7 for next week).
+  - `timeZone` (string, optional): The timezone context.
+- **Returns**: An object containing:
+  - `weekDays`: An array of day metadata (day name, month, year, day of month).
+  - `dailyHours`: An array of hourly slot configurations for the grid.
+
+  **Example**:
+  ```tsx
+  import { useCalendarDateState } from "react-weekly-planning";
+
+  const MyComponent = ({ date, weekOffset }) => {
+    const { weekDays, dailyHours } = useCalendarDateState(date, weekOffset);
+    
+    return (
+      <div>
+        {weekDays.map(d => <span key={d.dayOfTheMonth}>{d.day}</span>)}
+      </div>
+    );
+  };
+  ```
+
+
+
 ---

package/dist/components/CalendarForWeek.js

@@ -13,12 +13,7 @@ const CalendarForWeek = (props) => {
     const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset, props.timeZone);
     const memoizedHeader = useMemo(() => (_jsx("div", { className: "planningCalendarHeader", children: _jsxs("div", { className: `planningCalendarRow ${props.rowsClassName}`, style: Object.assign(Object.assign({}, theadTrStyle), props.rowsStyle), children: [_jsx("div", { 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("div", { className: `dayCol ${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)))] }, "header") })), [weekDays, props.rowsClassName, props.rowsStyle, props.groupsColsClassName, props.groupsColsStyle, props.groupHeadContainerClassName, props.groupHeadContainerStyle, props.groupsHeadRender, props.daysColsClassName, props.daysColsStyle, props.dayStyle, props.dayClassName, props.dayRender]);
     const offset = useMemo(() => updateOffsetWithDateCalendar(props.date), [props.date]);
-    return (_jsx("div", { className: "calendarForWeek", style: { position: "relative" }, children: _jsxs("div", { className: `planningCalendar ${props.className}`, style: Object.assign({}, props.style), children: [memoizedHeader, _jsx("div", { className: "planningCalendarBody", style: {
-                    // position: "absolute",
-                    // width: "100%",
-                    // // top: `${36 + 5}px`,
-                    // top: `${36 + 5 + ((65 + 4) * Math.max(rowSliceIndexStart, 0))}px`,
-                    }, children: (_a = props.groups) === null || _a === void 0 ? void 0 : _a.map((group, i) => {
+    return (_jsx("div", { className: "calendarForWeek", style: { position: "relative" }, children: _jsxs("div", { className: `planningCalendar ${props.className}`, style: Object.assign({}, props.style), children: [memoizedHeader, _jsx("div", { className: "planningCalendarBody", style: {}, children: (_a = props.groups) === null || _a === void 0 ? void 0 : _a.map((group, i) => {
                         var _a;
                         const scope = hashScope || "week";
                         const groupHash = getHash(offset, group.id);

package/dist/components/CalendarForday.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./style.css";
 import { memo, useMemo } from "react";
-import useCalendarDateState from "../hooks/useCalendarDateState";
 import VirtualGroupRowDay from "./VirtualGroupRowDay";
 import DayContainer from "./DayContainer";
 import { useCalendarTaskContext } from "../contexts/CalendarTaskContext";
+import useCalendarDateStateForDay from "../hooks/useCalendarDateStateForDay";
 function CalendarForDay(props) {
-    const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset, props.timeZone);
+    const { dailyHours, weekDays, weekOffset: currentWeekOffset } = useCalendarDateStateForDay(props.date, props.weekOffset, props.timeZone, props.dayOffset);
     const { getTasks, isValidTask, addTask, deleteTask, updateTask, getTask, hashScope, tasks } = useCalendarTaskContext();
-    const currentDay = weekDays[props.dayOffset || 0];
-    const memoizedHeader = useMemo(() => (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 })) : null), [weekDays, props.rowsClassName, props.rowsStyle, props.groupsColsClassName, props.groupsColsStyle, props.groupHeadContainerClassName, props.groupHeadContainerStyle, props.groupsHeadRender, props.daysColsClassName, props.daysColsStyle, props.dayStyle, props.dayClassName, props.dayRender]);
-    return (_jsxs("div", { className: `CalendarTableForDay ${props.className}`, style: Object.assign({ position: "relative" }, props.style), children: [memoizedHeader, _jsx("div", { className: `CalendarTableForDayTasksContainer`, children: props.groups.map((group, i) => (_jsx(VirtualGroupRowDay, { group: group, i: i, props: props, getTasks: getTasks, isValidTask: isValidTask, addTask: addTask, deleteTask: deleteTask, updateTask: updateTask, getTask: getTask, dailyHours: dailyHours, dayOffset: props.dayOffset || 0, hashScope: hashScope || "day", tasks: tasks }, `${group.id}-${i}`))) })] }));
+    const dayIndex = props.dayOffset !== undefined ? props.dayOffset : props.date.getDay();
+    const currentDay = weekDays[dayIndex];
+    const memoizedHeader = useMemo(() => (currentDay ? (_jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: dayIndex, dayRender: props.dayRender, day: currentDay.day, dayOfTheMonth: currentDay.dayOfTheMonth, dayMonth: currentDay.dayMonth, dayYear: currentDay.dayYear })) : null), [weekDays, dayIndex, props.dayStyle, props.dayClassName, props.dayRender]);
+    return (_jsxs("div", { className: `CalendarTableForDay ${props.className}`, style: Object.assign({ position: "relative" }, props.style), children: [memoizedHeader, _jsx("div", { className: `CalendarTableForDayTasksContainer`, children: props.groups.map((group, i) => (_jsx(VirtualGroupRowDay, { group: group, i: i, props: props, getTasks: getTasks, isValidTask: isValidTask, addTask: addTask, deleteTask: deleteTask, updateTask: updateTask, getTask: getTask, dailyHours: dailyHours, dayOffset: dayIndex, weekOffset: currentWeekOffset, hashScope: hashScope || "day", tasks: tasks }, `${group.id}-${i}`))) })] }));
 }
 export default memo(CalendarForDay, (prevProps, nextProps) => {
     var _a, _b;

package/dist/components/VirtualGroupRow.js

@@ -7,7 +7,7 @@ import TaskVirtual from "./TaskContainer/TaskVirtual";
 import AddTask from "./AddTask";
 import { getHash, getNewTaskForDropOrPaste, getUniqueId, updateOffsetWithDateCalendar, } from "../lib/utils";
 import { groupTdStyle } from "../lib/slyles";
-const VirtualGroupRow = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, getTask, dailyHours, hashScope, tasks, sumHoursByGroupsCount, }) => {
+const VirtualGroupRow = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, getTask, dailyHours, hashScope, tasks, }) => {
     const ref = useRef(null);
     const { entry, height } = useIntersectionObserver(ref, {
         rootMargin: "600px",

package/dist/components/VirtualGroupRowDay.js

@@ -4,17 +4,16 @@ import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
 import GroupContainer from "./GroupContainer";
 import TaskVirtual from "./TaskContainer/TaskVirtual";
 import AddTask from "./AddTask";
-import { getHash, getNewTaskForDropOrPaste, getUniqueId, updateOffsetWithDateCalendar, } from "../lib/utils";
-const VirtualGroupRowDay = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, updateTask, getTask, dailyHours, dayOffset, hashScope, tasks, }) => {
+import { getHash, getNewTaskForDropOrPaste, getUniqueId, } from "../lib/utils";
+const VirtualGroupRowDay = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, updateTask, getTask, dailyHours, dayOffset, weekOffset, hashScope, tasks, }) => {
     const ref = useRef(null);
     const { entry, height } = useIntersectionObserver(ref, {
         rootMargin: "600px",
         threshold: 0,
     });
     const isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
-    const offset = useMemo(() => updateOffsetWithDateCalendar(props.date), [props.date]);
     const currentDailyHours = dailyHours[dayOffset];
-    const hash = useMemo(() => getHash(offset, group.id, dayOffset), [offset, group.id, dayOffset]);
+    const hash = useMemo(() => getHash(weekOffset, group.id, dayOffset), [weekOffset, group.id, dayOffset]);
     const cellTasks = useMemo(() => getTasks(hash[hashScope]), [getTasks, hash, hashScope, tasks]);
     const handleDragOver = (event) => {
         event.preventDefault();
@@ -45,5 +44,6 @@ export default memo(VirtualGroupRowDay, (prev, next) => {
         prev.i === next.i &&
         prev.tasks === next.tasks &&
         prev.props.date.getTime() === next.props.date.getTime() &&
-        prev.dayOffset === next.dayOffset);
+        prev.dayOffset === next.dayOffset &&
+        prev.weekOffset === next.weekOffset);
 });

package/dist/components/index.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "./style.css";
 import CalendarForWeek from "./CalendarForWeek";
-import CalendarForDay from "./CalendarForday";
 import CalendarTaskContextProvider from "../contexts/CalendarTaskContext";
 /**
  * Calendar component to display tasks and groups in a weekly view.
@@ -58,13 +57,12 @@ import CalendarTaskContextProvider from "../contexts/CalendarTaskContext";
  * @param {() => React.ReactNode} [props.sumHoursHeadRender] - Custom render function for the sum-of-hours header.
  * @param {(currentTask: TaskFeildsType) => void} [props.handleClickTask] - Handler function for clicking a task.
  * @param {(currentGroup: GroupFeildsType) => void} [props.handleClickGroup] - Handler function for clicking a group.
- * @param {0|1|2|3|4|5|6} [props.dayOffset] - Offset index for the day column (0 = first day of week, …, 6 = last day).
  * @param {React.CSSProperties} [props.dayColsStyle] - Additional styles for the day columns.
  * @param {string} [props.dayColsClassName] - Additional class names for the day columns.
  * @param {React.CSSProperties} [props.hoursColsStyle] - Additional styles for the hours columns.
  * @param {string} [props.hoursColsClassName] - Additional class names for the hours columns.
  */
 const Calendar = (props) => {
-    return (_jsx(CalendarTaskContextProvider, { hashScope: "day", children: props.scope === "day" ? _jsx(CalendarForDay, Object.assign({}, props)) : _jsx(CalendarForWeek, Object.assign({}, props)) }));
+    return (_jsx(CalendarTaskContextProvider, { hashScope: "day", children: _jsx(CalendarForWeek, Object.assign({}, props)) }));
 };
 export default Calendar;

package/dist/components/style.css

@@ -87,24 +87,66 @@
 .planningCalendar .dayTh,
 .planningCalendar .groupCol {
     flex: 0 0 150px;
+    min-width: 150px;
     color: #0f5173;
     padding-left: 5px;
     display: flex;
     align-items: center;
+    background-color: inherit;
 }
 
 .planningCalendar .dayCol {
     flex: 1;
+    min-width: 120px;
     border-left: 0.74px solid rgba(198, 219, 225, 0.68);
-    min-width: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
+@media (max-width: 768px) {
+
+    .planningCalendar .dayTh,
+    .planningCalendar .groupCol {
+        flex: 0 0 100px;
+        min-width: 100px;
+        font-size: 13px;
+        position: sticky;
+        left: 0;
+        z-index: 50;
+        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
+        background-color: #fff;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-left: 10px;
+    }
+
+    .planningCalendar .dayCol {
+        min-width: 120px;
+    }
+
+    .planningCalendarHeader {
+        z-index: 201;
+        /* Layer over the sticky row column */
+    }
+
+    /* Make sure the group container labels also truncate */
+    .groupCol label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+    }
+
+    .planningCalendar {
+        width: auto;
+    }
+}
+
 .planningCalendar .totalTh,
 .planningCalendar .totalCol {
     flex: 0 0 50px;
+    min-width: 50px;
     color: #0f5173;
     text-align: right;
     padding-right: 5px;
@@ -152,18 +194,15 @@
     min-height: 80px;
 }
 
-.calendarForWeek,
-.calendarForDay {
+.calendarForWeek {
     display: flex;
     width: 100%;
     flex: 1;
     overflow: auto;
     position: relative;
-
 }
 
-.calendarForWeek-container,
-.calendarForDay-container {
+.calendarForWeek-container {
     display: flex;
     flex-direction: column;
     width: 100%;

package/dist/hooks/useCalendarDateStateForDay.js

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { calculateWeekDifference, getDateObjectInTimeZone, getDayHourly, getWeekDays, } from "../lib/utils";
+function useCalendarDateStateForDay(date, weekOffset, timeZone, dayOffset) {
+    let calendarDateState = useMemo(() => {
+        const currentWeekOffset = (weekOffset !== undefined) ? weekOffset : (timeZone
+            ? calculateWeekDifference(getDateObjectInTimeZone(timeZone), timeZone)
+            : calculateWeekDifference(date, timeZone));
+        const weekDays = getWeekDays(currentWeekOffset, timeZone);
+        const dailyHours = getDayHourly(currentWeekOffset, timeZone);
+        const calData = {
+            dailyHours: dailyHours,
+            weekDays,
+            weekOffset: currentWeekOffset,
+        };
+        return calData;
+    }, [date, weekOffset, dayOffset, timeZone]);
+    return Object.assign({}, calendarDateState);
+}
+export default useCalendarDateStateForDay;

package/dist/index.js

@@ -15,6 +15,6 @@ export * from './components/GroupContainer';
 export * from './components/VirtualGroupRow';
 export * from './components/VirtualGroupRowDay';
 export * from './components/DayContainer';
-export * from './hooks/useCalendarDateState';
+export { default as useCalendarDateState } from './hooks/useCalendarDateState';
 export * from './contexts/CalendarTaskContext';
 export * from './hooks/useIntersectionObserver';

package/dist/lib/utils.js

@@ -52,6 +52,34 @@ export function getDayHourly(weekOffset, timeZone) {
     }
     return dailyHours;
 }
+/**
+ * Get daily hours for all days of a specific month.
+ * @param monthOffset - The number of months to offset from current month.
+ * @param timeZone - The optional timezone.
+ * @returns An array of day objects containing start and end timestamps.
+ */
+export function getDayHourlyForMonth(monthOffset, timeZone) {
+    const dailyHours = [];
+    const currentDate = getCalendarDate(timeZone);
+    const targetDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + monthOffset, 1);
+    const year = targetDate.getFullYear();
+    const month = targetDate.getMonth();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    for (let i = 1; i <= daysInMonth; i++) {
+        const dayDate = new Date(year, month, i);
+        const dayStart = new Date(dayDate);
+        dayStart.setHours(1, 0, 0, 0);
+        const dayEnd = new Date(dayDate);
+        dayEnd.setHours(23, 59, 59, 99); // Adjusted for consistency
+        dailyHours.push({
+            positionDay: i - 1,
+            day: dayDate,
+            start: dayStart.getTime(),
+            end: dayEnd.getTime(),
+        });
+    }
+    return dailyHours;
+}
 // Convert milliseconds to a readable date format
 export function millisecondsToDate(milliseconds) {
     const date = new Date(milliseconds);
@@ -133,6 +161,46 @@ export function getWeekDays(jump, timeZone) {
     }
     return weekDays;
 }
+/**
+ * Get days of a specific month with an offset.
+ * @param monthOffset - The number of months to offset from current month.
+ * @param timeZone - The optional timezone.
+ * @returns An array of day metadata for the target month.
+ */
+export function getMonthDay(monthOffset, timeZone) {
+    const days = ["Sun", "Mon", "Tues", "Wed", "Thur", "Frid", "Sat"];
+    const monthNames = [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sept",
+        "Oct",
+        "Nov",
+        "Dec",
+    ];
+    const currentDate = getCalendarDate(timeZone);
+    // Focus on the first of the month targetted by monthOffset
+    const targetDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + monthOffset, 1);
+    const year = targetDate.getFullYear();
+    const month = targetDate.getMonth();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    let monthDays = [];
+    for (let d = 1; d <= daysInMonth; d++) {
+        const dayDate = new Date(year, month, d);
+        monthDays.push({
+            day: days[dayDate.getDay()],
+            dayMonth: monthNames[dayDate.getMonth()],
+            dayYear: dayDate.getFullYear(),
+            dayOfTheMonth: dayDate.getDate(),
+        });
+    }
+    return monthDays;
+}
 // The remaining functions follow the same structure. Ensure all comments are in English and make the functions exportable as required.
 /**
  * Get the ISO week number for a given date.
@@ -180,6 +248,32 @@ export function calculateWeekDifference(dateSelectionnee, timeZone) {
     const ecartJours = Math.round((dimancheSelected - dimancheActuelle) / MS_PAR_JOUR);
     return ecartJours; // Retournera 0, 7, -7, 14, -14...
 }
+/**
+ * Calculate the day difference between the selected date and the current date.
+ * @param dateSelectionnee - The selected date.
+ * @param timeZone - The optional timezone.
+ * @returns The difference in days.
+ */
+export function calculateDayDifference(dateSelectionnee, timeZone) {
+    const dateActuelle = getCalendarDate(timeZone);
+    const utcSelected = Date.UTC(typeof dateSelectionnee === "string" ? new Date(dateSelectionnee).getFullYear() : dateSelectionnee.getFullYear(), typeof dateSelectionnee === "string" ? new Date(dateSelectionnee).getMonth() : dateSelectionnee.getMonth(), typeof dateSelectionnee === "string" ? new Date(dateSelectionnee).getDate() : dateSelectionnee.getDate());
+    const utcActuelle = Date.UTC(dateActuelle.getFullYear(), dateActuelle.getMonth(), dateActuelle.getDate());
+    const MS_PAR_JOUR = 86400000;
+    return Math.round((utcSelected - utcActuelle) / MS_PAR_JOUR);
+}
+/**
+ * Calculate the month difference between the selected date and the current date.
+ * @param dateSelectionnee - The selected date.
+ * @param timeZone - The optional timezone.
+ * @returns The difference in months.
+ */
+export function calculateMonthDifference(dateSelectionnee, timeZone) {
+    const dateActuelle = getCalendarDate(timeZone);
+    const selectedDate = typeof dateSelectionnee === "string" ? new Date(dateSelectionnee) : dateSelectionnee;
+    const yearDiff = selectedDate.getFullYear() - dateActuelle.getFullYear();
+    const monthDiff = selectedDate.getMonth() - dateActuelle.getMonth();
+    return yearDiff * 12 + monthDiff;
+}
 /**
  * Calculate the number of weeks since an arbitrary origin date (January 1, 2022).
  * @param annee - The year.
@@ -228,6 +322,14 @@ export function compareWeekOffset(calendarDate, weekOffset, taskDate, timeZone)
     const ecartTask = calculateWeekDifference(taskDate, timeZone);
     return weekOffset === ecartTask;
 }
+export function compareMonthOffset(monthOffset, taskDate, timeZone) {
+    const ecartTask = calculateMonthDifference(taskDate, timeZone);
+    return monthOffset === ecartTask;
+}
+export function compareDayOffset(dayOffset, taskDate, timeZone) {
+    const ecartTask = calculateDayDifference(taskDate, timeZone);
+    return dayOffset === ecartTask;
+}
 export const sumHoursByGroups = (groupId, tasks, weekOffset, calendarDate, timeZone) => {
     let sum = 0;
     if (tasks)
@@ -239,6 +341,28 @@ export const sumHoursByGroups = (groupId, tasks, weekOffset, calendarDate, timeZ
         });
     return sum;
 };
+export const sumHoursByGroupsForMonth = (groupId, tasks, monthOffset, timeZone) => {
+    let sum = 0;
+    if (tasks)
+        tasks.forEach((task) => {
+            if (task.groupId === groupId &&
+                compareMonthOffset(monthOffset, task.taskDate, timeZone) === true) {
+                sum += task.taskEnd - task.taskStart;
+            }
+        });
+    return sum;
+};
+export const sumHoursByGroupsForDay = (groupId, tasks, dayOffset, timeZone) => {
+    let sum = 0;
+    if (tasks)
+        tasks.forEach((task) => {
+            if (task.groupId === groupId &&
+                compareDayOffset(dayOffset, task.taskDate, timeZone) === true) {
+                sum += task.taskEnd - task.taskStart;
+            }
+        });
+    return sum;
+};
 export function saveTasksToLocalStorage(tasks) {
     if (typeof window !== "undefined") {
         window.localStorage.setItem("Calendar", "je marche");
@@ -272,6 +396,18 @@ export const updateOffsetWithDateCalendar = (calendarDate, timeZone) => {
     }
     return calculateWeekDifference(calendarDate, timeZone);
 };
+export const updateOffsetWithDateCalendarForMonth = (calendarDate, timeZone) => {
+    if (typeof calendarDate === 'string') {
+        return calculateMonthDifference(new Date(calendarDate), timeZone);
+    }
+    return calculateMonthDifference(calendarDate, timeZone);
+};
+export const updateOffsetWithDateCalendarForDay = (calendarDate, timeZone) => {
+    if (typeof calendarDate === 'string') {
+        return calculateDayDifference(new Date(calendarDate), timeZone);
+    }
+    return calculateDayDifference(calendarDate, timeZone);
+};
 export const millisecondsToHours = (milliseconds) => {
     return millisecondsToDate(milliseconds).formattedDate;
 };

package/dist/types/components/VirtualGroupRowDay.d.ts

@@ -12,6 +12,7 @@ interface VirtualGroupRowDayProps {
     getTask: (hash: string, taskId: string) => TaskType | undefined;
     dailyHours: dayInfoType[];
     dayOffset: number;
+    weekOffset: number;
     hashScope: "week" | "group" | "day";
     tasks: TasksStore;
 }

package/dist/types/components/index.d.ts

@@ -55,7 +55,6 @@ import { CalendarPropsType } from "../definitions";
  * @param {() => React.ReactNode} [props.sumHoursHeadRender] - Custom render function for the sum-of-hours header.
  * @param {(currentTask: TaskFeildsType) => void} [props.handleClickTask] - Handler function for clicking a task.
  * @param {(currentGroup: GroupFeildsType) => void} [props.handleClickGroup] - Handler function for clicking a group.
- * @param {0|1|2|3|4|5|6} [props.dayOffset] - Offset index for the day column (0 = first day of week, …, 6 = last day).
  * @param {React.CSSProperties} [props.dayColsStyle] - Additional styles for the day columns.
  * @param {string} [props.dayColsClassName] - Additional class names for the day columns.
  * @param {React.CSSProperties} [props.hoursColsStyle] - Additional styles for the hours columns.

package/dist/types/definitions/index.d.ts

@@ -96,7 +96,6 @@ export type DayPropsType = {
  */
 export type CalendarPropsType = {
     drop?: "copy" | "move";
-    scope?: "day" | "week";
     /** Offset for the week (e.g., -7 for last week, 0 for current week, 7 for next week). */
     weekOffset?: number;
     /** Array of group data to be displayed in the calendar. */
@@ -194,8 +193,6 @@ export type CalendarPropsType = {
     handleClickGroup?: (currentGroup: GroupFeildsType) => void;
     /** your timezones */
     timeZone?: TimeZone;
-    /** day id */
-    dayOffset?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     /**day columns styles */
     dayColsStyle?: React.CSSProperties | undefined;
     /**day columns className*/

package/dist/types/hooks/useCalendarDateStateForDay.d.ts

@@ -0,0 +1,17 @@
+import { TimeZone } from "../definitions";
+declare function useCalendarDateStateForDay(date: Date, weekOffset: number | undefined, timeZone: TimeZone | undefined, dayOffset: number | undefined): {
+    dailyHours: {
+        positionDay: number;
+        day: Date;
+        start: number;
+        end: number;
+    }[];
+    weekDays: {
+        day: string;
+        dayMonth: string;
+        dayYear: number;
+        dayOfTheMonth: number;
+    }[];
+    weekOffset: number;
+};
+export default useCalendarDateStateForDay;

package/dist/types/index.d.ts

@@ -12,6 +12,6 @@ export * from './components/GroupContainer';
 export * from './components/VirtualGroupRow';
 export * from './components/VirtualGroupRowDay';
 export * from './components/DayContainer';
-export * from './hooks/useCalendarDateState';
+export { default as useCalendarDateState } from './hooks/useCalendarDateState';
 export * from './contexts/CalendarTaskContext';
 export * from './hooks/useIntersectionObserver';

package/dist/types/lib/utils.d.ts

@@ -9,6 +9,18 @@ export declare function getDayHourly(weekOffset: number, timeZone?: TimeZone): {
     start: number;
     end: number;
 }[];
+/**
+ * Get daily hours for all days of a specific month.
+ * @param monthOffset - The number of months to offset from current month.
+ * @param timeZone - The optional timezone.
+ * @returns An array of day objects containing start and end timestamps.
+ */
+export declare function getDayHourlyForMonth(monthOffset: number, timeZone?: TimeZone): {
+    positionDay: number;
+    day: Date;
+    start: number;
+    end: number;
+}[];
 export declare function millisecondsToDate(milliseconds: number): {
     formattedDate: string;
     dayOfWeek: string;
@@ -23,12 +35,38 @@ export declare function getWeekDays(jump: number, timeZone?: TimeZone): {
     dayYear: number;
     dayOfTheMonth: number;
 }[];
+/**
+ * Get days of a specific month with an offset.
+ * @param monthOffset - The number of months to offset from current month.
+ * @param timeZone - The optional timezone.
+ * @returns An array of day metadata for the target month.
+ */
+export declare function getMonthDay(monthOffset: number, timeZone?: TimeZone): {
+    day: string;
+    dayMonth: string;
+    dayYear: number;
+    dayOfTheMonth: number;
+}[];
 /**
  * Calculate the week difference between the selected date and the current date.
  * @param dateSelectionnee - The selected date.
  * @returns The week difference in days.
  */
 export declare function calculateWeekDifference(dateSelectionnee: Date, timeZone?: TimeZone): number;
+/**
+ * Calculate the day difference between the selected date and the current date.
+ * @param dateSelectionnee - The selected date.
+ * @param timeZone - The optional timezone.
+ * @returns The difference in days.
+ */
+export declare function calculateDayDifference(dateSelectionnee: Date, timeZone?: TimeZone): number;
+/**
+ * Calculate the month difference between the selected date and the current date.
+ * @param dateSelectionnee - The selected date.
+ * @param timeZone - The optional timezone.
+ * @returns The difference in months.
+ */
+export declare function calculateMonthDifference(dateSelectionnee: Date, timeZone?: TimeZone): number;
 /**
  * Calculate the number of weeks since an arbitrary origin date (January 1, 2022).
  * @param annee - The year.
@@ -42,10 +80,16 @@ export declare function getNewTaskForDropOrPaste(positionDay: number, dropGroupI
     newTask: any;
 } | undefined;
 export declare function compareWeekOffset(calendarDate: Date, weekOffset: number, taskDate: Date, timeZone?: TimeZone): boolean;
+export declare function compareMonthOffset(monthOffset: number, taskDate: Date, timeZone?: TimeZone): boolean;
+export declare function compareDayOffset(dayOffset: number, taskDate: Date, timeZone?: TimeZone): boolean;
 export declare const sumHoursByGroups: (groupId: string, tasks: TasksType | any, weekOffset: number, calendarDate: Date, timeZone?: TimeZone) => number;
+export declare const sumHoursByGroupsForMonth: (groupId: string, tasks: TasksType | any, monthOffset: number, timeZone?: TimeZone) => number;
+export declare const sumHoursByGroupsForDay: (groupId: string, tasks: TasksType | any, dayOffset: number, timeZone?: TimeZone) => number;
 export declare function saveTasksToLocalStorage(tasks: TasksType): void;
 export declare const updateCalendarDateWithOffset: (offset: number, timeZone?: TimeZone) => Date;
 export declare const updateOffsetWithDateCalendar: (calendarDate: Date, timeZone?: TimeZone) => number;
+export declare const updateOffsetWithDateCalendarForMonth: (calendarDate: Date, timeZone?: TimeZone) => number;
+export declare const updateOffsetWithDateCalendarForDay: (calendarDate: Date, timeZone?: TimeZone) => number;
 export declare const millisecondsToHours: (milliseconds: number) => string;
 export declare const checkDuplicates: (tasks: TasksType, taskStart: number, taskEnd: number, groupId: string) => boolean;
 export declare const getSavedTasks: () => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-weekly-planning",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {
@@ -67,6 +67,10 @@
     "./hooks/useIntersectionObserver": {
       "types": "./dist/types/hooks/useIntersectionObserver.d.ts",
       "default": "./dist/hooks/useIntersectionObserver.js"
+    },
+    "./hooks/useCalendarDateState": {
+      "types": "./dist/types/hooks/useCalendarDateState.d.ts",
+      "default": "./dist/hooks/useCalendarDatState.js"
     }
   },
   "files": [