diff --git a/src/components/modules/calendar/CalendarModule.tsx b/src/components/modules/calendar/CalendarModule.tsx index c95893545..edde221ea 100644 --- a/src/components/modules/calendar/CalendarModule.tsx +++ b/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 ( {}} + dayStyle={(date) => + date.getDay() === today.getDay() && date.getDate() === today.getDate() + ? { backgroundColor: '#2C2E33' } + : null + } + dayClassName={(date, modifiers) => + cx({ [classes.weekend]: modifiers.weekend }) + } renderDay={(renderdate) => (