When clicking the ‘Print’ button the grid lines between each day don’t show and the test shows as light gray for a calendar event when I print to a printer or print as PDF. Is this a fix that can be done in the HTML/CSS code or is this due to the print settings itself and nothing can be done about it?
I am providing the HTML/CSS code and a couple of screenshots: one of what the page looks like and what it looks like when printing to PDF.
What the page in the app looks like currently:
After clicking Print button and what it looks like printing to PDF. No grid lines and text is gray and a little hard to read
HTML
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<h2 class="mr-3">Calendar</h2>
<lf-timezone-selector
*ngIf="jwt"
(changed)="timezoneChanged($event);" [(ngModel)]="timezone" ngDefaultControl>
</lf-timezone-selector>
</div>
<div class="d-flex">
<button class="btn btn-outline-secondary" (click)="print()">
Print
</button>
<lf-google-signin *ngIf="jwt"
[selectedCalendarName]="calendarName"
(sendSignOut)="handleSignOut()"
(sendSignIn)="handleSignIn()"
(showCalendarSelectorDialog)="showCalendarSelectorDialog()"
></lf-google-signin>
</div>
</div>
<div class="card-body text-center">
<full-calendar class="lf-full-calendar"
id="calendar-container"
#calendarComponent
[options]="calendarOptions"></full-calendar>
</div>
</div>
<mat-tab-group>
<mat-tab label="Current Invoices">
<ng-template matTabContent>
<lf-unit-invoices-table #unitOutstandingInvoicesTable
(emitReloadUnitBalance)="this.emitReloadUnitBalance.emit($event);"
[unitId]="this.unitId"
[context]="'unpaid'"
></lf-unit-invoices-table>
</ng-template>
</mat-tab>
<mat-tab label="Recurring Templates">
<lf-unit-recurring-charges-table [unitId]="this.unitId"></lf-unit-recurring-charges-table>
</mat-tab>
<mat-tab label="Account History">
<ng-template matTabContent>
<div *ngIf="hasUnitReadAccess" class="px-4 pt-2">
<mat-slide-toggle (change)="onCurrentOwnerToggle($event)">
<span class="text-secondary">Current Owner</span>
<i matTooltip="Toggle viewing account history for current owner, or for all
owners." class="fa fa-info-circle p-1 text-secondary"></i>
</mat-slide-toggle>
</div>
<lf-unit-account-history-table
#unitAccountHistory
[unitId]="this.unitId"></lf-unit-account-history-table>
</ng-template>
</mat-tab>
<mat-tab label="All Invoices">
<ng-template matTabContent>
<lf-unit-invoices-table #unitAllInvoicesTable
(emitReloadUnitBalance)="this.emitReloadUnitBalance.emit($event);"
[unitId]="this.unitId"
[context]="'all'"
></lf-unit-invoices-table>
</ng-template>
</mat-tab>
<mat-tab label="All Payments">
<ng-template matTabContent>
<lf-unit-payments-table [unitId]="this.unitId"></lf-unit-payments-table>
</ng-template>
</mat-tab>
<mat-tab *ngIf="jwt.superUser">
<ng-template mat-tab-label>
Credits
<app-super-star></app-super-star>
</ng-template>
<ng-template matTabContent>
<lf-unit-credits-table
(emitReloadUnitBalance)="this.emitReloadUnitBalance.emit($event);"
[unitId]="this.unitId"
></lf-unit-credits-table>
</ng-template>
</mat-tab>
</mat-tab-group>
</div>
CSS
:host {
.lf-full-calendar {
max-width: 1100px;
display: block;
margin-left: auto;
margin-right: auto;
}
.google-calendar-title {
font-size: 12px;
}
.google-calendar-list {
display: flex;
}
.google-calendar-container {
display: flex;
justify-content: space-between;
max-width: 1100px;
select {
background-color: #FFFFFF;
font-size: 12px;
min-width: 200px;
}
.spinner {
height: 30px;
margin-right: 5px;
}
}
}
::ng-deep {
a.fc-daygrid-event {
color: #ffffff;
}
.fc-daygrid-dot-event:hover {
color: black;
}
}