[REACT] Calendar Print feature not working on Chrome browser

[alexskv4]

Hello,
I am currently trying to make use of Calendar's print feature, but have run into an issue.
The calendar print button successfully launches print dialog in Firefox, but in Chrome, the print dialog never comes up. There are no console errors.

I am on the latest Chrome version

I am running into this issue both in my application, and also in the print demo: https://bryntum.com/products/calendar/examples/print/

Is this a known issue, or is a special configuration needed to get print working on chrome?

Thanks,
Alex

[mats]

Works fine here on my MacOS with latest Chrome - what OS are you using? Any chance you can share a small video?

[alexskv4]

Thank you for the quick reply, I actually fixed the original issue, can confirm it works on both Chrome and Firefox now. (Some extensions messing with print output.)

I do have another question though.

Is there a way to include the resource name / image in the print output? My main calendar view is ResourceView, and when printing, it is difficult to tell which calendar corresponds to which resource.

[tasnim]

Hi Alex,

Could please you share a video of the behavior you're seeing?

[Animal]

It appears that ResourceView needs special handling when printing

https://github.com/bryntum/support/issues/11219

Probably each subview should be printed in series running down the document.

[alexskv4]

Hey there, just thought I'd follow up with what I did in order to get it working.

For our uses, we prefer resourceView to render vertically down the document anyways, so there are certain styles I have applied to get that working:

.b-panel-content {
    --day-length: unset !important;
  }
  .b-cal-event-body .b-cal-event-desc {
    width: 100%;
  }
  .b-dayview-day-container .b-calendar-cell .b-cal-event {
    background-color: white !important;
  }
  .b-resourceview-content {
    flex-flow: column !important;
    justify-content: start !important;
    height: 100% !important;
  }
  .b-resourceview-content > *.b-resourceview-resource {
    margin: 0;
    flex: unset !important;
    height: fit-content !important;
  }
  // THESE ARE REQUIRED TO COLLAPSE CALENDARS TO THEIR MINIMUM SIZE

  .b-cal-event {
    white-space: normal;
    font-size: 0.7em;
    height: fit-content;
  }
  .b-cal-event-body {
    align-items: start;
    height: fit-content;
  }
  .b-cal-event-wrap {
    position: relative !important;
  }
  .b-dayview-day-container .b-calendar-cell {
    height: fit-content !important;
    min-width: 0 !important;
  }
  .b-dayview-day-content {
    flex: unset !important;
    height: fit-content;
  }
  .b-panel-content {
    height: fit-content;
    --day-height: unset !important;
  }

Then, print is still blank at this point, so we need a couple more styles to fix the print output.

 .b-calendar .b-print-content .b-print-body .b-print-viewport .b-dayview,
  .b-calendar .b-print-content .b-print-body .b-print-viewport .b-weekview,
  .b-calendar .b-print-content .b-print-body .b-print-viewport .b-monthview {
    flex: unset !important;
  }
  .b-calendar .b-print-content .b-print-body .b-print-viewport header {
    display: unset !important;
  }
  .b-calendar
    .b-print-content
    .b-print-body
    .b-print-viewport
    .b-calendarmixin {
    width: 100%;
  }
  .b-print-content {
    font-size: 80%;
    margin: 0.8em;
    padding: 0.8em;
    line-height: 0.8;
    border-width: 0.8px;
  }

Applying these styles (and a few others for our own preferences, sizing wise etc.) got print working for me with calendar resource view.

I hope this helps

[marcio]

Hey alexskv4,

Thanks for sharing your solution here, and glad that's working for your use case.

If you need any assistance, please don't hesitate to contact us here on the forums.