feat(calendar): add calendar print option

src/app/calendar-app/calendar-app.component.html

@@ -131,6 +131,11 @@ <h3 class="sideNavHeader">Calendar Menu</h3>
                 <p mat-line>Settings</p>
             </mat-list-item>
 
+            <mat-list-item id="printCalendarMenuButton" mat-button (click)="printCalendar()" class="calendarMenuButton">
+                <mat-icon mat-list-icon svgIcon="printer"></mat-icon>
+                <p mat-line>Print Calendar</p>
+            </mat-list-item>
+
             <a mat-list-item target="_blank" href="https://help.runbox.com/using-a-calendar-client-with-caldav/" class="calendarMenuButton">
                 <mat-icon mat-list-icon svgIcon="sync"></mat-icon>
                 <p mat-line>CalDAV Sync Guide</p>
@@ -198,7 +203,7 @@ <h3 class="sideNavHeader">Calendar Menu</h3>
     </mat-sidenav>
 
     <mat-sidenav-content>
-        <mat-toolbar>
+        <mat-toolbar class="calendarToolbar">
             <button mat-icon-button (click)="sidemenu.toggle()">
                 <mat-icon svgIcon="menu"></mat-icon>
             </button>
@@ -221,6 +226,16 @@ <h3 class="sideNavHeader">Calendar Menu</h3>
                 </ng-container>
 
                 <ng-container *ngTemplateOutlet="viewModeButtons"></ng-container>
+
+                <button mat-icon-button
+                    id="printCalendarToolbarButton"
+                    class="calendarToolbarButton"
+                    matTooltip="Print calendar"
+                    aria-label="Print calendar"
+                    (click)="printCalendar()"
+                >
+                    <mat-icon svgIcon="printer"></mat-icon>
+                </button>
             </div>
 
             <ng-template #mobileHeader>
@@ -237,7 +252,7 @@ <h3 class="sideNavHeader">Calendar Menu</h3>
             </ng-template>
         </mat-toolbar>
 
-        <div [ngSwitch]="view">
+        <div class="calendarPrintArea" [ngSwitch]="view">
           <app-calendar-overview
             *ngSwitchCase="RunboxCalendarView.Overview"
             [events]="shown_events"

src/app/calendar-app/calendar-app.component.spec.ts

@@ -213,6 +213,10 @@ END:VCALENDAR
         component = fixture.componentInstance;
     });
 
+    afterEach(() => {
+        document.body.classList.remove('calendar-printing');
+    });
+
     it('should display calendars', () => {
         expect(component).toBeTruthy();
         component.calendarservice.syncCaldav();
@@ -228,6 +232,30 @@ END:VCALENDAR
         expect(icon.style.color).toBe('pink');
     });
 
+    it('should display a calendar print option', () => {
+        fixture.detectChanges();
+
+        const toolbarButton = fixture.debugElement.nativeElement.querySelector('#printCalendarToolbarButton');
+        const menuButton = fixture.debugElement.nativeElement.querySelector('#printCalendarMenuButton');
+
+        expect(toolbarButton).toBeDefined();
+        expect(menuButton).toBeDefined();
+        expect(menuButton.innerText).toContain('Print Calendar');
+    });
+
+    it('should print the calendar using print mode styles', () => {
+        const print = spyOn(window, 'print');
+
+        component.printCalendar();
+
+        expect(document.body.classList.contains('calendar-printing')).toBe(true);
+        expect(print).toHaveBeenCalled();
+
+        window.dispatchEvent(new Event('afterprint'));
+
+        expect(document.body.classList.contains('calendar-printing')).toBe(false);
+    });
+
     it('should display events', () => {
         mockData['events'] = simpleEvents;
         component.calendarservice.syncCaldav(true);

src/app/calendar-app/calendar-app.component.ts

@@ -100,6 +100,12 @@ export class CalendarAppComponent implements OnDestroy {
     shown_events: RunboxCalendarEvent[] = [];
 
     prefGroup = DefaultPrefGroups.Global;
+    private readonly calendarPrintClass = 'calendar-printing';
+
+    private readonly clearCalendarPrintMode = (): void => {
+        document.body.classList.remove(this.calendarPrintClass);
+        window.removeEventListener('afterprint', this.clearCalendarPrintMode);
+    };
 
     constructor(
         public  calendarservice: CalendarService,
@@ -164,6 +170,7 @@ export class CalendarAppComponent implements OnDestroy {
 
     ngOnDestroy() {
         clearInterval(this.viewRefreshInterval);
+        this.clearCalendarPrintMode();
     }
 
     addEvent(on?: Date): void {
@@ -328,6 +335,13 @@ export class CalendarAppComponent implements OnDestroy {
         });
     }
 
+    printCalendar(): void {
+        document.body.classList.add(this.calendarPrintClass);
+        window.removeEventListener('afterprint', this.clearCalendarPrintMode);
+        window.addEventListener('afterprint', this.clearCalendarPrintMode);
+        window.print();
+    }
+
     setView(view: RunboxCalendarView): void {
         this.view = view;
         if (this.settings.lastUsedView !== view) {

src/styles.scss

@@ -1392,6 +1392,57 @@ app-calendar-app-component mat-nav-list button {
     }
 }
 
+@media print {
+    body.calendar-printing {
+        overflow: visible !important;
+
+        rmm-headertoolbar,
+        #mainMenuContainer,
+        app-calendar-app-component mat-sidenav,
+        app-calendar-app-component .mat-drawer-backdrop,
+        app-calendar-app-component .calendarToolbar,
+        app-calendar-app-component .add-new-event {
+            display: none !important;
+        }
+
+        app-calendar-app-component,
+        app-calendar-app-component mat-sidenav-container,
+        app-calendar-app-component mat-sidenav-content,
+        app-calendar-app-component .mat-drawer-content,
+        app-calendar-app-component .calendarPrintArea {
+            display: block !important;
+            position: static !important;
+            height: auto !important;
+            min-height: 0 !important;
+            overflow: visible !important;
+            transform: none !important;
+            width: 100% !important;
+        }
+
+        app-calendar-app-component mat-sidenav-container {
+            bottom: auto !important;
+            left: 0 !important;
+            margin: 0 !important;
+            right: auto !important;
+            top: 0 !important;
+        }
+
+        app-calendar-app-component mat-sidenav-content,
+        app-calendar-app-component .mat-drawer-content {
+            margin: 0 !important;
+        }
+
+        app-calendar-app-component .cal-month-view,
+        app-calendar-app-component .cal-week-view,
+        app-calendar-app-component .cal-day-view {
+            break-inside: avoid;
+            page-break-inside: avoid;
+            print-color-adjust: exact;
+            -webkit-print-color-adjust: exact;
+        }
+    }
+}
+
 .calendarTitle {
     font-size: 20px !important;
     font-weight: bold;