From 4cbc495c48a80b57ee78754b5495c0ce40b536d0 Mon Sep 17 00:00:00 2001 From: Connor Johnstone Date: Mon, 8 Sep 2025 14:55:18 -0400 Subject: [PATCH] Add print preview modal with hour range selection MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implements comprehensive print functionality for calendar views: - Print preview modal with live preview and zoom controls - Hour range selection for week view (start/end hours) - Print-specific CSS to hide UI elements and optimize layout - Event repositioning to align with visible time labels - Support for both 30-minute and 15-minute time increments - Mouse wheel zoom functionality in preview 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- frontend/Trunk.toml | 2 +- frontend/index.html | 2 + frontend/print-preview.css | 1174 +++++++++++++++++ frontend/print.css | 302 +++++ frontend/src/components/calendar.rs | 38 +- frontend/src/components/calendar_header.rs | 13 + frontend/src/components/mod.rs | 2 + .../src/components/print_preview_modal.rs | 243 ++++ frontend/src/components/week_view.rs | 8 +- 9 files changed, 1778 insertions(+), 6 deletions(-) create mode 100644 frontend/print-preview.css create mode 100644 frontend/print.css create mode 100644 frontend/src/components/print_preview_modal.rs diff --git a/frontend/Trunk.toml b/frontend/Trunk.toml index 4a5cc48..d1cd971 100644 --- a/frontend/Trunk.toml +++ b/frontend/Trunk.toml @@ -6,7 +6,7 @@ dist = "dist" BACKEND_API_URL = "http://localhost:3000/api" [watch] -watch = ["src", "Cargo.toml", "../calendar-models/src", "styles.css", "index.html"] +watch = ["src", "Cargo.toml", "../calendar-models/src", "styles.css", "print.css", "print-preview.css", "index.html"] ignore = ["../backend/", "../target/"] [serve] diff --git a/frontend/index.html b/frontend/index.html index 2ee499d..9f8c75e 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -6,6 +6,8 @@ + + diff --git a/frontend/print-preview.css b/frontend/print-preview.css new file mode 100644 index 0000000..38136b2 --- /dev/null +++ b/frontend/print-preview.css @@ -0,0 +1,1174 @@ +/* Print Preview Modal Styles */ +.print-preview-modal-backdrop { + z-index: 1100; +} + +.print-preview-modal { + width: 90vw; + max-width: 1200px; + height: 80vh; + max-height: none; + margin: 5vh auto; +} + +.print-preview-body { + display: flex; + gap: 2rem; + height: calc(100% - 60px); /* Account for header */ + padding: 1rem; +} + +.print-preview-controls { + flex: 0 0 250px; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.control-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.control-group label { + font-weight: 600; + color: var(--text-color); + font-size: 0.9rem; +} + +.control-group select { + padding: 0.5rem; + border: 1px solid var(--border-color); + border-radius: 4px; + background: var(--input-background); + color: var(--text-color); + font-size: 0.9rem; +} + +.hour-range-info { + padding: 0.75rem; + background: var(--background-secondary); + border: 1px solid var(--border-color); + border-radius: 4px; + font-size: 0.85rem; + color: var(--text-secondary); +} + +.month-info { + padding: 0.75rem; + background: var(--background-secondary); + border: 1px solid var(--border-color); + border-radius: 4px; + font-size: 0.85rem; + color: var(--text-secondary); +} + +.zoom-display-info { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem; + background: var(--background-secondary); + border: 1px solid var(--border-color); + border-radius: 4px; + font-size: 0.85rem; +} + +.zoom-display-info label { + font-weight: 600; + color: var(--text-color); +} + +.zoom-display-info span { + font-weight: 600; + color: var(--text-color); +} + +.zoom-hint { + color: var(--text-secondary) !important; + font-weight: normal !important; + font-style: italic; +} + +.preview-actions { + display: flex; + gap: 0.5rem; + margin-top: auto; +} + +.preview-actions button { + padding: 0.75rem 1.25rem; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 0.9rem; + font-weight: 600; + transition: all 0.2s ease; +} + +.preview-actions .btn-primary { + background: #3B82F6; + color: white; +} + +.preview-actions .btn-primary:hover { + background: #2563EB; +} + +.preview-actions .btn-secondary { + background: var(--background-secondary); + color: var(--text-color); + border: 1px solid var(--border-color); +} + +.preview-actions .btn-secondary:hover { + background: var(--background-tertiary); +} + +.print-preview-display { + flex: 1; + display: flex; + justify-content: center; + align-items: flex-start; + overflow: hidden; + background: #f5f5f5; + border-radius: 8px; + padding: 2rem; + cursor: grab; +} + +.print-preview-display:active { + cursor: grabbing; +} + +.print-preview-paper { + background: white; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + border-radius: 2px; + /* transform: scale() is now applied dynamically via inline style */ + width: 11in; /* Actual letter width */ + min-height: 8.5in; /* Letter height */ + overflow: hidden; + position: relative; + margin: 0 auto; +} + +.print-preview-content { + padding: 1rem; + height: 100%; + overflow: hidden; +} + +/* Hide UI elements in preview */ +.print-preview-paper .app-sidebar, +.print-preview-paper .print-button, +.print-preview-paper .nav-button, +.print-preview-paper .today-button, +.print-preview-paper .time-increment-button, +.print-preview-paper .current-time-indicator-container, +.print-preview-paper .current-time-indicator { + display: none !important; +} + +/* Remove today highlighting in preview */ +.print-preview-paper .calendar-day.today, +.print-preview-paper .week-day-header.today, +.print-preview-paper .week-day-column.today { + background-color: transparent !important; + border-color: #ddd !important; + color: #333 !important; + font-weight: normal !important; +} + +/* Week view hour range filtering in preview - target all possible selector paths */ +/* Hide hours before start hour (0-23) - trying multiple selector paths */ +.print-preview-paper[data-start-hour="1"] .time-grid .time-slot:nth-child(1), +.print-preview-paper[data-start-hour="1"] .week-content .time-slot:nth-child(1), +.print-preview-paper[data-start-hour="1"] .time-slot:nth-child(1) { + display: none !important; +} + +.print-preview-paper[data-start-hour="2"] .time-grid .time-slot:nth-child(-n+2), +.print-preview-paper[data-start-hour="2"] .week-content .time-slot:nth-child(-n+2), +.print-preview-paper[data-start-hour="2"] .time-slot:nth-child(-n+2) { + display: none !important; +} + +.print-preview-paper[data-start-hour="3"] .time-grid .time-slot:nth-child(-n+3), +.print-preview-paper[data-start-hour="3"] .week-content .time-slot:nth-child(-n+3), +.print-preview-paper[data-start-hour="3"] .time-slot:nth-child(-n+3) { + display: none !important; +} + +.print-preview-paper[data-start-hour="4"] .time-grid .time-slot:nth-child(-n+4), +.print-preview-paper[data-start-hour="4"] .week-content .time-slot:nth-child(-n+4), +.print-preview-paper[data-start-hour="4"] .time-slot:nth-child(-n+4) { + display: none !important; +} + +.print-preview-paper[data-start-hour="5"] .time-grid .time-slot:nth-child(-n+5), +.print-preview-paper[data-start-hour="5"] .week-content .time-slot:nth-child(-n+5), +.print-preview-paper[data-start-hour="5"] .time-slot:nth-child(-n+5) { + display: none !important; +} + +.print-preview-paper[data-start-hour="6"] .time-grid .time-slot:nth-child(-n+6), +.print-preview-paper[data-start-hour="6"] .week-content .time-slot:nth-child(-n+6), +.print-preview-paper[data-start-hour="6"] .time-slot:nth-child(-n+6) { + display: none !important; +} + +.print-preview-paper[data-start-hour="7"] .time-grid .time-slot:nth-child(-n+7), +.print-preview-paper[data-start-hour="7"] .week-content .time-slot:nth-child(-n+7), +.print-preview-paper[data-start-hour="7"] .time-slot:nth-child(-n+7) { + display: none !important; +} + +.print-preview-paper[data-start-hour="8"] .time-grid .time-slot:nth-child(-n+8), +.print-preview-paper[data-start-hour="8"] .week-content .time-slot:nth-child(-n+8), +.print-preview-paper[data-start-hour="8"] .time-slot:nth-child(-n+8) { + display: none !important; +} + +.print-preview-paper[data-start-hour="9"] .time-grid .time-slot:nth-child(-n+9), +.print-preview-paper[data-start-hour="9"] .week-content .time-slot:nth-child(-n+9), +.print-preview-paper[data-start-hour="9"] .time-slot:nth-child(-n+9) { + display: none !important; +} + +.print-preview-paper[data-start-hour="10"] .time-grid .time-slot:nth-child(-n+10), +.print-preview-paper[data-start-hour="10"] .week-content .time-slot:nth-child(-n+10), +.print-preview-paper[data-start-hour="10"] .time-slot:nth-child(-n+10) { + display: none !important; +} + +.print-preview-paper[data-start-hour="11"] .time-grid .time-slot:nth-child(-n+11), +.print-preview-paper[data-start-hour="11"] .week-content .time-slot:nth-child(-n+11), +.print-preview-paper[data-start-hour="11"] .time-slot:nth-child(-n+11) { + display: none !important; +} + +.print-preview-paper[data-start-hour="12"] .time-grid .time-slot:nth-child(-n+12), +.print-preview-paper[data-start-hour="12"] .week-content .time-slot:nth-child(-n+12), +.print-preview-paper[data-start-hour="12"] .time-slot:nth-child(-n+12) { + display: none !important; +} + +/* Adding more for brevity - showing pattern for remaining hours */ +.print-preview-paper[data-start-hour="13"] .time-slot:nth-child(-n+13), +.print-preview-paper[data-start-hour="14"] .time-slot:nth-child(-n+14), +.print-preview-paper[data-start-hour="15"] .time-slot:nth-child(-n+15), +.print-preview-paper[data-start-hour="16"] .time-slot:nth-child(-n+16), +.print-preview-paper[data-start-hour="17"] .time-slot:nth-child(-n+17), +.print-preview-paper[data-start-hour="18"] .time-slot:nth-child(-n+18), +.print-preview-paper[data-start-hour="19"] .time-slot:nth-child(-n+19), +.print-preview-paper[data-start-hour="20"] .time-slot:nth-child(-n+20), +.print-preview-paper[data-start-hour="21"] .time-slot:nth-child(-n+21), +.print-preview-paper[data-start-hour="22"] .time-slot:nth-child(-n+22), +.print-preview-paper[data-start-hour="23"] .time-slot:nth-child(-n+23) { + display: none !important; +} + +/* Hide hours after end hour (1-24) */ +.print-preview-paper[data-end-hour="1"] .time-slot:nth-child(n+2), +.print-preview-paper[data-end-hour="2"] .time-slot:nth-child(n+3), +.print-preview-paper[data-end-hour="3"] .time-slot:nth-child(n+4), +.print-preview-paper[data-end-hour="4"] .time-slot:nth-child(n+5), +.print-preview-paper[data-end-hour="5"] .time-slot:nth-child(n+6), +.print-preview-paper[data-end-hour="6"] .time-slot:nth-child(n+7), +.print-preview-paper[data-end-hour="7"] .time-slot:nth-child(n+8), +.print-preview-paper[data-end-hour="8"] .time-slot:nth-child(n+9), +.print-preview-paper[data-end-hour="9"] .time-slot:nth-child(n+10), +.print-preview-paper[data-end-hour="10"] .time-slot:nth-child(n+11), +.print-preview-paper[data-end-hour="11"] .time-slot:nth-child(n+12), +.print-preview-paper[data-end-hour="12"] .time-slot:nth-child(n+13), +.print-preview-paper[data-end-hour="13"] .time-slot:nth-child(n+14), +.print-preview-paper[data-end-hour="14"] .time-slot:nth-child(n+15), +.print-preview-paper[data-end-hour="15"] .time-slot:nth-child(n+16), +.print-preview-paper[data-end-hour="16"] .time-slot:nth-child(n+17), +.print-preview-paper[data-end-hour="17"] .time-slot:nth-child(n+18), +.print-preview-paper[data-end-hour="18"] .time-slot:nth-child(n+19), +.print-preview-paper[data-end-hour="19"] .time-slot:nth-child(n+20), +.print-preview-paper[data-end-hour="20"] .time-slot:nth-child(n+21), +.print-preview-paper[data-end-hour="21"] .time-slot:nth-child(n+22), +.print-preview-paper[data-end-hour="22"] .time-slot:nth-child(n+23), +.print-preview-paper[data-end-hour="23"] .time-slot:nth-child(n+24) { + display: none !important; +} + +/* Ensure the visible hours fit properly */ +.print-preview-paper .week-view-container { + height: auto !important; + overflow: visible !important; +} + +.print-preview-paper .week-content { + height: auto !important; + overflow: visible !important; +} + +.print-preview-paper .time-grid { + height: auto !important; + overflow: visible !important; +} + +/* Scale time slots appropriately in preview */ +.print-preview-paper .time-slot { + height: 60px !important; /* Default for 30-minute mode: 2 × 30px = 60px */ + min-height: 60px !important; + max-height: 60px !important; + border-bottom: 1px solid #ddd !important; + overflow: visible !important; +} + +/* 15-minute mode (quarter-mode) gets more height */ +.print-preview-paper .time-slot.quarter-mode { + height: 120px !important; /* 15-minute mode: 4 slots × 30px = 120px */ + min-height: 120px !important; + max-height: 120px !important; +} + +/* Sub-hour time slot styling */ +.print-preview-paper .time-slot-half { + height: 30px !important; + min-height: 30px !important; + max-height: 30px !important; + border-bottom: 1px dotted #ddd !important; + overflow: visible !important; +} + +.print-preview-paper .time-slot-half:last-child { + border-bottom: none !important; +} + +.print-preview-paper .time-slot-quarter { + height: 30px !important; + min-height: 30px !important; + max-height: 30px !important; + border-bottom: 1px dotted #eee !important; + overflow: visible !important; +} + +.print-preview-paper .time-slot-quarter:last-child { + border-bottom: none !important; +} + +/* Debug: Test if data attributes are working at all */ +.print-preview-paper .time-slot[data-hour] { + border-left: 3px solid blue !important; +} + +.print-preview-paper .time-label[data-hour] { + background-color: yellow !important; +} + +/* Test specific hour targeting */ +.print-preview-paper .time-slot[data-hour="0"] { + border-left: 3px solid red !important; +} + +.print-preview-paper .time-label[data-hour="0"] { + background-color: red !important; +} + +/* Use data attributes for precise hour targeting */ +/* Hide hours before start hour - both time slots AND time labels */ +.print-preview-paper[data-start-hour="1"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="1"] .time-label[data-hour="0"] { display: none !important; } + +.print-preview-paper[data-start-hour="2"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="2"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="2"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="2"] .time-label[data-hour="1"] { display: none !important; } + +.print-preview-paper[data-start-hour="3"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="3"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="3"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="3"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="3"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="3"] .time-label[data-hour="2"] { display: none !important; } + +.print-preview-paper[data-start-hour="4"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="4"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="4"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="4"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="4"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="4"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="4"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="4"] .time-label[data-hour="3"] { display: none !important; } + +.print-preview-paper[data-start-hour="5"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="5"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="5"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="5"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="5"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="5"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="5"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="5"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="5"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="5"] .time-label[data-hour="4"] { display: none !important; } + +.print-preview-paper[data-start-hour="6"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="6"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="6"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="6"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="6"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="6"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="6"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="6"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="6"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="6"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="6"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="6"] .time-label[data-hour="5"] { display: none !important; } + +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="6"] { display: none !important; } + +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="7"] { display: none !important; } + +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="8"] { display: none !important; } + +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="9"] { display: none !important; } + +/* Continue for remaining start hours 11-23 with similar patterns */ +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="10"] { display: none !important; } + +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="11"] { display: none !important; } + +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="12"] { display: none !important; } + +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="13"] { display: none !important; } + +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="14"] { display: none !important; } + +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="15"] { display: none !important; } + +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="16"] { display: none !important; } + +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="17"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="16"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="17"] { display: none !important; } + +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="17"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="18"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="16"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="17"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="18"] { display: none !important; } + +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="17"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="18"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="19"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="16"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="17"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="18"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="19"] { display: none !important; } + +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="17"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="18"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="19"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="20"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="16"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="17"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="18"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="19"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="20"] { display: none !important; } + +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="17"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="18"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="19"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="20"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="21"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="16"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="17"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="18"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="19"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="20"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="21"] { display: none !important; } + +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="17"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="18"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="19"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="20"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="21"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="22"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="16"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="17"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="18"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="19"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="20"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="21"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="22"] { display: none !important; } + +/* Complete missing start hours 7, 8, 9, 10, 11, 12 */ +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="0"], .print-preview-paper[data-start-hour="7"] .time-slot[data-hour="1"], .print-preview-paper[data-start-hour="7"] .time-slot[data-hour="2"], .print-preview-paper[data-start-hour="7"] .time-slot[data-hour="3"], .print-preview-paper[data-start-hour="7"] .time-slot[data-hour="4"], .print-preview-paper[data-start-hour="7"] .time-slot[data-hour="5"], .print-preview-paper[data-start-hour="7"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="7"] .time-label[data-hour="0"], .print-preview-paper[data-start-hour="7"] .time-label[data-hour="1"], .print-preview-paper[data-start-hour="7"] .time-label[data-hour="2"], .print-preview-paper[data-start-hour="7"] .time-label[data-hour="3"], .print-preview-paper[data-start-hour="7"] .time-label[data-hour="4"], .print-preview-paper[data-start-hour="7"] .time-label[data-hour="5"], .print-preview-paper[data-start-hour="7"] .time-label[data-hour="6"] { display: none !important; } + +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="0"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="1"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="2"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="3"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="4"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="5"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="6"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="8"] .time-label[data-hour="0"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="1"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="2"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="3"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="4"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="5"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="6"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="7"] { display: none !important; } + +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="0"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="1"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="2"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="3"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="4"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="5"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="6"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="7"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="9"] .time-label[data-hour="0"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="1"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="2"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="3"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="4"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="5"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="6"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="7"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="8"] { display: none !important; } + +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="0"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="1"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="2"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="3"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="4"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="5"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="6"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="7"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="8"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="10"] .time-label[data-hour="0"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="1"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="2"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="3"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="4"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="5"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="6"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="7"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="8"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="9"] { display: none !important; } + +/* Add remaining start hours (13-23) using a more compact format */ +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="0"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="1"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="2"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="3"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="4"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="5"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="6"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="7"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="8"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="9"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="10"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="11"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="12"] { display: none !important; } + +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="0"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="1"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="2"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="3"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="4"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="5"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="6"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="7"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="8"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="9"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="10"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="11"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="12"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="13"] { display: none !important; } + +/* Hide hours after end hour - both time slots AND time labels */ +/* End hour rules for common times */ +.print-preview-paper[data-end-hour="8"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="8"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="23"] { display: none !important; } + +/* Add missing end hour rules */ +.print-preview-paper[data-end-hour="17"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="17"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="17"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="17"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="17"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="17"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="17"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="17"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="17"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="17"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="17"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="17"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="17"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="17"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="19"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="19"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="19"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="19"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="19"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="19"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="19"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="19"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="19"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="19"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="20"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="20"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="20"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="20"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="20"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="20"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="20"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="20"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="18"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="18"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="18"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="18"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="18"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="18"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="18"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="18"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="18"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="18"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="18"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="18"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="21"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="21"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="21"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="21"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="21"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="21"] .time-label[data-hour="23"] { display: none !important; } + +/* Add more end hour rules for hours 9-16, 23, 24 */ +.print-preview-paper[data-end-hour="9"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="9"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="12"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="12"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="22"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="22"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="22"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="22"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="23"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="23"] .time-label[data-hour="23"] { display: none !important; } + +/* Complete all missing end hour rules */ +.print-preview-paper[data-end-hour="1"] .time-slot[data-hour="1"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="2"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="3"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="4"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="5"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="6"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="1"] .time-label[data-hour="1"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="2"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="3"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="4"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="5"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="6"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="2"] .time-slot[data-hour="2"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="3"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="4"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="5"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="6"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="2"] .time-label[data-hour="2"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="3"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="4"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="5"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="6"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="3"] .time-slot[data-hour="3"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="4"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="5"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="6"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="3"] .time-label[data-hour="3"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="4"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="5"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="6"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="4"] .time-slot[data-hour="4"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="5"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="6"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="4"] .time-label[data-hour="4"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="5"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="6"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="5"] .time-slot[data-hour="5"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="6"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="5"] .time-label[data-hour="5"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="6"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="6"] .time-slot[data-hour="6"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="6"] .time-label[data-hour="6"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="7"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="7"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="10"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="10"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="11"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="11"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="13"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="13"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="14"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="14"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="15"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="15"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="16"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="16"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="23"] { display: none !important; } + +/* End hour 24 (midnight next day) hides no hours since it includes the full day */ +.print-preview-paper[data-end-hour="24"] { /* Shows all hours - no additional hiding needed */ } + +/* Event positioning adjustments - shift events up when start hours are hidden */ +/* Each hidden hour = 60px in 30-min mode, 120px in 15-min mode */ + +/* Reposition events to align with visible time labels */ +/* 30-minute mode: Each hidden hour = 60px to shift up */ +.print-preview-paper[data-start-hour="1"] .week-event { transform: translateY(-60px); } +.print-preview-paper[data-start-hour="2"] .week-event { transform: translateY(-120px); } +.print-preview-paper[data-start-hour="3"] .week-event { transform: translateY(-180px); } +.print-preview-paper[data-start-hour="4"] .week-event { transform: translateY(-240px); } +.print-preview-paper[data-start-hour="5"] .week-event { transform: translateY(-300px); } +.print-preview-paper[data-start-hour="6"] .week-event { transform: translateY(-360px); } +.print-preview-paper[data-start-hour="7"] .week-event { transform: translateY(-420px); } +.print-preview-paper[data-start-hour="8"] .week-event { transform: translateY(-480px); } +.print-preview-paper[data-start-hour="9"] .week-event { transform: translateY(-540px); } +.print-preview-paper[data-start-hour="10"] .week-event { transform: translateY(-600px); } +.print-preview-paper[data-start-hour="11"] .week-event { transform: translateY(-660px); } +.print-preview-paper[data-start-hour="12"] .week-event { transform: translateY(-720px); } +.print-preview-paper[data-start-hour="13"] .week-event { transform: translateY(-780px); } +.print-preview-paper[data-start-hour="14"] .week-event { transform: translateY(-840px); } +.print-preview-paper[data-start-hour="15"] .week-event { transform: translateY(-900px); } +.print-preview-paper[data-start-hour="16"] .week-event { transform: translateY(-960px); } +.print-preview-paper[data-start-hour="17"] .week-event { transform: translateY(-1020px); } +.print-preview-paper[data-start-hour="18"] .week-event { transform: translateY(-1080px); } +.print-preview-paper[data-start-hour="19"] .week-event { transform: translateY(-1140px); } +.print-preview-paper[data-start-hour="20"] .week-event { transform: translateY(-1200px); } +.print-preview-paper[data-start-hour="21"] .week-event { transform: translateY(-1260px); } +.print-preview-paper[data-start-hour="22"] .week-event { transform: translateY(-1320px); } +.print-preview-paper[data-start-hour="23"] .week-event { transform: translateY(-1380px); } + +/* 15-minute mode: Each hidden hour = 120px to shift up */ +.print-preview-paper[data-start-hour="1"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-120px); } +.print-preview-paper[data-start-hour="2"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-240px); } +.print-preview-paper[data-start-hour="3"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-360px); } +.print-preview-paper[data-start-hour="4"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-480px); } +.print-preview-paper[data-start-hour="5"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-600px); } +.print-preview-paper[data-start-hour="6"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-720px); } +.print-preview-paper[data-start-hour="7"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-840px); } +.print-preview-paper[data-start-hour="8"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-960px); } +.print-preview-paper[data-start-hour="9"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1080px); } +.print-preview-paper[data-start-hour="10"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1200px); } +.print-preview-paper[data-start-hour="11"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1320px); } +.print-preview-paper[data-start-hour="12"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1440px); } +.print-preview-paper[data-start-hour="13"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1560px); } +.print-preview-paper[data-start-hour="14"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1680px); } +.print-preview-paper[data-start-hour="15"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1800px); } +.print-preview-paper[data-start-hour="16"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1920px); } +.print-preview-paper[data-start-hour="17"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2040px); } +.print-preview-paper[data-start-hour="18"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2160px); } +.print-preview-paper[data-start-hour="19"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2280px); } +.print-preview-paper[data-start-hour="20"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2400px); } +.print-preview-paper[data-start-hour="21"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2520px); } +.print-preview-paper[data-start-hour="22"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2640px); } +.print-preview-paper[data-start-hour="23"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2760px); } + +/* Hide events that are completely outside the visible time range */ +/* Clip events outside the visible hour range using overflow: hidden */ + +/* Allow events to be repositioned without being clipped */ +.print-preview-paper[data-start-hour][data-end-hour] .week-day-column { + overflow: visible !important; + position: relative !important; +} + +/* For events that start before the visible range but extend into it, we need to clip the top */ +/* This is complex to do with pure CSS, so the overflow: hidden on containers should handle most cases */ + +/* Dynamic height adjustments for time-labels and week-days-grid based on visible hours */ +/* Formula: (pixels_per_hour × visible_hours) + 90px extra */ +/* 30-minute mode: 60px per hour, 15-minute mode: 120px per hour */ + +/* Test: Force a specific height override for any data-start-hour/data-end-hour combination */ +.print-preview-paper[data-start-hour][data-end-hour] .time-labels, +.print-preview-paper[data-start-hour][data-end-hour] .week-days-grid, +.print-preview-paper[data-start-hour][data-end-hour] .time-grid, +.print-preview-paper[data-start-hour][data-end-hour] .week-day-column { + min-height: 400px !important; + border: 2px solid red !important; /* Debug border to see if this rule applies */ +} + +/* Height adjustments based on visible hours = end_hour - start_hour */ +/* We'll use CSS custom properties to calculate this dynamically, but for now use specific combinations */ + +/* Common hour ranges - 30-minute mode (60px per hour + 90px extra) */ + +/* 1 hour visible */ +.print-preview-paper[data-start-hour="0"][data-end-hour="1"] .time-labels, +.print-preview-paper[data-start-hour="0"][data-end-hour="1"] .week-days-grid, +.print-preview-paper[data-start-hour="0"][data-end-hour="1"] .time-grid, +.print-preview-paper[data-start-hour="0"][data-end-hour="1"] .week-day-column, +.print-preview-paper[data-start-hour="6"][data-end-hour="7"] .time-labels, +.print-preview-paper[data-start-hour="6"][data-end-hour="7"] .week-days-grid, +.print-preview-paper[data-start-hour="6"][data-end-hour="7"] .time-grid, +.print-preview-paper[data-start-hour="6"][data-end-hour="7"] .week-day-column, +.print-preview-paper[data-start-hour="11"][data-end-hour="12"] .time-labels, +.print-preview-paper[data-start-hour="11"][data-end-hour="12"] .week-days-grid, +.print-preview-paper[data-start-hour="11"][data-end-hour="12"] .time-grid, +.print-preview-paper[data-start-hour="11"][data-end-hour="12"] .week-day-column { min-height: 150px !important; } + +/* 8 hours visible (common work day) - target all height elements */ +.print-preview-paper[data-start-hour="9"][data-end-hour="17"] .time-labels, +.print-preview-paper[data-start-hour="9"][data-end-hour="17"] .week-days-grid, +.print-preview-paper[data-start-hour="9"][data-end-hour="17"] .time-grid, +.print-preview-paper[data-start-hour="9"][data-end-hour="17"] .week-day-column, +.print-preview-paper[data-start-hour="8"][data-end-hour="16"] .time-labels, +.print-preview-paper[data-start-hour="8"][data-end-hour="16"] .week-days-grid, +.print-preview-paper[data-start-hour="8"][data-end-hour="16"] .time-grid, +.print-preview-paper[data-start-hour="8"][data-end-hour="16"] .week-day-column, +.print-preview-paper[data-start-hour="7"][data-end-hour="15"] .time-labels, +.print-preview-paper[data-start-hour="7"][data-end-hour="15"] .week-days-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="15"] .time-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="15"] .week-day-column { min-height: 570px !important; } + +/* 10 hours visible */ +.print-preview-paper[data-start-hour="8"][data-end-hour="18"] .time-labels, +.print-preview-paper[data-start-hour="8"][data-end-hour="18"] .week-days-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="17"] .time-labels, +.print-preview-paper[data-start-hour="7"][data-end-hour="17"] .week-days-grid, +.print-preview-paper[data-start-hour="9"][data-end-hour="19"] .time-labels, +.print-preview-paper[data-start-hour="9"][data-end-hour="19"] .week-days-grid { min-height: 690px !important; } + +/* 12 hours visible */ +.print-preview-paper[data-start-hour="6"][data-end-hour="18"] .time-labels, +.print-preview-paper[data-start-hour="6"][data-end-hour="18"] .week-days-grid, +.print-preview-paper[data-start-hour="8"][data-end-hour="20"] .time-labels, +.print-preview-paper[data-start-hour="8"][data-end-hour="20"] .week-days-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="19"] .time-labels, +.print-preview-paper[data-start-hour="7"][data-end-hour="19"] .week-days-grid { min-height: 810px !important; } + +/* 15-minute mode (120px per hour + 90px extra) */ + +/* 1 hour visible */ +.print-preview-paper[data-start-hour="0"][data-end-hour="1"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="0"][data-end-hour="1"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="6"][data-end-hour="7"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="6"][data-end-hour="7"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="11"][data-end-hour="12"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="11"][data-end-hour="12"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 210px !important; } + +/* 8 hours visible (common work day) */ +.print-preview-paper[data-start-hour="9"][data-end-hour="17"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="9"][data-end-hour="17"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="8"][data-end-hour="16"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="8"][data-end-hour="16"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="15"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="7"][data-end-hour="15"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1050px !important; } + +/* 10 hours visible */ +.print-preview-paper[data-start-hour="8"][data-end-hour="18"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="8"][data-end-hour="18"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="17"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="7"][data-end-hour="17"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="9"][data-end-hour="19"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="9"][data-end-hour="19"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1290px !important; } + +/* 12 hours visible */ +.print-preview-paper[data-start-hour="6"][data-end-hour="18"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="6"][data-end-hour="18"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="8"][data-end-hour="20"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="8"][data-end-hour="20"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1530px !important; } \ No newline at end of file diff --git a/frontend/print.css b/frontend/print.css new file mode 100644 index 0000000..37d29b3 --- /dev/null +++ b/frontend/print.css @@ -0,0 +1,302 @@ +/* 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 diff --git a/frontend/src/components/calendar.rs b/frontend/src/components/calendar.rs index 8608e00..02629c4 100644 --- a/frontend/src/components/calendar.rs +++ b/frontend/src/components/calendar.rs @@ -1,5 +1,5 @@ use crate::components::{ - CalendarHeader, CreateEventModal, EventCreationData, EventModal, MonthView, ViewMode, WeekView, + CalendarHeader, CreateEventModal, EventCreationData, EventModal, MonthView, PrintPreviewModal, ViewMode, WeekView, }; use crate::models::ical::VEvent; use crate::services::{calendar_service::{UserInfo, ExternalCalendar}, CalendarService}; @@ -389,6 +389,15 @@ pub fn Calendar(props: &CalendarProps) -> Html { }) }; + // Handle print calendar preview + let show_print_preview = use_state(|| false); + let on_print = { + let show_print_preview = show_print_preview.clone(); + Callback::from(move |_: MouseEvent| { + show_print_preview.set(true); + }) + }; + // Handle drag-to-create event let on_create_event = { let show_create_modal = show_create_modal.clone(); @@ -457,6 +466,7 @@ pub fn Calendar(props: &CalendarProps) -> Html { on_today={on_today} time_increment={Some(*time_increment)} on_time_increment_toggle={Some(on_time_increment_toggle)} + on_print={Some(on_print)} /> { @@ -563,6 +573,32 @@ pub fn Calendar(props: &CalendarProps) -> Html { }) }} /> + + // Print preview modal + { + if *show_print_preview { + html! { + + } + } else { + html! {} + } + } } } diff --git a/frontend/src/components/calendar_header.rs b/frontend/src/components/calendar_header.rs index a81c6e4..d92543e 100644 --- a/frontend/src/components/calendar_header.rs +++ b/frontend/src/components/calendar_header.rs @@ -14,6 +14,8 @@ pub struct CalendarHeaderProps { pub time_increment: Option, #[prop_or_default] pub on_time_increment_toggle: Option>, + #[prop_or_default] + pub on_print: Option>, } #[function_component(CalendarHeader)] @@ -39,6 +41,17 @@ pub fn calendar_header(props: &CalendarHeaderProps) -> Html { html! {} } } + { + if let Some(print_callback) = &props.on_print { + html! { + + } + } else { + html! {} + } + }

{title}

diff --git a/frontend/src/components/mod.rs b/frontend/src/components/mod.rs index 460b866..f0078e3 100644 --- a/frontend/src/components/mod.rs +++ b/frontend/src/components/mod.rs @@ -13,6 +13,7 @@ pub mod external_calendar_modal; pub mod login; pub mod mobile_warning_modal; pub mod month_view; +pub mod print_preview_modal; pub mod recurring_edit_modal; pub mod route_handler; pub mod sidebar; @@ -32,6 +33,7 @@ pub use event_modal::EventModal; pub use login::Login; pub use mobile_warning_modal::MobileWarningModal; pub use month_view::MonthView; +pub use print_preview_modal::PrintPreviewModal; pub use recurring_edit_modal::{RecurringEditAction, RecurringEditModal}; pub use route_handler::RouteHandler; pub use sidebar::{Sidebar, Theme, ViewMode}; diff --git a/frontend/src/components/print_preview_modal.rs b/frontend/src/components/print_preview_modal.rs new file mode 100644 index 0000000..23c921f --- /dev/null +++ b/frontend/src/components/print_preview_modal.rs @@ -0,0 +1,243 @@ +use crate::components::{ViewMode, WeekView, MonthView}; +use crate::models::ical::VEvent; +use crate::services::calendar_service::{UserInfo, ExternalCalendar}; +use chrono::NaiveDate; +use std::collections::HashMap; +use wasm_bindgen::{closure::Closure, JsCast}; +use yew::prelude::*; + +#[derive(Properties, PartialEq)] +pub struct PrintPreviewModalProps { + pub on_close: Callback<()>, + pub view_mode: ViewMode, + pub current_date: NaiveDate, + pub selected_date: NaiveDate, + pub events: HashMap>, + pub user_info: Option, + pub external_calendars: Vec, + pub time_increment: u32, + pub today: NaiveDate, +} + +#[function_component] +pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html { + let start_hour = use_state(|| 6u32); + let end_hour = use_state(|| 22u32); + let zoom_level = use_state(|| 0.4f64); // Default 40% zoom + + let close_modal = { + let on_close = props.on_close.clone(); + Callback::from(move |_| { + on_close.emit(()); + }) + }; + + let backdrop_click = { + let on_close = props.on_close.clone(); + Callback::from(move |e: MouseEvent| { + if e.target() == e.current_target() { + on_close.emit(()); + } + }) + }; + + let on_start_hour_change = { + let start_hour = start_hour.clone(); + let end_hour = end_hour.clone(); + Callback::from(move |e: Event| { + let target = e.target_dyn_into::(); + if let Some(select) = target { + if let Ok(hour) = select.value().parse::() { + if hour < *end_hour { + start_hour.set(hour); + } + } + } + }) + }; + + let on_end_hour_change = { + let start_hour = start_hour.clone(); + let end_hour = end_hour.clone(); + Callback::from(move |e: Event| { + let target = e.target_dyn_into::(); + if let Some(select) = target { + if let Ok(hour) = select.value().parse::() { + if hour > *start_hour && hour <= 24 { + end_hour.set(hour); + } + } + } + }) + }; + + 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); + + 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 { + "12 AM".to_string() + } else if hour < 12 { + format!("{} AM", hour) + } else if hour == 12 { + "12 PM".to_string() + } else { + format!("{} PM", hour - 12) + } + }; + + html! { +
+
+
+

{"Print Preview"}

+ +
+
+
+ { + if props.view_mode == ViewMode::Week { + html! { + <> +
+ + +
+
+ + +
+
+ {format!("Will print from {} to {}", + format_hour(*start_hour), + if *end_hour == 24 { "12 AM".to_string() } else { format_hour(*end_hour) } + )} +
+ + } + } else { + html! { +
+ {"Will print entire month view"} +
+ } + } + } +
+ + {format!("{}%", (*zoom_level * 100.0) as i32)} + {"(scroll to zoom)"} +
+
+ + +
+
+
+
+
+ { + match props.view_mode { + ViewMode::Week => html! { + + }, + ViewMode::Month => html! { + >} + on_event_click={Callback::noop()} + user_info={props.user_info.clone()} + external_calendars={props.external_calendars.clone()} + /> + }, + } + } +
+
+
+
+
+
+ } +} \ No newline at end of file diff --git a/frontend/src/components/week_view.rs b/frontend/src/components/week_view.rs index 314801c..ff58762 100644 --- a/frontend/src/components/week_view.rs +++ b/frontend/src/components/week_view.rs @@ -438,13 +438,13 @@ pub fn week_view(props: &WeekViewProps) -> Html { // Time labels
{ - time_labels.iter().map(|time| { + time_labels.iter().enumerate().map(|(hour, time)| { let is_quarter_mode = props.time_increment == 15; html! {
+ )} data-hour={hour.to_string()}> {time}
} @@ -701,10 +701,10 @@ pub fn week_view(props: &WeekViewProps) -> Html { > // Time slot backgrounds - 24 hour slots to represent full day { - (0..24).map(|_hour| { + (0..24).map(|hour| { let slots_per_hour = 60 / props.time_increment; html! { -
+
{ (0..slots_per_hour).map(|_slot| { let slot_class = if props.time_increment == 15 {