event height resizing when scheduler pdf export

[sohee]

Hi

I have a question about scheduler's pdf export style.

I am using eventTemplate to show multiple lines of additional information in one event.

 

And when exporting to pdf, using .k-pdf-export to increase the font size of additional information in the event.

.k-pdf-export .k-scheduler .scheduler-info
 {
    font-size: 1.2em !important;
 }

 

And I added the code below to increase not only the font size, but also the height of the scheduler table and the height of each event.

.k-pdf-export div.k-event
 {
   height: 110px !important;
 }

.k-pdf-export .k-scheduler-monthview .k-scheduler-table td
 {
   height: 130px !important;
 }

 

As a result, the height size increased as desired, but the height gap between the events did not widen, resulting in an unnatural appearance (see attached file).

 

When exporting in pdf, how can I increase the font size, event height, table height, and the interval between events to be constant as I want?

It seems to me that I need to modify the "top" property(css style) of each event div in the scheduler.

Anyway, I would be grateful if you could tell me how to do it.

 

[Martin]

Hello Sohee,

Thank you for the provided resources. 

As I was unable to reproduce the layout from the screenshot, could you please provide a Stackblitz or a Dojo example that replicates your Scheduler? I will be able to debug it and test a possible solution.

Looking forward to your reply.

Regards,
Martin
Progress Telerik

[sohee]

I created a Stackblitz example to help you understand. It is at this link(https://stackblitz.com/edit/js-u7tz95?file=index.html).

 

When exporting pdf, ".k-pdf-export" was used to increase the height of the event, the size of the additional information in the event, and the height of the table td.

 

 

If you look at the attached file titled "When the pdf export style is added (pdf file)", the events are out of range for each day. Is there any way to make this look normal?

[sohee]

 

The link above is wrong and recreated. See this link

[Plamen]

Hi,

Thank you for elaborating the issue.

In such case when the height of the event needs to be set we recommend setting the eventHeight monthview setting and possibly the adaptiveSlotHeight property so that the scheduler could calculate the position of the events correctly. I have added the following setting to the month view setting and the export worked correctly at my side:

               eventHeight: 120,
              adaptiveSlotHeight: true,

Here is a link(https://stackblitz.com/edit/js-j64yxw?file=index.js) to the sample that worked correctly at my side.

If you have further questions please let me know.

Regards,
Plamen
Progress Telerik