Scheduler - Export to PDF - Header on multiple pages

[Fkrohn]

Hi there,

I am using the scheduler app in timeline-view and right now i am trying to make use of the “exportToPDF”-function. Basically this works pretty good, but with a single export i could get 4-5 pages in landscape mode. This is how i use it:

scheduler.exportToPDF({
	name: "planer.pdf",
	format: "A4",
	orientation: "landscape",
	zoom: 1,
	header: str_style, /*<- Some styling for events*/
	additional_settings: {
		format: "A4",
		landscape: true
	}
});

There are 2 issues, which i do not know how to fix:

1. The header (Months & Weeks) needs to be on every single one of these pages - how can i do that?
   

   

2. Sometimes the rows are split between two pages… is there a way to workaround?
   

   

I would appreciate any help. Thanks in advance.

[Siarhei]

Hello @Fkrohn,

Regarding this part:

The header (Months & Weeks) needs to be on every single one of these pages - how can i do that?

You can do it with custom styles, that will freeze the navigation section, so it will be displayed on every page. In addition, you will have to some top padding for the data area, to push them from the frozen nav line(or the top of the data area will be hidden).

The styles may look like follows(still can be modified, but shows the main idea):

  var styles = `
        <style>
        .dhx_cal_header {
            position: fixed;
            margin-top: 20px;
        }
        .dhx_cal_data {
            margin-top: 60px;
        }
        </style>
        `;

Here is a demo:
https://snippet.dhtmlx.com/3rzund1f

Regarding this part:

Sometimes the rows are split between two pages… is there a way to workaround?

There is no built-in option for that, but as a workaround you can manually change the height of sections in order to prevent the splitting between pages, like follows:

     // Change the dy in order to avoid splitting sections
    scheduler.getView('timeline').dy = 63.4;
    scheduler.setCurrentView(); // redraws scheduler dy
   scheduler.exportToPDF({...
    // Change the dy back to default
    scheduler.getView('timeline').dy = 50;
    scheduler.setCurrentView(); // redraws scheduler dy

Here is a demo:
https://snippet.dhtmlx.com/odhr5yas

So as a workaround that will solve your issues, you can combine the two methods from above.

Kind regards

[Fkrohn]

Hi @Siarhei,

thank you for your ideas and the workaround to place the header properly on every page - This works!

Problem now is the padding between the header- and data section. In your example it does not work either.
Just change the margin-top to 30px and you see that “Apartment 4” on second page is hidden behind the header… plus the last “Apartment 4” gets overflow hidden at the end of the table.

I played around but could not figure out a way to fix this. Do you have any other ideas?

Kind regards

[Siarhei]

Hello @Fkrohn,

Regarding this part:

Just change the margin-top to 30px and you see that “Apartment 4” on second page is hidden behind the header…

As I understand, you mean changing margin of the dhx_cal_header (20 to 30) - in this case, you also should increase margin for the dhx_cal_data(60 to 70), in order to avoid the overflow on the second page.

So the top section of the data won’t be hidden by the header.

Regarding this part:

plus the last “Apartment 4” gets overflow hidden at the end of the table.

You can fix it with following styles:

        .dhx_cal_container{
            padding-bottom: 60px;
        }

Here is an updated demo:
https://snippet.dhtmlx.com/vl9lmpi5

Kind regards,

[Fkrohn]

Hi @Siarhei,

thank you and sorry for the confusion – I actually meant the margin of dhx_cal_data (60 to 30).

Point is, that in your updated demo “Apartment 24” is missing in the exported file. It is clearly hidden behind the header on the second page. See here: planer.pdf (45.8 KB)

This on the other hand works perfectly for the problem with overflow at the end of the table:

.dhx_cal_container{
    padding-bottom: 60px;
}

Kind regards