Merge pull request #428 from aldabil21/initial-values

Fix initial values from props

Author: aldabil21

package.json

@@ -89,6 +89,7 @@
     "prettier": "^3.5.1",
     "react": ">=19.0.0",
     "react-dom": "^19.0.0",
+    "react-router-dom": "^7.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rrule": "^2.8.1",
     "ts-jest": "^29.2.5",

src/App.tsx

@@ -2,16 +2,23 @@ import { Scheduler } from "./lib";
 import { EVENTS } from "./events";
 import { useRef } from "react";
 import { SchedulerRef } from "./lib/types";
+import { Link } from "react-router-dom";
 
 function App() {
   const calendarRef = useRef<SchedulerRef>(null);
 
   return (
-    <Scheduler
-      ref={calendarRef}
-      events={EVENTS}
-      // events={generateRandomEvents(200)}
-    />
+    <>
+      <div>
+        <Link to="/1">Go to page 1</Link>
+      </div>
+
+      <Scheduler
+        ref={calendarRef}
+        events={EVENTS}
+        // events={generateRandomEvents(200)}
+      />
+    </>
   );
 }
 

src/Page1.tsx

@@ -0,0 +1,27 @@
+import { Scheduler } from "./lib";
+import { EVENTS } from "./events";
+import { useRef } from "react";
+import { SchedulerRef } from "./lib/types";
+import { Link } from "react-router-dom";
+
+const events = EVENTS.slice(3, 6);
+
+function Page1() {
+  const calendarRef = useRef<SchedulerRef>(null);
+
+  return (
+    <>
+      <div>
+        <Link to="/">Go to home</Link>
+      </div>
+
+      <Scheduler
+        ref={calendarRef}
+        events={events}
+        // events={generateRandomEvents(200)}
+      />
+    </>
+  );
+}
+
+export default Page1;

src/index.tsx

@@ -2,13 +2,20 @@ 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 Page1 from "./Page1";
 
 const root = createRoot(document.getElementById("root") as HTMLElement);
 root.render(
   <React.StrictMode>
     <ThemeProvider theme={createTheme()}>
       <CssBaseline />
-      <App />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<App />} />
+          <Route path="/1" element={<Page1 />} />
+        </Routes>
+      </BrowserRouter>
     </ThemeProvider>
   </React.StrictMode>
 );

src/lib/store/default.ts

@@ -88,19 +88,19 @@ const defaultViews = (props: Partial<SchedulerProps>) => {
 export const defaultProps = (props: Partial<SchedulerProps>) => {
   // We're pulling values out of props that we don't want to
   // pass on, so there are 'unused' ones here.
-  /* eslint-disable @typescript-eslint/no-unused-vars */
   const {
-    month,
-    week,
-    day,
     translations,
     resourceFields,
     view,
     agenda,
     selectedDate,
+    resourceViewMode,
+    direction,
+    dialogMaxWidth,
+    hourFormat,
     ...otherProps
   } = props;
-  /* eslint-enable @typescript-eslint/no-unused-vars */
+
   const views = defaultViews(props);
   const defaultView = view || "week";
   const initialView = views[defaultView] ? defaultView : getOneView(views);
@@ -110,33 +110,29 @@ export const defaultProps = (props: Partial<SchedulerProps>) => {
     resourceFields: Object.assign(defaultResourceFields, resourceFields),
     view: initialView,
     selectedDate: getTimeZonedDate(selectedDate || new Date(), props.timeZone),
-    ...Object.assign(
-      {
-        height: 600,
-        navigation: true,
-        disableViewNavigator: false,
-        events: [],
-        fields: [],
-        loading: undefined,
-        customEditor: undefined,
-        onConfirm: undefined,
-        onDelete: undefined,
-        viewerExtraComponent: undefined,
-        resources: [],
-        resourceHeaderComponent: undefined,
-        resourceViewMode: "default",
-        direction: "ltr",
-        dialogMaxWidth: "md",
-        locale: enUS,
-        deletable: true,
-        editable: true,
-        hourFormat: "12",
-        draggable: true,
-        agenda,
-        enableAgenda: typeof agenda === "undefined" || agenda,
-      },
-      otherProps
-    ),
+    height: 600,
+    navigation: true,
+    disableViewNavigator: false,
+    events: [],
+    fields: [],
+    loading: undefined,
+    customEditor: undefined,
+    onConfirm: undefined,
+    onDelete: undefined,
+    viewerExtraComponent: undefined,
+    resources: [],
+    resourceHeaderComponent: undefined,
+    resourceViewMode: resourceViewMode || "default",
+    direction: direction || "ltr",
+    dialogMaxWidth: dialogMaxWidth || "md",
+    locale: enUS,
+    deletable: true,
+    editable: true,
+    hourFormat: hourFormat || "12",
+    draggable: true,
+    agenda,
+    enableAgenda: typeof agenda === "undefined" || agenda,
+    ...otherProps,
   };
 };