Feature: calendar widget (#2077)

* Implemented calendar Signed-off-by: Denis Papec <denis.papec@gmail.com> * Added lidarr events to calendar Signed-off-by: Denis Papec <denis.papec@gmail.com> * Added radarr events to calendar Signed-off-by: Denis Papec <denis.papec@gmail.com> * Added readarr events to calendar Signed-off-by: Denis Papec <denis.papec@gmail.com> * Added sonarr events to calendar Signed-off-by: Denis Papec <denis.papec@gmail.com> * fix sonarr series title * integrations * fix bad setstate call * handle user sets includeSeries: false for sonarr * Translate radarr release strings * Support all widths * readarr get author * Finished first day in week config Signed-off-by: Denis Papec <denis.papec@gmail.com> --------- Signed-off-by: Denis Papec <denis.papec@gmail.com> Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
2026-01-10 02:12:09 +08:00 · 2023-09-28 19:23:44 +01:00
parent 855f12e4c1
commit 4cd4103edf
19 changed files with 439 additions and 3 deletions
--- a/src/widgets/calendar/component.jsx
+++ b/src/widgets/calendar/component.jsx
@@ -0,0 +1,47 @@
+import { useContext, useMemo } from "react";
+import dynamic from "next/dynamic";
+
+import { ShowDateContext } from "../../utils/contexts/calendar";
+
+import MonthlyView from "./monthly-view";
+
+import Container from "components/services/widget/container";
+
+export default function Component({ service }) {
+  const { widget } = service;
+  const { showDate } = useContext(ShowDateContext);
+
+  // params for API fetch
+  const params = useMemo(() => {
+    if (!showDate) {
+      return {};
+    }
+
+    return {
+      start: showDate.minus({months: 3}).toFormat("yyyy-MM-dd"),
+      end: showDate.plus({months: 3}).toFormat("yyyy-MM-dd"),
+      unmonitored: 'false',
+    };
+  }, [showDate]);
+
+  // Load active integrations
+  const integrations = useMemo(() => widget.integrations?.map(integration => ({
+    service: dynamic(() => import(`./integrations/${integration?.type}`)),
+    widget: integration,
+  })) ?? [], [widget.integrations]);
+
+  return <Container service={service}>
+    <div className="flex flex-col w-full">
+      <div className="sticky top-0">
+        {integrations.map(integration => {
+          const Integration = integration.service;
+          const key = integration.widget.type + integration.widget.service_name + integration.widget.service_group;
+
+          return <Integration key={key} config={integration.widget} params={params}
+                              className="fixed bottom-0 left-0 bg-red-500 w-screen h-12" />
+        })}
+      </div>
+      <MonthlyView service={service} className="flex"/>
+    </div>
+  </Container>;
+}