Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Thanked 0 Times in 0 Posts

    Exclamation Seeking help with printing component/script

    hey folks

    i am using FullCalendar to display schedules. the schedule shows great on the screen, but when i want to print - its really bad. even their print CSS doesnt do much.

    sample of printed version: http://img31.imageshack.us/img31/8441/databasew.jpg

    i am looking for some kind of a script to "capture" what is on the screen and print that - maybe into PDF or something. kind of like the aviary plugin on Firefox does (except that its manual...)
    i know there are some server side components but maybe client side is the way to go??

    anything like this exist??


  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Thanked 4,325 Times in 4,291 Posts
    I think you could just fix the CSS and get a reasonable printed output.

    Be much simpler than trying to convert that to some other format.

    You mentioned "even their print CSS doesnt do much". I didn't see *ANY* "print CSS" on that calendar, at all.

    Just as an example: On a calendar that I created, I have this:
    <style type="text/css">
    @media screen {
    	body { font-size: 12pt; }
    	td { font-size: 12pt; }
    	.screenonly { display: block; }
    	input { font-size: 10pt; width: 78px; }
            input.mem { font-size: 10pt; background-color: pink; width: 78px; }
    	table { width: 980px; }
    }	}
    @media print {
    	body { font-size: 8pt; }
    	td { font-size: 8pt; }
    	.screenonly { display: none; }
    	input { visibility: hidden; font-size: 8pt; width: 60px; }
            input.mem { visibility: visible; background-color: pink; font-size: 8pt; width: 60px; }
    	table { width: 900px; }
    You see it? Just to pick one example: On the screen, the <table> for the calendar is 980 pixels wide; when printed, it is only 900 pixels wide. And notice especially how the font size used is changed.

    And look at the class "screenonly": This allows me to have components on the screen (such as explanatory text) that I just put into containers such as <div class="screenonly"> and they simply disappear completely when printed.

    I think if you put a little work into the CSS, differentiating between screen and print, you could make it work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts