Add calendar view range highlighting

Author: C-Coretex

src/TimeHacker.UI/src/components/Layout/MiniCalendar.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import type { FC } from 'react';
 import { Button, Calendar } from 'antd';
 import {
@@ -8,65 +9,113 @@ import {
   RightOutlined,
 } from '@ant-design/icons';
 import dayjs from 'dayjs';
+import type { CalendarView } from '../../contexts/CalendarDateContext';
 
 interface Props {
   selectedDate: Date;
   onSelect: (date: Date) => void;
+  currentView: CalendarView;
+  weekStartDay: number;
 }
 
-const MiniCalendar: FC<Props> = ({ selectedDate, onSelect }) => (
-  <div className="mini-cal" style={{ padding: '4px 8px', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
-    <Calendar
-      fullscreen={false}
-      value={dayjs(selectedDate)}
-      onSelect={(date) => onSelect(date.toDate())}
-      headerRender={({ value, onChange }) => (
-        <div style={{ padding: '4px 0' }}>
-          <div style={{ textAlign: 'center', fontWeight: 600, fontSize: 13, marginBottom: 4 }}>
-            {value.format('MMMM YYYY')}
-          </div>
-          <div style={{ display: 'flex', justifyContent: 'center', gap: 4 }}>
-            <Button
-              type="text"
-              size="small"
-              icon={<DoubleLeftOutlined />}
-              onClick={() => onChange(value.subtract(1, 'year'))}
-              aria-label="Previous year"
-            />
-            <Button
-              type="text"
-              size="small"
-              icon={<LeftOutlined />}
-              onClick={() => onChange(value.subtract(1, 'month'))}
-              aria-label="Previous month"
-            />
-            <Button
-              type="text"
-              size="small"
-              onClick={() => onChange(dayjs())}
-              aria-label="Today"
-            >
-              <CalendarOutlined />
-            </Button>
-            <Button
-              type="text"
-              size="small"
-              icon={<RightOutlined />}
-              onClick={() => onChange(value.add(1, 'month'))}
-              aria-label="Next month"
-            />
-            <Button
-              type="text"
-              size="small"
-              icon={<DoubleRightOutlined />}
-              onClick={() => onChange(value.add(1, 'year'))}
-              aria-label="Next year"
-            />
+const MiniCalendar: FC<Props> = ({ selectedDate, onSelect, currentView, weekStartDay }) => {
+  const selected = dayjs(selectedDate);
+
+  const rangeStart = useMemo(() => {
+    switch (currentView) {
+      case 'week': {
+        const diff = (selected.day() - weekStartDay + 7) % 7;
+        return selected.subtract(diff, 'day').startOf('day');
+      }
+      case '3day':
+        return selected.startOf('day');
+      case 'month':
+        return selected.startOf('month');
+      default:
+        return selected.startOf('day');
+    }
+  }, [selected, currentView, weekStartDay]);
+
+  const rangeEnd = useMemo(() => {
+    switch (currentView) {
+      case 'week':
+        return rangeStart.add(6, 'day').endOf('day');
+      case '3day':
+        return selected.add(2, 'day').endOf('day');
+      case 'month':
+        return selected.endOf('month');
+      default:
+        return selected.endOf('day');
+    }
+  }, [selected, currentView, rangeStart]);
+
+  return (
+    <div className="mini-cal" style={{ padding: '4px 8px', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
+      <Calendar
+        fullscreen={false}
+        value={selected}
+        onSelect={(date) => onSelect(date.toDate())}
+        fullCellRender={(current, info) => {
+          if (info.type !== 'date') return info.originNode;
+          const inRange =
+            currentView !== 'day' &&
+            !current.isBefore(rangeStart, 'day') &&
+            !current.isAfter(rangeEnd, 'day');
+          if (!inRange) return info.originNode;
+          return (
+            <div style={{ background: 'rgba(22, 119, 255, 0.12)', borderRadius: 4 }}>
+              {info.originNode}
+            </div>
+          );
+        }}
+        headerRender={({ value, onChange }) => (
+          <div style={{ padding: '4px 0' }}>
+            <div style={{ textAlign: 'center', fontWeight: 600, fontSize: 13, marginBottom: 4 }}>
+              {value.format('MMMM YYYY')}
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'center', gap: 4 }}>
+              <Button
+                type="text"
+                size="small"
+                icon={<DoubleLeftOutlined />}
+                onClick={() => onChange(value.subtract(1, 'year'))}
+                aria-label="Previous year"
+              />
+              <Button
+                type="text"
+                size="small"
+                icon={<LeftOutlined />}
+                onClick={() => onChange(value.subtract(1, 'month'))}
+                aria-label="Previous month"
+              />
+              <Button
+                type="text"
+                size="small"
+                onClick={() => onChange(dayjs())}
+                aria-label="Today"
+              >
+                <CalendarOutlined />
+              </Button>
+              <Button
+                type="text"
+                size="small"
+                icon={<RightOutlined />}
+                onClick={() => onChange(value.add(1, 'month'))}
+                aria-label="Next month"
+              />
+              <Button
+                type="text"
+                size="small"
+                icon={<DoubleRightOutlined />}
+                onClick={() => onChange(value.add(1, 'year'))}
+                aria-label="Next year"
+              />
+            </div>
           </div>
-        </div>
-      )}
-    />
-  </div>
-);
+        )}
+      />
+    </div>
+  );
+};
 
 export default MiniCalendar;

src/TimeHacker.UI/src/components/Layout/index.tsx

@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useAuth } from 'contexts/AuthContext';
 import { useCalendarDate } from 'contexts/CalendarDateContext';
+import { useSettings } from 'contexts/SettingsContext';
 import { fetchTasksForDay } from '../../api/tasks';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import SidebarLogo from './SidebarLogo';
@@ -37,7 +38,9 @@ const Layout: FC = () => {
   const navigate = useNavigate();
   const { isMobile } = useIsMobile();
   const { t } = useTranslation();
-  const { selectedDate, setSelectedDate } = useCalendarDate();
+  const { selectedDate, setSelectedDate, calendarView } = useCalendarDate();
+  const { weekStart } = useSettings();
+  const weekStartDay = weekStart === 'monday' ? 1 : 0;
 
   const [collapsed, setCollapsed] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -91,7 +94,7 @@ const Layout: FC = () => {
         >
           <SidebarLogo onClick={handleLogoClick} />
           {menuNode}
-          <MiniCalendar selectedDate={selectedDate} onSelect={handleMiniCalendarSelect} />
+          <MiniCalendar selectedDate={selectedDate} onSelect={handleMiniCalendarSelect} currentView={calendarView} weekStartDay={weekStartDay} />
         </Drawer>
       ) : (
         <Sider
@@ -104,7 +107,7 @@ const Layout: FC = () => {
           <SidebarLogo collapsed={collapsed} onClick={handleLogoClick} />
           {menuNode}
           {!collapsed && (
-            <MiniCalendar selectedDate={selectedDate} onSelect={handleMiniCalendarSelect} />
+            <MiniCalendar selectedDate={selectedDate} onSelect={handleMiniCalendarSelect} currentView={calendarView} weekStartDay={weekStartDay} />
           )}
         </Sider>
       )}

src/TimeHacker.UI/src/contexts/CalendarDateContext.tsx

@@ -1,18 +1,23 @@
 import { createContext, useContext, useState } from 'react';
 import type { FC, ReactNode } from 'react';
 
+export type CalendarView = 'month' | 'week' | 'day' | '3day';
+
 interface CalendarDateContextType {
   selectedDate: Date;
   setSelectedDate: (date: Date) => void;
+  calendarView: CalendarView;
+  setCalendarView: (view: CalendarView) => void;
 }
 
 const CalendarDateContext = createContext<CalendarDateContextType | null>(null);
 
 export const CalendarDateProvider: FC<{ children: ReactNode }> = ({ children }) => {
   const [selectedDate, setSelectedDate] = useState(() => new Date());
+  const [calendarView, setCalendarView] = useState<CalendarView>('week');
 
   return (
-    <CalendarDateContext.Provider value={{ selectedDate, setSelectedDate }}>
+    <CalendarDateContext.Provider value={{ selectedDate, setSelectedDate, calendarView, setCalendarView }}>
       {children}
     </CalendarDateContext.Provider>
   );

src/TimeHacker.UI/src/pages/CalendarPage/index.tsx

@@ -17,6 +17,7 @@ import type { CalendarEvent } from '../../utils/calendarUtils';
 import type { ScheduleEntityReturnModel } from '../../api/types';
 import { useTheme } from '../../contexts/ThemeContext';
 import { useCalendarDate } from '../../contexts/CalendarDateContext';
+import type { CalendarView } from '../../contexts/CalendarDateContext';
 import { useSettings } from '../../contexts/SettingsContext';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import ThreeDayView from './ThreeDayView';
@@ -28,8 +29,6 @@ import EventDetailModal from './components/EventDetailModal';
 
 dayjs.extend(updateLocale);
 
-type ExtendedView = View | '3day';
-
 const calendarViews = {
   month: true,
   week: true,
@@ -43,9 +42,7 @@ const CalendarPage: FC = () => {
   const { t, i18n } = useTranslation();
   const { timeDisplayFormat, weekStart: weekStartSetting } = useSettings();
   const initialViewSet = useRef(false);
-  const { selectedDate, setSelectedDate } = useCalendarDate();
-
-  const [view, setView] = useState<ExtendedView>('week');
+  const { selectedDate, setSelectedDate, calendarView, setCalendarView } = useCalendarDate();
   const [events, setEvents] = useState<CalendarEvent[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -65,7 +62,7 @@ const CalendarPage: FC = () => {
   useEffect(() => {
     if (!initialViewSet.current && screens.md !== undefined) {
       initialViewSet.current = true;
-      setView(isMobile ? 'day' : 'week');
+      setCalendarView(isMobile ? 'day' : 'week');
     }
   }, [isMobile, screens.md]);
 
@@ -112,7 +109,7 @@ const CalendarPage: FC = () => {
   );
 
   const getDatesForView = useCallback(
-    (v: ExtendedView): Date[] => {
+    (v: CalendarView): Date[] => {
       switch (v) {
         case 'month': return monthDays;
         case 'week': return weekDays;
@@ -154,14 +151,14 @@ const CalendarPage: FC = () => {
   );
 
   useEffect(() => {
-    fetchTasks(getDatesForView(view));
-  }, [view, selectedDate, fetchTasks, getDatesForView]);
+    fetchTasks(getDatesForView(calendarView));
+  }, [calendarView, selectedDate, fetchTasks, getDatesForView]);
 
   const refresh = useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
-      const dates = getDatesForView(view);
+      const dates = getDatesForView(calendarView);
       await refreshTasksForDays(dates);
       await fetchTasks(dates);
     } catch (err: unknown) {
@@ -173,7 +170,7 @@ const CalendarPage: FC = () => {
     } finally {
       setLoading(false);
     }
-  }, [view, getDatesForView, fetchTasks, t]);
+  }, [calendarView, getDatesForView, fetchTasks, t]);
 
   // --- Event handlers ---
 
@@ -215,12 +212,12 @@ const CalendarPage: FC = () => {
         }
         setTaskModalOpen(false);
         notification.success({ message: t('tasks.success'), description: t('tasks.fixedTaskAdded') });
-        await fetchTasks(getDatesForView(view));
+        await fetchTasks(getDatesForView(calendarView));
       } catch {
         notification.error({ message: t('tasks.error'), description: t('tasks.fixedTaskSaveFailed') });
       }
     },
-    [fetchTasks, getDatesForView, view, t]
+    [fetchTasks, getDatesForView, calendarView, t]
   );
 
   const handleSaveDynamic = useCallback(
@@ -229,12 +226,12 @@ const CalendarPage: FC = () => {
         await createDynamicTask(data);
         setTaskModalOpen(false);
         notification.success({ message: t('tasks.success'), description: t('tasks.dynamicTaskAdded') });
-        await fetchTasks(getDatesForView(view));
+        await fetchTasks(getDatesForView(calendarView));
       } catch {
         notification.error({ message: t('tasks.error'), description: t('tasks.dynamicTaskSaveFailed') });
       }
     },
-    [fetchTasks, getDatesForView, view, t]
+    [fetchTasks, getDatesForView, calendarView, t]
   );
 
   const eventStyleGetter = useCallback(
@@ -304,13 +301,13 @@ const CalendarPage: FC = () => {
           startAccessor="start"
           endAccessor="end"
           style={{ flex: 1 }}
-          view={view as View}
-          onView={(v) => setView(v as ExtendedView)}
+          view={calendarView as View}
+          onView={(v) => setCalendarView(v as CalendarView)}
           date={selectedDate}
           onNavigate={setSelectedDate}
           views={calendarViews}
           onSelectEvent={handleSelectEvent}
-          onDrillDown={(date) => { setSelectedDate(date); setView('day'); }}
+          onDrillDown={(date) => { setSelectedDate(date); setCalendarView('day'); }}
           eventPropGetter={eventStyleGetter}
           culture={i18n.language?.startsWith('ru') ? 'ru' : 'en'}
           messages={calendarMessages as Record<string, string>}