How does google calendar print work?

Question

I'm building a calendar in ASP.NET using Jquery, And I'm trying to implement Print. I can print simple html or images with no problem. But I can't figure out how to build a print like google calendar print.

When you press Print in "Calendar Print Preview" the print dialog that pops up has more options (cross browsers), Some how this print dialog is different from a simple browser print, And they seem to have more control like setting landscape print for example.

Any one knows how to implement this?

Thanks

Answer 1

It is just a popup window with some options which are posted to server-side script which generates a .pdf document.

You could use

<link media="print" rel="stylesheet" type="text/css" href="main.css" />

to do something similar without using serverside script which generates image/pdf.

Note the media="print", that means that given stylesheet is going to be used when you print the page. You can specify custom css rules (like hide navigation, make calendar look nice on paper, etc) there.

EDIT:

In response to comment. If you convert the html to pdf it will look exactly the same. When you submit that form in google calendar they take all those options and generate pdf from them. If you chose landscape, they will rotate the page and recalculate everything so that it fits the page. To simplify it for you, they draw an image on server-side according to the options you submit and put it into pdf.

It's not that simple if you haven't done it before. I would play around with css and JavaScript on that print page and see if I can mimic something like that by switching between landscape and portrait using JS and css rules (make 2 buttons - "landscape", "portrait", when user clicks on them you change css rules for your calendar so that it fits given paper size). Again if you are not familiar with css then it will be hard.

There is no definite answer, the path google took is very nice, but it's not that simple to reproduce.

More info in comments.