Issue with printing

Event calendars & schedulers
1

I have followed all the instructions on https://docs.mobiscroll.com/5-24-1/angular/eventcalendar#print-module but I keep getting following error:
ERROR TypeError: Cannot read properties of undefined (reading ‘print’)

2

Hello @Rami_Nassar :wave:

I checked your download logs and I see, you installed Mobiscroll from a custom package that was built on our Download Builder.

But, you installed the Print module from NPM and that’s the problem.

So, the solution would be simple, just follow this guide :point_down:

When your Mobiscroll package is created with the Download Builder and you have access to the Print Module, you can choose to include it in the built package. In this case you will need make sure you checked the print module before downloading the package from the download page. After installing your downloaded package, the Print Module will be available for import. In case it was downloaded with the download builder, the Print Module needs to be imported from the generated package.

3

Hello @Zsombor

I followed all the instructions but still the same error, even I took the demo as it is from demo page and the error is consistent.

4

Hi @Rami_Nassar,

But you still didn’t include the Print module in your custom package (I checked it from your download logs). So, make sure to do that :point_down:
Example

5

Actually I’m using NPM in my project and I have installed both packages:
{
…,
“@mobiscroll/angular”: “^5.27.1”,
“@mobiscroll/print”: “^5.27.1”,
…
}

6

Thanks for clarifying :+1:

In this case, can you share some of your relevant code where you try to use the Print module? - you can send it here or through the support channels.

7

Sharing a code will be so complex for me as everything has been linked with an existing project which includes API’s, resolvers, and popups. etc
would it be possible to share with me any basic .zip file for a running project with this functionality so I can compare and see if it would work on my end?

Thanks in advance for your cooperation.

8

Hi Rami, here’s a basic example using print:

Component:

import { Component, ViewChild } from '@angular/core';
import { MbscEventcalendar } from '@mobiscroll/angular';
import { print } from '@mobiscroll/print';

@Component({
  selector: 'my-component',
  templateUrl: './app.component.html',
})
export class MyComponent {
  @ViewChild('myCal', { static: false })
  myCal!: MbscEventcalendar;

  myModules = [print];

  print() {
    this.myCal.print();
  }
}

Template:

<mbsc-eventcalendar [modules]="myModules" #myCal></mbsc-eventcalendar>
<mbsc-button (click)="print()">Print</mbsc-button>

The error you’re having actually indicates that you don’t have the calendar instance, as it tries to call print on undefined.

If the above code does not help, please share you’re code on how are you setting the calendar instance and calling the print method.

9

Thanks, worked like charming.

One issue though, it doesn’t print all columns and row, it just a screenshot for a portion of what displayed on the page and for one page only. is that all what print module can do?

10

Glad to hear that helped :wink:

That’s right, the print module will only show as many columns/ rows as can fit on a page.
Also, I’m not sure what you mean by for one page only, so can you clarify?

11

what I mean by one page, if I have hundreds of rows it will print only the number of rows & columns which fits one page only… in other words it will not print multiple pages base on the number of rows, kindly note I use timeline with resources.

12

Thank you for bringing this to my attention and I apologize if my previous response was unclear.

Let me explain this in more detail: When using the print module, it will print as many rows as possible on one page. If there are more rows than can fit on one page, the remaining rows will be printed on the next page. However, if you have multiple columns and they do not fit on one page, they will be cut off since it’s not possible to print another page beside the one that has already been printed.

I hope this explains :wink:

13

image
image1048×750 63.1 KB

Thank you Zsombor.
Kindly see the screenshot I’m sharing here, in this use case I have 106 rows but the print module produces only one page, not all columns appear (which understood based on your response) but also only 17-18 rows are printed (one page only).
I noted that it seems taking a screenshot of the displayed page including the header template as well as the scrollers (horizontal and vertical). plus css and event coloring are not applied.

14

Quick note: the resources (3DP CONVEYING SYSTEM, CEMENT SILO, 3DP MIXING PUM, etc. ) are considered as rows, not columns. Columns are the months and different groups like: Description, Group Code, Device Code, etc.

Regarding printing only a few rows related problem: you are welcome to contact us on the chat or you can send us an email at support@mobiscroll.com and I’m happy to look into this use case.

Also, the print styling is a bit different than the screen styling. In case of print media, the events don’t have background color, instead they should have a border with the same color. That’s the default for the eventcalendar.