react-weekly-planning 1.0.45 → 1.0.46

package/README.md

@@ -369,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.
@@ -417,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).
@@ -500,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/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/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/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.45",
+  "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": [