add a print style sheet

vpprint.css

@@ -0,0 +1,157 @@
+/* Print styles for visual-planner */
+
+@media print {
+
+    /* Hide elements that shouldn't print */
+    #vpnavbar,
+    #vpcalbar {
+        display: none !important;
+    }
+
+    /* Expand grid to full page */
+    body {
+        margin: 0;
+        padding: 0;
+    }
+
+    #printgrid {
+        height: 100%;
+        width: 100%;
+    }
+
+    #vpbox {
+        --navbarheight: 0;
+        --calbarheight: 0;
+    }
+
+    #vpscrollbox {
+        overflow: visible !important;
+        height: 100% !important;
+    }
+
+    #vpgrid {
+        width: 100% !important;
+        height: 100% !important;
+    }
+
+    /* Column mode (months as columns) - force full year to fit */
+    #vpgrid:not(.list) {
+        grid-auto-columns: 7.8% !important;
+        /* Slightly less than 100% / 12 to account for gaps */
+        grid-gap: 1px !important;
+        /* Minimize gaps */
+    }
+
+    /* Row/List mode (months as rows) - force full year to fit */
+    #vpgrid.list {
+        grid-auto-rows: 7.5% !important;
+        /* 1/13th accounting for header row and gaps */
+        height: 100% !important;
+        grid-gap: 1px !important;
+        /* Minimize gaps */
+    }
+
+    /* Ensure colors print */
+    * {
+        -webkit-print-color-adjust: exact !important;
+        print-color-adjust: exact !important;
+        color-adjust: exact !important;
+    }
+
+    /* Prevent page breaks - keep everything on one page */
+    * {
+        break-inside: avoid !important;
+        page-break-inside: avoid !important;
+    }
+
+    /* Scale font size appropriately for printing */
+    #vpgrid {
+        font-size: 9pt !important;
+    }
+
+    /* Reduce padding and margins for compact printing */
+    .vpday {
+        padding: 0.5px !important;
+        overflow: hidden !important;
+        /* Hide overflow events */
+        background-color: hsl(0, 0%, 90%);
+        border-top: 0.3mm solid black;
+        border-right: 0.15mm solid black;
+    }
+
+    .vpnum {
+        margin: 0.05em !important;
+        padding: 0.1em !important;
+        font-size: 8pt !important;
+    }
+
+    .vplabel {
+        margin: 0.5px !important;
+        padding: 0.05em 0.1em !important;
+        font-size: 7pt !important;
+        /* Smaller event text */
+        line-height: 0.9 !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+        /* Truncate long event names */
+    }
+
+    span[ng-if*="location"] {
+        display: none !important;
+    }
+
+    .vphdr {
+        padding: 0.2em !important;
+        font-size: 9pt !important;
+        font-weight: bold !important;
+    }
+
+    /* Limit event label container height */
+    .vpdaylabels {
+        max-height: 100% !important;
+        overflow: hidden !important;
+    }
+}
+
+/* Page size definitions for different paper sizes */
+
+/* A4 Landscape (297mm x 210mm) */
+@media print {
+    @page {
+        size: A4 landscape;
+        margin: 10mm;
+    }
+}
+
+/* A3 Landscape (420mm x 297mm) */
+@media print and (min-width: 400mm) {
+    @page {
+        size: A3 landscape;
+        margin: 15mm;
+    }
+}
+
+/* A2 Landscape (594mm x 420mm) */
+@media print and (min-width: 550mm) {
+    @page {
+        size: 594mm 420mm;
+        margin: 20mm;
+    }
+}
+
+/* A1 Landscape (841mm x 594mm) */
+@media print and (min-width: 800mm) {
+    @page {
+        size: 841mm 594mm;
+        margin: 25mm;
+    }
+}
+
+/* A0 Landscape (1189mm x 841mm) */
+@media print and (min-width: 1100mm) {
+    @page {
+        size: 1189mm 841mm;
+        margin: 30mm;
+    }
+}

vpprint.htm

@@ -6,25 +6,30 @@
 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto|Material+Icons">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
 <link href="vp.png" rel="icon">
+<link rel="stylesheet" type="text/css" href="vpprint.css">
 <style>
-body {
-	font-family: Arial;
-	margin: 0;
-	min-width: 600px;
-	min-height: 400px;
-}
-#printgrid {
-	height: 100vh;
-}
-#vpcalbar.printcalbar {
-	background-color: unset;
-}
-.printcalbar {
-	pointer-events: none;
-}
-.printcalbar .checked {
-	display: none;
-}
+	body {
+		font-family: Arial;
+		margin: 0;
+		min-width: 600px;
+		min-height: 400px;
+	}
+
+	#printgrid {
+		height: 100vh;
+	}
+
+	#vpcalbar.printcalbar {
+		background-color: unset;
+	}
+
+	.printcalbar {
+		pointer-events: none;
+	}
+
+	.printcalbar .checked {
+		display: none;
+	}
 </style>
 <title>Print</title>
 </head>