ExportToPdf and custom css

Scheduler Javascript
#1

Hello,

We are trying out the much anticipated new export to pdf feature in v4.1. The version in v4.0 and earlier did not handle custom rendering of event very good.

The new ExportToPdf looks to be much better and correctly preserves the custom “layout” of the cell. However it fails to render the correct color on our events.

We have controlled the color by setting custom css classes on the event body elements. Is there a way to communicate the custom css to the rendering server?

Is there an alternative way to apply custom color schemes to events, and have it export to pdf properly?

–

Thor Arne Johansen
Oppad AS

#2

I’m interested too!

#3

It can preserve colors. To have this functionality you need to provide the stylesheet with custom css classes

scheduler.exportToPDF({ name:"calendar.pdf", head:'<link rel="stylesheet" href="http://mysite.com/custom.css" type="text/css">' });

or provide the same css classes through the styles tag

scheduler.exportToPDF({ name:"calendar.pdf", head:'<style>... custom css classes here ...</style>' });

#4

I set the events CSS classes using the scheduler.templates.event_class function. I tried your proposed solution but it hasn’t worked for me, the events keep showing with the default colours: i.imgur.com/8CnVRoC.png

I tried:

<button type="button" class="btn btn-default btn-xs" onClick="scheduler.exportToPDF({ name:'CalendariPerNecessitat.pdf', head:'<link rel=\'stylesheet\' href=\'http://server/app/css/planificador.css\' type=\'text/css\'>' });">
and:

<button type="button" class="btn btn-default btn-xs" onClick="scheduler.exportToPDF({ name:'CalendariPerNecessitat.pdf', head: '<style>.dhx_cal_event_line.ev_residents {background-color: #C3FF69 !important;color: black !important;}.dhx_cal_event_line.ev_altres{ background-color: #FF9933 !important; color: black !important;}.dhx_cal_event_line.ev_contracte{ border: 1px solid #FF002F;}</style>' });">

#5

Sorry, was a my typo :frowning:

It must be “header”, not “head”

onClick="scheduler.exportToPDF({ name:'CalendariPerNecessitat.pdf', header:'<link rel=\'stylesheet\' href=\'http://server/app/css/planificador.css\' type=\'text/css\'>' });">

#6

Ouch, same result, default colours :_(

Some tip to debug?

#7

Please try to run the attached sample - it uses the same approach and it works for me.
07_online_styles.zip (1.32 KB)

#8

Finally I’ve found the problem. It works with a CSS accessible from Internet, but not if I have the custom CSS in a Intranet (that’s my case). I’ve seen in the api.js that it works with the URL ’ export.dhtmlx.com/scheduler’, so I imagine it tries to get the CSS and it can’t.

How can I use it in a Intranet/Local environment?

Thx

#9

If solution with global http reference doesn’t work for you, then you can embed all styles in the command

scheduler.exportToPNG({ header:"<style>.tier1{ background: red; color:white;}</style>" });

#10

Thx, it worked. It’s annoying because we will have to manually sync the CSS file with the exportToPNG style, I hope you will support Intranet solutions in a next future.