feat: calendar indication about date and we with secondary color

src/components/modules/calendar/CalendarModule.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-children-prop */
-import { Box, Divider, Indicator, Popover, ScrollArea } from '@mantine/core';
+import { Box, Divider, Indicator, Popover, ScrollArea, createStyles } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
 import { IconCalendar as CalendarIcon } from '@tabler/icons';
@@ -13,6 +13,7 @@ import {
   ReadarrMediaDisplay,
 } from '../common';
 import { serviceItem } from '../../../tools/types';
+import { useColorTheme } from '../../../tools/color';
 
 export const CalendarModule: IModule = {
   title: 'Calendar',
@@ -24,6 +25,12 @@ export const CalendarModule: IModule = {
 
 export default function CalendarComponent(props: any) {
   const { config } = useConfig();
+  const { secondaryColor } = useColorTheme();
+  const useStyles = createStyles(() => ({
+      weekend: {
+      color: `${secondaryColor} !important`,
+    },
+  }));
   const [sonarrMedias, setSonarrMedias] = useState([] as any);
   const [lidarrMedias, setLidarrMedias] = useState([] as any);
   const [radarrMedias, setRadarrMedias] = useState([] as any);
@@ -32,6 +39,9 @@ export default function CalendarComponent(props: any) {
   const radarrServices = config.services.filter((service) => service.type === 'Radarr');
   const lidarrServices = config.services.filter((service) => service.type === 'Lidarr');
   const readarrServices = config.services.filter((service) => service.type === 'Readarr');
+  const today = new Date();
+
+  const { classes, cx } = useStyles();
 
   function getMedias(service: serviceItem | undefined, type: string) {
     if (!service || !service.apiKey) {
@@ -87,6 +97,14 @@ export default function CalendarComponent(props: any) {
   return (
     <Calendar
       onChange={(day: any) => {}}
+      dayStyle={(date) =>
+        date.getDay() === today.getDay() && date.getDate() === today.getDate()
+          ? { backgroundColor: '#2C2E33' }
+          : null
+      }
+      dayClassName={(date, modifiers) =>
+        cx({ [classes.weekend]: modifiers.weekend })
+      }
       renderDay={(renderdate) => (
         <DayComponent
           renderdate={renderdate}