Merge pull request #825 from ajnart/fix-calendar

🐛 Fix Calendar

src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx

@@ -70,7 +70,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
         // Cast as the right type for the correct widget
         widgetOptions: widgetDefinitionObject.options as any,
       },
-      zIndex: 5,
+      zIndex: 250,
     });
   };
 

src/widgets/calendar/CalendarDay.tsx

@@ -70,7 +70,7 @@ const DayIndicator = ({ color, medias, children, position }: DayIndicatorProps)
   if (medias.length === 0) return children;
 
   return (
-    <Indicator size={10} withBorder offset={5} color={color} position={position}>
+    <Indicator size={10} withBorder offset={-5} color={color} position={position}>
       {children}
     </Indicator>
   );

src/widgets/calendar/CalendarTile.tsx

@@ -65,42 +65,45 @@ function CalendarTile({ widget }: CalendarTileProps) {
   });
 
   return (
-    <Group grow style={{ height: '100%' }}>
+    <Calendar
-      <Calendar
+      defaultDate={new Date()}
-        defaultDate={new Date()}
+      onPreviousMonth={setMonth}
-        onPreviousMonth={setMonth}
+      onNextMonth={setMonth}
-        onNextMonth={setMonth}
+      size="xs"
-        size="xs"
+      locale={i18n?.resolvedLanguage ?? 'en'}
-        locale={i18n?.resolvedLanguage ?? 'en'}
+      firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
-        firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
+      hideWeekdays
-        hideWeekdays
+      style={{ position: 'relative', top: -10 }}
-        date={month}
+      date={month}
-        hasNextLevel={false}
+      maxLevel="month"
-        styles={{
+      hasNextLevel={false}
-          calendar: {
+      styles={{
-            height: '100%',
+        calendarHeader: {
-          },
+          maxWidth: 'inherit',
-          monthLevelGroup: {
+        },
-            height: '100%',
+        calendar: {
-          },
+          height: '100%',
-          monthLevel: {
+          display: 'flex',
-            height: '100%',
+          flexDirection: 'column',
-            display: 'flex',
+          width: '100%',
-            flexDirection: 'column',
+        },
-            width: '100%',
+        monthLevelGroup: {
-          },
+          height: '100%',
-          month: {
+        },
-            flex: 1,
+        monthLevel: {
-          },
+          height: '100%',
-          calendarHeader: {
+          display: 'flex',
-            maxWidth: 'inherit',
+          flexDirection: 'column',
-          },
+          width: '100%',
-        }}
+        },
-        renderDay={(date) => (
+        month: {
-          <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} />
+          flex: 1,
-        )}
+        },
-      />
+      }}
-    </Group>
+      renderDay={(date) => (
+        <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} />
+      )}
+    />
   );
 }