Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-09 06:55:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix Calendar

Browse Source
This commit is contained in:
ajnart
2023-04-17 14:48:04 +09:00
parent ec76c10fdc
commit 543113292b
2 changed files with 43 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/widgets/calendar/CalendarDay.tsx
View File

@@ -1,4 +1,4 @@
import { Box, Indicator, IndicatorProps, Popover } from '@mantine/core'; import { ActionIcon, Box, Button, Indicator, IndicatorProps, Popover } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks';
import { isToday } from '../../tools/shared/time/date.tool'; import { isToday } from '../../tools/shared/time/date.tool';
import { MediaList } from './MediaList'; import { MediaList } from './MediaList';
@@ -70,7 +70,7 @@ const DayIndicator = ({ color, medias, children, position }: DayIndicatorProps)
if (medias.length === 0) return children; if (medias.length === 0) return children;
return ( return (
<Indicator size={10} withBorder offset={5} color={color} position={position}> <Indicator size={10} withBorder offset={-5} color={color} position={position}>
{children} {children}
</Indicator> </Indicator>
); );

77
src/widgets/calendar/CalendarTile.tsx
View File

@@ -9,6 +9,7 @@ import { defineWidget } from '../helper';
import { IWidget } from '../widgets'; import { IWidget } from '../widgets';
import { CalendarDay } from './CalendarDay'; import { CalendarDay } from './CalendarDay';
import { MediasType } from './type'; import { MediasType } from './type';
import { useColorTheme } from '../../tools/color';
const definition = defineWidget({ const definition = defineWidget({
id: 'calendar', id: 'calendar',
@@ -50,6 +51,7 @@ interface CalendarTileProps {
function CalendarTile({ widget }: CalendarTileProps) { function CalendarTile({ widget }: CalendarTileProps) {
const { name: configName } = useConfigContext(); const { name: configName } = useConfigContext();
const [month, setMonth] = useState(new Date()); const [month, setMonth] = useState(new Date());
const { secondaryColor } = useColorTheme();
const { data: medias } = useQuery({ const { data: medias } = useQuery({
queryKey: ['calendar/medias', { month: month.getMonth(), year: month.getFullYear() }], queryKey: ['calendar/medias', { month: month.getMonth(), year: month.getFullYear() }],
@@ -65,42 +67,45 @@ function CalendarTile({ widget }: CalendarTileProps) {
}); });
return ( 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)} />
)}
/>
); );
} }