aldabil21 · vespasianvs · Feb 21, 2025 · Feb 21, 2025 · Feb 21, 2025 · Feb 21, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,23 @@
 # React Scheduler Component
 
-[![npm package](https://img.shields.io/npm/v/@aldabil/react-scheduler/latest.svg)](https://www.npmjs.com/package/@aldabil/react-scheduler)
-[![Twitter URL](https://img.shields.io/twitter/url?label=%40aldabil&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ffollow%3Fscreen_name%3Daldabil21)](https://twitter.com/intent/follow?screen_name=aldabil21)
+[![npm package](https://img.shields.io/npm/v/@wearemothership/react-scheduler/latest.svg)](https://www.npmjs.com/package/@wearemothership/react-scheduler)
+
+Based on the fantastic work of [@aldabil/react-scheduler](https://github.com/aldabil21/react-scheduler)
 
 > :warning: **Notice**: This component uses `mui`/`emotion`/`date-fns`. if your project is not already using these libs, this component may not be suitable.
 
 ## Installation
 
 ```jsx
-npm i @aldabil/react-scheduler
+npm i @wearemothership/react-scheduler
 ```
 
 If you plan to use `recurring` events in your scheduler, install `rrule` [package](https://www.npmjs.com/package/rrule)
 
 ## Usage
 
 ```jsx
-import { Scheduler } from "@aldabil/react-scheduler";
+import { Scheduler } from "@wearemothership/react-scheduler";
 ```
 
 ## Example

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@aldabil/react-scheduler",
-  "version": "3.0.5",
+  "name": "@wearemothership/react-scheduler",
+  "version": "3.1.0",
   "description": "React scheduler component based on Material-UI & date-fns",
   "files": [
     "*"
@@ -40,7 +40,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/aldabil21/react-scheduler.git"
+    "url": "https://github.com/wearemothership/react-scheduler.git"
   },
   "keywords": [
     "react",
@@ -51,7 +51,7 @@
   "author": "Aldabil",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/aldabil21/react-scheduler/issues"
+    "url": "https://github.com/wearemothership/react-scheduler/issues"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
@@ -89,7 +89,7 @@
     "prettier": "^3.5.1",
     "react": ">=19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.3.0",
+    "react-router": "^7.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rrule": "^2.8.1",
     "ts-jest": "^29.2.5",

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,7 @@ import { Scheduler } from "./lib";
 import { EVENTS } from "./events";
 import { useRef } from "react";
 import { SchedulerRef } from "./lib/types";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 function App() {
   const calendarRef = useRef<SchedulerRef>(null);

diff --git a/src/Page1.tsx b/src/Page1.tsx
@@ -2,7 +2,7 @@ import { Scheduler } from "./lib";
 import { EVENTS } from "./events";
 import { useRef } from "react";
 import { SchedulerRef } from "./lib/types";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 const events = EVENTS.slice(3, 6);
 

diff --git a/src/events.tsx b/src/events.tsx
@@ -1,22 +1,37 @@
 import { datetime, RRule } from "rrule";
 import { ProcessedEvent } from "./lib/types";
 
+const createDate = (
+  startHour: number,
+  startMinutes: number = 0,
+  days: number = 0,
+  months: number = 0
+) => {
+  const date = new Date();
+  date.setHours(startHour);
+  date.setMinutes(startMinutes);
+  date.setDate(date.getDate() + days);
+  date.setMonth(date.getMonth() + months);
+
+  return date;
+};
+
 export const EVENTS: ProcessedEvent[] = [
   {
     event_id: 1,
     title: "Event 1 (Disabled)",
     subtitle: "This event is disabled",
-    start: new Date(new Date(new Date().setHours(9)).setMinutes(0)),
-    end: new Date(new Date(new Date().setHours(10)).setMinutes(0)),
+    start: createDate(9),
+    end: createDate(10),
     disabled: true,
     admin_id: [1, 2, 3, 4],
   },
   {
     event_id: 2,
     title: "Event 2",
     subtitle: "This event is draggable",
-    start: new Date(new Date(new Date().setHours(10)).setMinutes(0)),
-    end: new Date(new Date(new Date().setHours(12)).setMinutes(0)),
+    start: createDate(10),
+    end: createDate(12),
     admin_id: 2,
     color: "#50b500",
     agendaAvatar: "E",
@@ -25,21 +40,17 @@ export const EVENTS: ProcessedEvent[] = [
     event_id: 3,
     title: "Event 3",
     subtitle: "This event is not editable",
-    start: new Date(new Date(new Date().setHours(11)).setMinutes(0)),
-    end: new Date(new Date(new Date().setHours(12)).setMinutes(0)),
+    start: createDate(11),
+    end: createDate(12),
     admin_id: 1,
     editable: false,
     deletable: false,
   },
   {
     event_id: 4,
     title: "Event 4",
-    start: new Date(
-      new Date(new Date(new Date().setHours(9)).setMinutes(30)).setDate(new Date().getDate() - 2)
-    ),
-    end: new Date(
-      new Date(new Date(new Date().setHours(11)).setMinutes(0)).setDate(new Date().getDate() - 2)
-    ),
+    start: createDate(9, 30, -2),
+    end: createDate(11, 0, -2),
     admin_id: [2, 3],
     color: "#900000",
     allDay: true,
@@ -48,23 +59,17 @@ export const EVENTS: ProcessedEvent[] = [
     event_id: 5,
     title: "Event 5",
     subtitle: "This event is editable",
-    start: new Date(
-      new Date(new Date(new Date().setHours(10)).setMinutes(30)).setDate(new Date().getDate() - 2)
-    ),
-    end: new Date(
-      new Date(new Date(new Date().setHours(14)).setMinutes(0)).setDate(new Date().getDate() - 2)
-    ),
+    start: createDate(10, 30, -2),
+    end: createDate(14, 0, -2),
     admin_id: 2,
     editable: true,
   },
   {
     event_id: 6,
     title: "Event 6",
     subtitle: "This event is all day",
-    start: new Date(
-      new Date(new Date(new Date().setHours(20)).setMinutes(30)).setDate(new Date().getDate() - 3)
-    ),
-    end: new Date(new Date(new Date().setHours(23)).setMinutes(0)),
+    start: createDate(20, 30, -3),
+    end: createDate(23),
     admin_id: 2,
     allDay: true,
     sx: { color: "purple" },
@@ -73,12 +78,8 @@ export const EVENTS: ProcessedEvent[] = [
     event_id: 7,
     title: "Event 7 (Not draggable)",
     subtitle: "This event is not draggable",
-    start: new Date(
-      new Date(new Date(new Date().setHours(10)).setMinutes(30)).setDate(new Date().getDate() - 3)
-    ),
-    end: new Date(
-      new Date(new Date(new Date().setHours(14)).setMinutes(30)).setDate(new Date().getDate() - 3)
-    ),
+    start: createDate(10, 30, -3),
+    end: createDate(14, 30, -3),
     admin_id: 1,
     draggable: false,
     color: "#8000cc",
@@ -87,66 +88,45 @@ export const EVENTS: ProcessedEvent[] = [
     event_id: 8,
     title: "Event 8",
     subtitle: "This event has a custom color",
-    start: new Date(
-      new Date(new Date(new Date().setHours(10)).setMinutes(30)).setDate(new Date().getDate() + 30)
-    ),
-    end: new Date(
-      new Date(new Date(new Date().setHours(14)).setMinutes(30)).setDate(new Date().getDate() + 30)
-    ),
+    start: createDate(10, 30, 30),
+    end: createDate(14, 30, 30),
     admin_id: 1,
     color: "#8000cc",
   },
   {
     event_id: 9,
     title: "Event 9",
-    subtitle: `This event is a recurring weekly until ${new Date(
-      new Date().setMonth(
-        new Date(
-          new Date(new Date(new Date().setHours(11)).setMinutes(0)).setDate(
-            new Date().getDate() + 1
-          )
-        ).getMonth() + 1
-      )
-    ).toDateString()}`,
-    start: new Date(
-      new Date(new Date(new Date().setHours(10)).setMinutes(0)).setDate(new Date().getDate() + 1)
-    ),
-    end: new Date(
-      new Date(new Date(new Date().setHours(11)).setMinutes(0)).setDate(new Date().getDate() + 1)
-    ),
+    subtitle: `This event is a recurring weekly until ${createDate(11, 0, 1, 1).toDateString()}`,
+    start: createDate(10, 0, 1),
+    end: createDate(11, 0, 1),
     recurring: new RRule({
       freq: RRule.WEEKLY,
-      dtstart: convertDateToRRuleDate(
-        new Date(
-          new Date(new Date(new Date().setHours(10)).setMinutes(0)).setDate(
-            new Date().getDate() - 20
-          )
-        )
-      ),
-      until: new Date(
        new Date().setMonth(
-          new Date(
-            new Date(new Date(new Date().setHours(11)).setMinutes(0)).setDate(
-              new Date().getDate() + 1
-            )
-          ).getMonth() + 1
-        )
-      ),
+      dtstart: convertDateToRRuleDate(createDate(11, 0, -20)),
+      until: createDate(11, 0, 1, 1),
     }),
   },
   {
     event_id: 10,
     title: "Event 10",
     subtitle: "This event is a recurring hourly 3 times",
-    start: new Date(new Date(new Date().setHours(14)).setMinutes(15)),
-    end: new Date(new Date(new Date().setHours(14)).setMinutes(45)),
+    start: createDate(14, 15),
+    end: createDate(14, 45),
     recurring: new RRule({
       freq: RRule.HOURLY,
       count: 3,
-      dtstart: convertDateToRRuleDate(new Date(new Date(new Date().setHours(14)).setMinutes(15))),
+      dtstart: convertDateToRRuleDate(createDate(14, 15)),
     }),
     color: "#dc4552",
   },
+  {
+    event_id: 11,
+    title: "Event 11",
+    subtitle: "This event is not resizable",
+    start: createDate(10, 30, -4),
+    end: createDate(12, 30, -4),
+    admin_id: 1,
+    resizable: false,
+  },
 ];
 
 export const RESOURCES = [

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
 import { createRoot } from "react-dom/client";
 import App from "./App";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router";
 import Page1 from "./Page1";
 
 const root = createRoot(document.getElementById("root") as HTMLElement);

diff --git a/src/lib/SchedulerComponent.tsx b/src/lib/SchedulerComponent.tsx
@@ -67,6 +67,7 @@ const SchedulerComponent = forwardRef<SchedulerRef, unknown>(function SchedulerC
           flexDirection: resourceViewMode === "vertical" ? "column" : undefined,
         }}
         data-testid="grid"
+        id="rs__grid"
       >
         <PositionProvider>{Views}</PositionProvider>
       </Table>