From 5d31e414f0c5700cab196dddff2cbc61c30c8644 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 14 Jun 2022 20:50:11 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Configure=20calendar=20widget=20to?=
 =?UTF-8?q?=20show=20Sunday=20first=20Fixes=20#217?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/calendar/CalendarModule.tsx          | 16 ++++++++++++++++
 src/components/modules/moduleWrapper.tsx         |  4 ++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/modules/calendar/CalendarModule.tsx b/src/components/modules/calendar/CalendarModule.tsx
index a0b6574d1..1d2308586 100644
--- a/src/components/modules/calendar/CalendarModule.tsx
+++ b/src/components/modules/calendar/CalendarModule.tsx
@@ -29,6 +29,12 @@ export const CalendarModule: IModule = {
     'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
   icon: CalendarIcon,
   component: CalendarComponent,
+  options: {
+    sundaystart: {
+      name: 'Start the week on Sunday',
+      value: false,
+    },
+  },
 };
 
 export default function CalendarComponent(props: any) {
@@ -104,8 +110,11 @@ export default function CalendarComponent(props: any) {
     });
   }, [config.services]);
 
+  const weekStartsAtSunday =
+    (config?.modules?.[CalendarModule.title]?.options?.sundaystart?.value as boolean) ?? false;
   return (
     <Calendar
+      firstDayOfWeek={weekStartsAtSunday ? 'sunday' : 'monday'}
       onChange={(day: any) => {}}
       dayStyle={(date) =>
         date.getDay() === today.getDay() && date.getDate() === today.getDate()
@@ -115,6 +124,13 @@ export default function CalendarComponent(props: any) {
             }
           : {}
       }
+      styles={{
+        calendarHeader: {
+          marginRight: 15,
+          marginLeft: 15,
+        },
+      }}
+      allowLevelChange={false}
       dayClassName={(date, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
       renderDay={(renderdate) => (
         <DayComponent
diff --git a/src/components/modules/moduleWrapper.tsx b/src/components/modules/moduleWrapper.tsx
index 8d965941d..a28cde8a8 100644
--- a/src/components/modules/moduleWrapper.tsx
+++ b/src/components/modules/moduleWrapper.tsx
@@ -120,8 +120,8 @@ export function ModuleWrapper(props: any) {
         styles={{
           root: {
             position: 'absolute',
-            top: 15,
-            right: 15,
+            top: 12,
+            right: 12,
           },
         }}
       />