diff --git a/frontend/print.css b/frontend/print.css
index 37d29b3..cd0c272 100644
--- a/frontend/print.css
+++ b/frontend/print.css
@@ -1,302 +1,474 @@
-/* Print-specific styles for calendar printing */
-@media print {
-    /* Hide UI elements that shouldn't be printed */
-    .app-sidebar,
-    .current-time-indicator-container,
-    .current-time-indicator,
-    .print-button,
-    .nav-button,
-    .today-button,
-    .time-increment-button,
-    .modal-backdrop,
-    .create-event-modal,
-    .event-modal,
-    .calendar-management-modal,
-    .context-menu {
-        display: none !important;
-    }
-
-    /* Remove today highlighting from calendar elements */
-    .calendar-day.today,
-    .week-day-header.today,
-    .week-day-column.today {
-        background-color: transparent !important;
-        border-color: var(--border-color) !important;
-        color: var(--text-color) !important;
-    }
-
-    /* Remove today-specific styling from day numbers */
-    .calendar-day.today .day-number {
-        background-color: transparent !important;
-        color: var(--text-color) !important;
-        font-weight: normal !important;
-    }
-
-    /* Remove today indicator from week day headers */
-    .week-day-header.today .weekday-name {
-        color: var(--text-color) !important;
-        font-weight: normal !important;
-    }
-
-    /* Page setup */
-    @page {
-        size: letter landscape;
-        margin: 0.5in;
-    }
-
-    /* Make app and main container fill full page width */
-    .app,
-    .app-main,
-    .calendar-view {
-        width: 100% !important;
-        max-width: none !important;
-        margin: 0 !important;
-        padding: 0 !important;
-        display: block !important;
-    }
-
-    /* Remove any flexbox constraints that might limit width */
-    .app {
-        display: block !important;
-    }
-
-    .app-main {
-        margin-left: 0 !important; /* Remove sidebar margin */
-        width: 100% !important;
-        max-width: none !important;
-    }
-
-    /* Ensure calendar uses full available width */
-    .calendar-container,
-    .calendar {
-        width: 100% !important;
-        max-width: none !important;
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-
-    /* Adjust calendar header for printing */
-    .calendar-header {
-        margin-bottom: 0.5rem !important;
-        padding-bottom: 0.5rem !important;
-        border-bottom: 1px solid var(--border-color) !important;
-    }
-
-    /* Ensure text is readable in print */
-    body, html {
-        color: black !important;
-        background: white !important;
-    }
-
-    /* Make sure event text is readable */
-    .week-event,
-    .calendar-event,
-    .month-event {
-        border: 1px solid #333 !important;
-        color: black !important;
-        font-size: 0.8rem !important;
-        line-height: 1.2 !important;
-    }
-
-    /* Ensure month view events are visible */
-    .calendar-day .event-list .event-item {
-        background-color: #f5f5f5 !important;
-        border: 1px solid #333 !important;
-        color: black !important;
-    }
-
-    /* Week view specific adjustments - force full day view */
-    .week-view-container {
-        width: 100% !important;
-        height: auto !important;
-        overflow: visible !important;
-    }
-
-    .week-day-column {
-        border-right: 1px solid #333 !important;
-        height: auto !important;
-        overflow: visible !important;
-    }
-
-    .time-column {
-        border-right: 2px solid #333 !important;
-        width: 60px !important;
-        min-width: 60px !important;
-        height: auto !important;
-        overflow: visible !important;
-    }
-
-    /* Default time slot sizes - will be adjusted by hour range */
-    .time-slot {
-        height: 20px !important;
-        min-height: 20px !important;
-        max-height: 20px !important;
-        border-bottom: 1px solid #ddd !important;
-        overflow: visible !important;
-    }
-    
-    /* Time slot quarters for 15-minute mode */
-    .time-slot.quarter-mode .time-slot-quarter {
-        height: 5px !important;
-        min-height: 5px !important;
-        max-height: 5px !important;
-        border-bottom: 1px solid #eee !important;
-    }
-    
-    /* Time slot halves for 30-minute mode */
-    .time-slot .time-slot-half {
-        height: 10px !important;
-        min-height: 10px !important;
-        max-height: 10px !important;
-        border-bottom: 1px solid #eee !important;
-    }
-
-    /* Make hour boundaries more visible */
-    .time-slot:nth-child(4n) {
-        border-bottom: 1px solid #333 !important;
-        height: 20px !important;
-    }
-
-    /* Dynamic hour range hiding for print mode */
-    body[data-print-mode="true"][data-print-start-hour="1"] .week-view .time-slot:nth-child(1) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="2"] .week-view .time-slot:nth-child(-n+2) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="3"] .week-view .time-slot:nth-child(-n+3) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="4"] .week-view .time-slot:nth-child(-n+4) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="5"] .week-view .time-slot:nth-child(-n+5) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="6"] .week-view .time-slot:nth-child(-n+6) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="7"] .week-view .time-slot:nth-child(-n+7) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="8"] .week-view .time-slot:nth-child(-n+8) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="9"] .week-view .time-slot:nth-child(-n+9) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="10"] .week-view .time-slot:nth-child(-n+10) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="11"] .week-view .time-slot:nth-child(-n+11) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="12"] .week-view .time-slot:nth-child(-n+12) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="13"] .week-view .time-slot:nth-child(-n+13) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="14"] .week-view .time-slot:nth-child(-n+14) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="15"] .week-view .time-slot:nth-child(-n+15) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="16"] .week-view .time-slot:nth-child(-n+16) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="17"] .week-view .time-slot:nth-child(-n+17) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="18"] .week-view .time-slot:nth-child(-n+18) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="19"] .week-view .time-slot:nth-child(-n+19) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="20"] .week-view .time-slot:nth-child(-n+20) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="21"] .week-view .time-slot:nth-child(-n+21) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="22"] .week-view .time-slot:nth-child(-n+22) { display: none !important; }
-    body[data-print-mode="true"][data-print-start-hour="23"] .week-view .time-slot:nth-child(-n+23) { display: none !important; }
-
-    /* Hide hours after end-hour */
-    body[data-print-mode="true"][data-print-end-hour="1"] .week-view .time-slot:nth-child(n+2) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="2"] .week-view .time-slot:nth-child(n+3) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="3"] .week-view .time-slot:nth-child(n+4) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="4"] .week-view .time-slot:nth-child(n+5) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="5"] .week-view .time-slot:nth-child(n+6) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="6"] .week-view .time-slot:nth-child(n+7) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="7"] .week-view .time-slot:nth-child(n+8) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="8"] .week-view .time-slot:nth-child(n+9) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="9"] .week-view .time-slot:nth-child(n+10) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="10"] .week-view .time-slot:nth-child(n+11) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="11"] .week-view .time-slot:nth-child(n+12) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="12"] .week-view .time-slot:nth-child(n+13) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="13"] .week-view .time-slot:nth-child(n+14) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="14"] .week-view .time-slot:nth-child(n+15) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="15"] .week-view .time-slot:nth-child(n+16) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="16"] .week-view .time-slot:nth-child(n+17) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="17"] .week-view .time-slot:nth-child(n+18) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="18"] .week-view .time-slot:nth-child(n+19) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="19"] .week-view .time-slot:nth-child(n+20) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="20"] .week-view .time-slot:nth-child(n+21) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="21"] .week-view .time-slot:nth-child(n+22) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="22"] .week-view .time-slot:nth-child(n+23) { display: none !important; }
-    body[data-print-mode="true"][data-print-end-hour="23"] .week-view .time-slot:nth-child(n+24) { display: none !important; }
-
-    /* Force the week grid to show full height */
-    .week-grid,
-    .week-content,
-    .time-grid {
-        height: auto !important;
-        max-height: none !important;
-        overflow: visible !important;
-    }
-
-    /* Ensure all hours are visible by removing any height constraints */
-    .week-view-container,
-    .week-view-container > div {
-        height: auto !important;
-        max-height: none !important;
-        overflow: visible !important;
-    }
-
-    /* Month view specific adjustments */
-    .calendar-grid {
-        border: 1px solid #333 !important;
-    }
-
-    .calendar-day {
-        border: 1px solid #333 !important;
-        min-height: 80px !important;
-    }
-
-    /* Ensure grid lines are visible - handled above in main time-slot rules */
-
-    /* Make sure header text is visible */
-    .calendar-header h2,
-    .calendar-header .month-year {
-        color: black !important;
-        font-size: 1.5rem !important;
-    }
-
-    .week-day-header .weekday-name,
-    .week-day-header .date-number {
-        color: black !important;
-    }
-
-    /* Time labels in week view */
-    .time-label {
-        color: #666 !important;
-        font-size: 0.75rem !important;
-    }
-
-    /* Remove any shadows or fancy effects */
-    * {
-        box-shadow: none !important;
-        text-shadow: none !important;
-    }
-
-    /* Ensure proper spacing */
-    .calendar-day .day-number {
-        margin-bottom: 0.25rem !important;
-    }
-
-    /* Make sure events don't overlap text in month view */
-    .calendar-day .event-list {
-        margin-top: 0.25rem !important;
-    }
-
-    /* Force page break before calendar if needed */
-    .calendar {
-        page-break-inside: avoid !important;
-    }
-}
-
-/* Additional print button styling for screen display */
-.print-button {
-    background: rgba(255,255,255,0.2);
-    border: none;
-    color: white;
-    font-size: 1.2rem;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.2s;
-    margin-left: 0.5rem;
-}
-
-.print-button:hover {
-    background: rgba(255,255,255,0.3);
-}
-
-.print-button:active {
-    transform: scale(0.95);
-}
\ No newline at end of file
+/* /* Print-specific styles for calendar printing */ */
+/* @media print { */
+/*     /* Hide UI elements that shouldn't be printed */ */
+/*     .app-sidebar, */
+/*     .current-time-indicator-container, */
+/*     .current-time-indicator, */
+/*     .print-button, */
+/*     .nav-button, */
+/*     .today-button, */
+/*     .time-increment-button, */
+/*     .modal-backdrop, */
+/*     .create-event-modal, */
+/*     .event-modal, */
+/*     .calendar-management-modal, */
+/*     .context-menu { */
+/*         display: none !important; */
+/*     } */
+/**/
+/*     /* Remove today highlighting from calendar elements */ */
+/*     .calendar-day.today, */
+/*     .week-day-header.today, */
+/*     .week-day-column.today { */
+/*         background-color: transparent !important; */
+/*         border-color: var(--border-color) !important; */
+/*         color: var(--text-color) !important; */
+/*     } */
+/**/
+/*     /* Remove today-specific styling from day numbers */ */
+/*     .calendar-day.today .day-number { */
+/*         background-color: transparent !important; */
+/*         color: var(--text-color) !important; */
+/*         font-weight: normal !important; */
+/*     } */
+/**/
+/*     /* Remove today indicator from week day headers */ */
+/*     .week-day-header.today .weekday-name { */
+/*         color: var(--text-color) !important; */
+/*         font-weight: normal !important; */
+/*     } */
+/**/
+/*     /* Page setup */ */
+/*     @page { */
+/*         size: letter landscape; */
+/*         margin: 0.5in; */
+/*     } */
+/**/
+/*     /* Make app and main container fill full page width */ */
+/*     .app, */
+/*     .app-main, */
+/*     .calendar-view { */
+/*         width: 100% !important; */
+/*         max-width: none !important; */
+/*         margin: 0 !important; */
+/*         padding: 0 !important; */
+/*         display: block !important; */
+/*     } */
+/**/
+/*     /* Remove any flexbox constraints that might limit width */ */
+/*     .app { */
+/*         display: block !important; */
+/*     } */
+/**/
+/*     .app-main { */
+/*         margin-left: 0 !important; /* Remove sidebar margin */ */
+/*         width: 100% !important; */
+/*         max-width: none !important; */
+/*     } */
+/**/
+/*     /* Ensure calendar uses full available width */ */
+/*     .calendar-container, */
+/*     .calendar { */
+/*         width: 100% !important; */
+/*         max-width: none !important; */
+/*         margin: 0 !important; */
+/*         padding: 0 !important; */
+/*     } */
+/**/
+/*     /* Adjust calendar header for printing */ */
+/*     .calendar-header { */
+/*         margin-bottom: 0.5rem !important; */
+/*         padding-bottom: 0.5rem !important; */
+/*         border-bottom: 1px solid var(--border-color) !important; */
+/*     } */
+/**/
+/*     /* Ensure text is readable in print */ */
+/*     body, html { */
+/*         color: black !important; */
+/*         background: white !important; */
+/*     } */
+/**/
+/*     /* Make sure event text is readable */ */
+/*     .week-event, */
+/*     .calendar-event, */
+/*     .month-event { */
+/*         border: 1px solid #333 !important; */
+/*         color: black !important; */
+/*         font-size: 0.8rem !important; */
+/*         line-height: 1.2 !important; */
+/*     } */
+/**/
+/*     /* Ensure month view events are visible */ */
+/*     .calendar-day .event-list .event-item { */
+/*         background-color: #f5f5f5 !important; */
+/*         border: 1px solid #333 !important; */
+/*         color: black !important; */
+/*     } */
+/**/
+/*     /* Week view specific adjustments - force full day view */ */
+/*     .week-view-container { */
+/*         width: 100% !important; */
+/*         height: auto !important; */
+/*         overflow: visible !important; */
+/*     } */
+/**/
+/*     .week-day-column { */
+/*         border-right: 1px solid #333 !important; */
+/*         height: auto !important; */
+/*         overflow: visible !important; */
+/*     } */
+/**/
+/*     .time-column { */
+/*         border-right: 2px solid #333 !important; */
+/*         width: 60px !important; */
+/*         min-width: 60px !important; */
+/*         height: auto !important; */
+/*         overflow: visible !important; */
+/*     } */
+/**/
+/*     /* Dynamic time slot sizes based on hour range */ */
+/*     .time-slot { */
+/*         height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */
+/*         min-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */
+/*         max-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */
+/*         border-bottom: 1px solid #ddd !important; */
+/*         overflow: visible !important; */
+/*     } */
+/**/
+/*     /* Time slot quarters for 15-minute mode - use dynamic base unit */ */
+/*     .time-slot.quarter-mode .time-slot-quarter { */
+/*         height: calc(var(--print-base-unit, 30) * 1px) !important; */
+/*         min-height: calc(var(--print-base-unit, 30) * 1px) !important; */
+/*         max-height: calc(var(--print-base-unit, 30) * 1px) !important; */
+/*         border-bottom: 1px solid #eee !important; */
+/*     } */
+/**/
+/*     /* Time slot halves for 30-minute mode - use dynamic base unit */ */
+/*     .time-slot .time-slot-half { */
+/*         height: calc(var(--print-base-unit, 30) * 1px) !important; */
+/*         min-height: calc(var(--print-base-unit, 30) * 1px) !important; */
+/*         max-height: calc(var(--print-base-unit, 30) * 1px) !important; */
+/*         border-bottom: 1px solid #eee !important; */
+/*     } */
+/**/
+/*     /* Make hour boundaries more visible */ */
+/*     .time-slot:nth-child(4n) { */
+/*         border-bottom: 1px solid #333 !important; */
+/*         height: 20px !important; */
+/*     } */
+/**/
+/*     /* Dynamic hour range hiding for print mode */ */
+/*     body[data-print-mode="true"][data-print-start-hour="1"] .week-view .time-slot:nth-child(1) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="2"] .week-view .time-slot:nth-child(-n+2) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="3"] .week-view .time-slot:nth-child(-n+3) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="4"] .week-view .time-slot:nth-child(-n+4) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="5"] .week-view .time-slot:nth-child(-n+5) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="6"] .week-view .time-slot:nth-child(-n+6) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="7"] .week-view .time-slot:nth-child(-n+7) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="8"] .week-view .time-slot:nth-child(-n+8) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="9"] .week-view .time-slot:nth-child(-n+9) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="10"] .week-view .time-slot:nth-child(-n+10) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="11"] .week-view .time-slot:nth-child(-n+11) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="12"] .week-view .time-slot:nth-child(-n+12) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .week-view .time-slot:nth-child(-n+13) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .week-view .time-slot:nth-child(-n+14) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .week-view .time-slot:nth-child(-n+15) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .week-view .time-slot:nth-child(-n+16) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="17"] .week-view .time-slot:nth-child(-n+17) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="18"] .week-view .time-slot:nth-child(-n+18) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="19"] .week-view .time-slot:nth-child(-n+19) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="20"] .week-view .time-slot:nth-child(-n+20) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="21"] .week-view .time-slot:nth-child(-n+21) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="22"] .week-view .time-slot:nth-child(-n+22) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="23"] .week-view .time-slot:nth-child(-n+23) { display: none !important; } */
+/**/
+/*     /* Hide hours after end-hour */ */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .week-view .time-slot:nth-child(n+2) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="2"] .week-view .time-slot:nth-child(n+3) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="3"] .week-view .time-slot:nth-child(n+4) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="4"] .week-view .time-slot:nth-child(n+5) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="5"] .week-view .time-slot:nth-child(n+6) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="6"] .week-view .time-slot:nth-child(n+7) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="7"] .week-view .time-slot:nth-child(n+8) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="8"] .week-view .time-slot:nth-child(n+9) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="9"] .week-view .time-slot:nth-child(n+10) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="10"] .week-view .time-slot:nth-child(n+11) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="11"] .week-view .time-slot:nth-child(n+12) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="12"] .week-view .time-slot:nth-child(n+13) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="13"] .week-view .time-slot:nth-child(n+14) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="14"] .week-view .time-slot:nth-child(n+15) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="15"] .week-view .time-slot:nth-child(n+16) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="16"] .week-view .time-slot:nth-child(n+17) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="17"] .week-view .time-slot:nth-child(n+18) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="18"] .week-view .time-slot:nth-child(n+19) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="19"] .week-view .time-slot:nth-child(n+20) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="20"] .week-view .time-slot:nth-child(n+21) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="21"] .week-view .time-slot:nth-child(n+22) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="22"] .week-view .time-slot:nth-child(n+23) { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-end-hour="23"] .week-view .time-slot:nth-child(n+24) { display: none !important; } */
+/**/
+/*     /* Hide time labels for hours before start hour using data attributes */ */
+/*     body[data-print-mode="true"][data-print-start-hour="1"] .time-label[data-hour="0"] { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="2"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="2"] .time-label[data-hour="1"] { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="3"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="3"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="3"] .time-label[data-hour="2"] { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="3"] { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="3"], */
+/*     body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="4"] { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="3"], */
+/*     body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="4"], */
+/*     body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="5"] { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="3"], */
+/*     body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="4"], */
+/*     body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="5"], */
+/*     body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="6"] { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="3"], */
+/*     body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="4"], */
+/*     body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="5"], */
+/*     body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="6"], */
+/*     body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="7"] { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="3"], */
+/*     body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="4"], */
+/*     body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="5"], */
+/*     body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="6"], */
+/*     body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="7"], */
+/*     body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="8"] { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="3"], */
+/*     body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="4"], */
+/*     body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="5"], */
+/*     body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="6"], */
+/*     body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="7"], */
+/*     body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="8"], */
+/*     body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="9"] { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="3"], */
+/*     body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="4"], */
+/*     body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="5"], */
+/*     body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="6"], */
+/*     body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="7"], */
+/*     body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="8"], */
+/*     body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="9"], */
+/*     body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="10"] { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="3"], */
+/*     body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="4"], */
+/*     body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="5"], */
+/*     body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="6"], */
+/*     body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="7"], */
+/*     body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="8"], */
+/*     body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="9"], */
+/*     body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="10"], */
+/*     body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="11"] { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="3"], */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="4"], */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="5"], */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="6"], */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="7"], */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="8"], */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="9"], */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="10"], */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="11"], */
+/*     body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="12"] { display: none !important; } */
+/**/
+/*     /* Hide time labels for remaining start hours (14-23) */ */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="3"], */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="4"], */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="5"], */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="6"], */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="7"], */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="8"], */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="9"], */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="10"], */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="11"], */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="12"], */
+/*     body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="13"] { display: none !important; } */
+/**/
+/*     /* Additional start hours 15-23 with similar patterns */ */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="0"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="3"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="4"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="5"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="6"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="7"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="8"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="9"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="10"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="11"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="12"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="13"], */
+/*     body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="14"] { display: none !important; } */
+/**/
+/*     /* Continue pattern for hours 16-23 (abbreviated for brevity) */ */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="0"] { display: none !important; } */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="3"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="4"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="5"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="6"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="7"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="8"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="9"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="10"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="11"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="12"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="13"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="14"], */
+/*     body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="15"] { display: none !important; } */
+/**/
+/*     /* Hide time labels for hours after end hour */ */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="1"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="2"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="3"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="4"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="5"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="6"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="7"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="8"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="9"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="10"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="11"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="12"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="13"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="14"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="15"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="16"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="17"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="18"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="19"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="20"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="21"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="22"], */
+/*     body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="23"] { display: none !important; } */
+/**/
+/*     /* Force the week grid to show full height */ */
+/*     .week-grid, */
+/*     .week-content, */
+/*     .time-grid { */
+/*         height: auto !important; */
+/*         max-height: none !important; */
+/*         overflow: visible !important; */
+/*     } */
+/**/
+/*     /* Ensure all hours are visible by removing any height constraints */ */
+/*     .week-view-container, */
+/*     .week-view-container > div { */
+/*         height: auto !important; */
+/*         max-height: none !important; */
+/*         overflow: visible !important; */
+/*     } */
+/**/
+/*     /* Month view specific adjustments */ */
+/*     .calendar-grid { */
+/*         border: 1px solid #333 !important; */
+/*     } */
+/**/
+/*     .calendar-day { */
+/*         border: 1px solid #333 !important; */
+/*         min-height: 80px !important; */
+/*     } */
+/**/
+/*     /* Ensure grid lines are visible - handled above in main time-slot rules */ */
+/**/
+/*     /* Make sure header text is visible */ */
+/*     .calendar-header h2, */
+/*     .calendar-header .month-year { */
+/*         color: black !important; */
+/*         font-size: 1.5rem !important; */
+/*     } */
+/**/
+/*     .week-day-header .weekday-name, */
+/*     .week-day-header .date-number { */
+/*         color: black !important; */
+/*     } */
+/**/
+/*     /* Time labels in week view - use dynamic heights to match time slots */ */
+/*     .time-label { */
+/*         color: #666 !important; */
+/*         font-size: 0.75rem !important; */
+/*         height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */
+/*         min-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */
+/*         max-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */
+/*     } */
+/**/
+/*     /* Remove any shadows or fancy effects */ */
+/*     * { */
+/*         box-shadow: none !important; */
+/*         text-shadow: none !important; */
+/*     } */
+/**/
+/*     /* Ensure proper spacing */ */
+/*     .calendar-day .day-number { */
+/*         margin-bottom: 0.25rem !important; */
+/*     } */
+/**/
+/*     /* Make sure events don't overlap text in month view */ */
+/*     .calendar-day .event-list { */
+/*         margin-top: 0.25rem !important; */
+/*     } */
+/**/
+/*     /* Force page break before calendar if needed */ */
+/*     .calendar { */
+/*         page-break-inside: avoid !important; */
+/*     } */
+/* } */
+/**/
+/* /* Additional print button styling for screen display */ */
+/* .print-button { */
+/*     background: rgba(255,255,255,0.2); */
+/*     border: none; */
+/*     color: white; */
+/*     font-size: 1.2rem; */
+/*     width: 40px; */
+/*     height: 40px; */
+/*     border-radius: 50%; */
+/*     cursor: pointer; */
+/*     display: flex; */
+/*     align-items: center; */
+/*     justify-content: center; */
+/*     transition: background-color 0.2s; */
+/*     margin-left: 0.5rem; */
+/* } */
+/**/
+/* .print-button:hover { */
+/*     background: rgba(255,255,255,0.3); */
+/* } */
+/**/
+/* .print-button:active { */
+/*     transform: scale(0.95); */
+/* } */
diff --git a/frontend/src/components/print_preview_modal.rs b/frontend/src/components/print_preview_modal.rs
index 7ccd413..fc65525 100644
--- a/frontend/src/components/print_preview_modal.rs
+++ b/frontend/src/components/print_preview_modal.rs
@@ -71,44 +71,6 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html {
         })
     };
 
-    let on_print = {
-        let start_hour = *start_hour;
-        let end_hour = *end_hour;
-        let view_mode = props.view_mode.clone();
-        Callback::from(move |_: MouseEvent| {
-            if let Some(window) = web_sys::window() {
-                if let Some(document) = window.document() {
-                    if let Some(body) = document.body() {
-                        // Add print attributes to body for CSS targeting
-                        if view_mode == ViewMode::Week {
-                            let _ = body.set_attribute("data-print-start-hour", &start_hour.to_string());
-                            let _ = body.set_attribute("data-print-end-hour", &end_hour.to_string());
-                        }
-                        let _ = body.set_attribute("data-print-mode", "true");
-
-                        // Trigger print
-                        if let Err(e) = window.print() {
-                            web_sys::console::log_1(&format!("Print failed: {:?}", e).into());
-                        }
-
-                        // Clean up attributes after a short delay
-                        let cleanup_body = body.clone();
-                        let cleanup_callback = Closure::wrap(Box::new(move || {
-                            let _ = cleanup_body.remove_attribute("data-print-start-hour");
-                            let _ = cleanup_body.remove_attribute("data-print-end-hour");
-                            let _ = cleanup_body.remove_attribute("data-print-mode");
-                        }) as Box<dyn FnMut()>);
-
-                        let _ = window.set_timeout_with_callback_and_timeout_and_arguments_0(
-                            cleanup_callback.as_ref().unchecked_ref(),
-                            1000
-                        );
-                        cleanup_callback.forget();
-                    }
-                }
-            }
-        })
-    };
 
     let format_hour = |hour: u32| -> String {
         if hour == 0 {
@@ -140,6 +102,148 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html {
     // Calculate print dimensions for the current hour range
     let (base_unit, pixels_per_hour, _available_height) = calculate_print_dimensions(*start_hour, *end_hour, props.time_increment);
     
+    let on_print = {
+        let start_hour = *start_hour;
+        let end_hour = *end_hour;
+        let view_mode = props.view_mode.clone();
+        let base_unit_value = base_unit;
+        let pixels_per_hour_value = pixels_per_hour;
+        Callback::from(move |_: MouseEvent| {
+            if let Some(window) = web_sys::window() {
+                if let Some(document) = window.document() {
+                    // Find the print preview content element
+                    if let Some(preview_content) = document.query_selector(".print-preview-content").ok().flatten() {
+                        // Clone the content to print
+                        if let Some(content_clone) = preview_content.clone_node_with_deep(true).ok() {
+                            if let Some(body) = document.body() {
+                                // Store original body content and styling
+                                let original_body_html = body.inner_html();
+                                let original_body_style = body.get_attribute("style").unwrap_or_default();
+
+                                // Set CSS variables on document root for print
+                                if let Some(document_element) = document.document_element() {
+                                    if let Some(html_element) = document_element.dyn_ref::<web_sys::HtmlElement>() {
+                                        let style = html_element.style();
+                                        let _ = style.set_property("--print-base-unit", &format!("{:.2}", base_unit_value));
+                                        let _ = style.set_property("--print-pixels-per-hour", &format!("{:.2}", pixels_per_hour_value));
+                                        let _ = style.set_property("--print-start-hour", &start_hour.to_string());
+                                        let _ = style.set_property("--print-end-hour", &end_hour.to_string());
+                                    }
+                                }
+
+                                // Clear body and add only the preview content
+                                body.set_inner_html("");
+                                let _ = body.set_attribute("style", "margin: 0; padding: 0; background: white;");
+                                let _ = body.append_child(&content_clone);
+
+                                // Set up restore content variables for later use
+                                use std::rc::Rc;
+                                let restore_body = Rc::new(body.clone());
+                                let restore_document = Rc::new(document.clone());
+                                let original_html = Rc::new(original_body_html.clone());
+                                let original_style = Rc::new(original_body_style.clone());
+                                let setup_window = Rc::new(window.clone());
+
+                                // Add a small delay before printing to make the change visible
+                                let print_window = window.clone();
+                                let print_callback = Closure::wrap(Box::new(move || {
+                                    
+                                    // Use visibility change event to detect when user returns to page
+                                    let restore_body = restore_body.clone();
+                                    let restore_document = restore_document.clone();
+                                    let original_html = original_html.clone();
+                                    let original_style = original_style.clone();
+                                    let setup_document1 = document.clone();
+                                    let setup_document2 = document.clone();
+                                    
+                                    // Create restore function for both visibility and focus events
+                                    let restore_body_vis = restore_body.clone();
+                                    let restore_document_vis = restore_document.clone();
+                                    let original_html_vis = original_html.clone();
+                                    let original_style_vis = original_style.clone();
+                                    let setup_document_vis = setup_document1.clone();
+                                    
+                                    let restore_body_focus = restore_body.clone();
+                                    let restore_document_focus = restore_document.clone();
+                                    let original_html_focus = original_html.clone();
+                                    let original_style_focus = original_style.clone();
+                                    
+                                    // Try multiple approaches - visibility change
+                                    let visibility_callback = Closure::wrap(Box::new(move || {
+                                        if !setup_document_vis.hidden() {
+                                            // Restore original body content and style
+                                            restore_body_vis.set_inner_html(&original_html_vis);
+                                            if original_style_vis.is_empty() {
+                                                let _ = restore_body_vis.remove_attribute("style");
+                                            } else {
+                                                let _ = restore_body_vis.set_attribute("style", &original_style_vis);
+                                            }
+                                            
+                                            // Clean up CSS variables
+                                            if let Some(document_element) = restore_document_vis.document_element() {
+                                                if let Some(html_element) = document_element.dyn_ref::<web_sys::HtmlElement>() {
+                                                    let style = html_element.style();
+                                                    let _ = style.remove_property("--print-base-unit");
+                                                    let _ = style.remove_property("--print-pixels-per-hour");
+                                                    let _ = style.remove_property("--print-start-hour");
+                                                    let _ = style.remove_property("--print-end-hour");
+                                                }
+                                            }
+                                        }
+                                    }) as Box<dyn FnMut()>);
+
+                                    // And also try focus event as backup
+                                    let focus_callback = Closure::wrap(Box::new(move || {
+                                        // Restore original body content and style
+                                        restore_body_focus.set_inner_html(&original_html_focus);
+                                        if original_style_focus.is_empty() {
+                                            let _ = restore_body_focus.remove_attribute("style");
+                                        } else {
+                                            let _ = restore_body_focus.set_attribute("style", &original_style_focus);
+                                        }
+                                        
+                                        // Clean up CSS variables
+                                        if let Some(document_element) = restore_document_focus.document_element() {
+                                            if let Some(html_element) = document_element.dyn_ref::<web_sys::HtmlElement>() {
+                                                let style = html_element.style();
+                                                let _ = style.remove_property("--print-base-unit");
+                                                let _ = style.remove_property("--print-pixels-per-hour");
+                                                let _ = style.remove_property("--print-start-hour");
+                                                let _ = style.remove_property("--print-end-hour");
+                                            }
+                                        }
+                                    }) as Box<dyn FnMut()>);
+
+                                    // Set up both listeners
+                                    let _ = setup_document2.add_event_listener_with_callback(
+                                        "visibilitychange",
+                                        visibility_callback.as_ref().unchecked_ref()
+                                    );
+                                    
+                                    let _ = print_window.add_event_listener_with_callback(
+                                        "focus",
+                                        focus_callback.as_ref().unchecked_ref()
+                                    );
+                                    
+                                    visibility_callback.forget();
+                                    focus_callback.forget();
+
+                                    // Now trigger the print dialog
+                                    let _ = print_window.print();
+                                }) as Box<dyn FnMut()>);
+
+                                let _ = window.set_timeout_with_callback_and_timeout_and_arguments_0(
+                                    print_callback.as_ref().unchecked_ref(),
+                                    100 // 100ms delay to see the content change
+                                );
+                                print_callback.forget();
+                            }
+                        }
+                    }
+                }
+            }
+        })
+    };
 
     html! {
         <div class="modal-backdrop print-preview-modal-backdrop" onclick={backdrop_click}>