@propriety/court-calendar 1.0.21 → 1.0.22

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@propriety/court-calendar",
     "private": false,
-    "version": "1.0.21",
+    "version": "1.0.22",
     "type": "module",
     "main": "dist/index.js",
     "module": "./dist/index.mjs",

package/src/_components/CCalendar.css

@@ -467,3 +467,71 @@
     transform: scale(1.1);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
+
+/* Print styles */
+@page {
+    size: landscape;
+    margin: 0.5in;
+}
+
+@media print {
+    /* Hide toolbar, tooltips, modal */
+    #ccalendar-container > .MuiStack-root:first-child,
+    #event-tooltip,
+    .ReactModal__Overlay,
+    .MuiDataGrid-footerContainer {
+        display: none !important;
+    }
+
+    /* Force calendar to fit page width */
+    #ccalendar-container {
+        width: 100% !important;
+        overflow: visible !important;
+    }
+
+    .fc.fc-media-screen,
+    .fc .fc-scrollgrid,
+    .fc .fc-scrollgrid-section > td,
+    .fc .fc-daygrid-body,
+    .fc table {
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+
+    .fc .fc-scrollgrid {
+        overflow: visible !important;
+    }
+
+    /* Let columns size naturally instead of fixed pixel widths */
+    .fc colgroup col {
+        width: auto !important;
+    }
+
+    /* Remove scroll constraints on calendar day cells */
+    .fc-daygrid-day-events {
+        max-height: none !important;
+        min-height: auto !important;
+        overflow: visible !important;
+    }
+
+    .month-day-cell {
+        height: auto !important;
+    }
+
+    /* Remove fixed height on table container */
+    #ccalendar-container .MuiDataGrid-root {
+        height: auto !important;
+        max-height: none !important;
+    }
+
+    #ccalendar-container .MuiDataGrid-virtualScroller {
+        overflow: visible !important;
+        height: auto !important;
+    }
+
+    /* Ensure colors print */
+    * {
+        -webkit-print-color-adjust: exact !important;
+        print-color-adjust: exact !important;
+    }
+}

package/src/_components/CCalendar.tsx

@@ -81,6 +81,7 @@ function CCalendarInner({ apiKey, activeUser }: { apiKey: string; activeUser: nu
     const [selectedCases, setSelectedCases] = useState<Case[]>([]);
     const [isFetchingCases, setIsFetchingCases] = useState<boolean>(false);
     const [searchedDateIDs, setSearchedDateIDs] = useState<Array<number>>([]);
+    const [isPrinting, setIsPrinting] = useState(false);
     // Track previously rendered event IDs to avoid reanimating unchanged events
     const prevEventIdsRef = useRef<Set<string>>(new Set());
     // Track previous view to detect actual view changes vs calendarApi remounts
@@ -600,6 +601,21 @@ function CCalendarInner({ apiKey, activeUser }: { apiKey: string; activeUser: nu
     }, [currentView, calendarApi]);
     // #endregion
 
+    // #region printing
+    function handlePrint() {
+        setIsPrinting(true);
+    }
+
+    useEffect(() => {
+        if (!isPrinting) return;
+        const timeout = setTimeout(() => {
+            window.print();
+            setIsPrinting(false);
+        }, 100);
+        return () => clearTimeout(timeout);
+    }, [isPrinting]);
+    // #endregion
+
     // #region Event Mounting (Tooltips & Animations)
     function handleEventMount(info: EventMountArg) {
         // biome-ignore lint/suspicious/noExplicitAny: i dont know the type
@@ -684,6 +700,7 @@ function CCalendarInner({ apiKey, activeUser }: { apiKey: string; activeUser: nu
                 filterCtx={filterCtx}
                 setFilterCtx={setFilterCtx}
                 handleCreateClick={() => createCourtDate(calendarApi?.getDate() || currentDate || new Date())}
+                onPrint={handlePrint}
                 currentView={currentView}
                 setCurrentView={setCurrentView}
                 currentDate={currentDate}
@@ -732,6 +749,7 @@ function CCalendarInner({ apiKey, activeUser }: { apiKey: string; activeUser: nu
                     currentDate={currentDate}
                     onUpdateChair={handleUpdateChair}
                     allCases={allCases}
+                    isPrinting={isPrinting}
                 />
             )}
             <Modal

package/src/_components/List/CalendarList.tsx

@@ -11,12 +11,14 @@ export default function CalendarList({
     currentDate,
     onUpdateChair,
     allCases,
+    isPrinting,
 }: {
     filteredDates: CourtDate[];
     setSelectedDate: (date: CourtDate) => void;
     currentDate: Date;
     onUpdateChair?: (courtDateId: number, position: 'first' | 'second', userId: number | null) => void;
     allCases: Record<string, Case[]>;
+    isPrinting?: boolean;
 }) {
     const { getTownshipName, getCountyName } = useReferenceData();
     const countyColors: Record<string, string> = {
@@ -264,11 +266,13 @@ export default function CalendarList({
         }));
 
     return (
-        <div style={{ height: 600, width: '100%' }}>
+        <div style={{ height: isPrinting ? 'auto' : 600, width: '100%' }}>
             <DataGrid
                 rows={rows}
                 columns={columns}
                 className='themed'
+                autoHeight={isPrinting}
+                hideFooter={isPrinting}
                 initialState={{
                     sorting: {
                         sortModel: [{ field: 'courtDate', sort: 'asc' }],

package/src/_components/Toolbar/Toolbar.tsx

@@ -3,6 +3,7 @@ import type { Calendar } from '@fullcalendar/core/index.js';
 import NavigateNext from '@mui/icons-material/NavigateNext';
 import NavigateBefore from '@mui/icons-material/NavigateBefore';
 import Add from '@mui/icons-material/Add';
+import Print from '@mui/icons-material/Print';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
@@ -22,6 +23,7 @@ export default function Toolbar({
     filterCtx,
     setFilterCtx,
     handleCreateClick,
+    onPrint,
     currentView,
     setCurrentView,
     currentDate,
@@ -34,6 +36,7 @@ export default function Toolbar({
     filterCtx: CalendarFilterCtx;
     setFilterCtx: (ctx: CalendarFilterCtx) => void;
     handleCreateClick: () => void;
+    onPrint: () => void;
     currentView: string;
     setCurrentView: (view: string) => void;
     currentDate: Date;
@@ -165,6 +168,9 @@ export default function Toolbar({
                 <Button variant='outlined' size='medium' onClick={goToToday}>
                     Today
                 </Button>
+                <Button size='medium' onClick={onPrint}>
+                    <Print fontSize='medium' />
+                </Button>
                 <Button size='medium' onClick={handlePrev}>
                     <NavigateBefore fontSize='medium' />
                 </Button>