Print Eventcalendar missing event colors

Event calendars & schedulers
1

Hi,

Having properly setup the printing requirements, I’m able to print my Eventcalendar, but the event colors do not show in the print-preview or printed page (printer or PDF output).

Desktop output:

desktop
desktop536×574 6.01 KB

Print-preview/PDF output:

pdf
pdf515×555 8.33 KB

As you can see the event colors are missing and I am importing the Mobiscroll print sass file (import ‘@mobiscroll/print/dist/css/mobiscroll.scss’).

The versions I’m using.

“@mobiscroll/react”: “^5.27.1”
“@mobiscroll/print”: “^5.27.1”
“react”: “^18.2.0”

Thank you.

2

Hi Sebastien!

Browsers in general do not support background colors in their print module, unless you enable it in the print dialogs settings (I attach a screenshot how to enable it on Chrome).

print
print982×633 35.2 KB

If other customizations needed, use @media print{...} queries. And this Stack Overflow topic could also help.

3

Thanks Istvan, but I must be missing something here.

If I print this demo of yours:
image

I get the following PDF containing events with the correct color outlines:

image
image749×515 19.9 KB

Are there some custom styles for this demo? Should I be building my event objects with background color or border color attributes? Are the html element class names different when using the print mode, and can I target them manually?

Thank you.

4

Hi!

  • If you are using custom events rendering try to add a border to the events.

  • Make sure you do not get any errors with the print css import.

Let me know if this helps.

5

Hi,

Ok so the solution was to remove my existing renderScheduleEventContent which was there to remove certain elements of the event (e.g. the ‘All Day’ label). After removing this, the print output worked with colored event borders.

Then to remove the ‘All Day’ label, I used this simple CSS:

.mbsc-schedule-event-range {
	display: none;
}

As a side note, interestingly it was the mbsc-schedule-event-background-static class on the event’s HTML structure that caused the borders not to show. Changing this class to mbsc-schedule-event-background (removing the ‘-static’ portion) then allowed the borders to show.

Cheers!