WordPress.org

Ready to get started?Download WordPress

Forums

Ajax Event Calendar
Print CSS not enabling clean print of calendar (4 posts)

  1. devra
    Member
    Posted 2 years ago #

    I'm in desperate need of some help printing my Ajax Event Calendar. My client has a very full calendar. I have created print CSS to suppress all the areas on the page I don't want. All that is fine, but I can't get the calendar itself to behave.

    I've stripped out all the fancy page CSS and javascript for navigation, and created a page with just the calendar and this print CSS on our test site: work.hollywoodballroom.com/calendar-with-print-css
    At the bottom of the page, I have a javascript print screen link.
    When using the javascript print function,depending on the browser, Saturday's information is either truncated, or all the days' events show, but they moved to the left and are not below their days. Then again, sometimes the events stack on each other and print is covered up.

    In Firefox, I've played with the File > Print function, by shrinking the calendar to 50%. Above 50%, nothing shows up in any of the event boxes. At 50%, the information shows, but is not properly positioned.
    In Chrome, printing the page (right click > print) produces some readable events, but lots of overwritten information, and not all the days are even displayed.

    In IE9 gives me lots of empty boxes, followed by lots of overwritten information.

    I would be grateful for any wisdom the forum has to offer.

    http://wordpress.org/extend/plugins/ajax-event-calendar/

  2. T Klein
    Member
    Posted 2 years ago #

    I've tried everything also, and I consider myself above average with CSS. I can't seem to get anything to work, the calendar likes to resize itself.

    The width needs to be fixed to a landscape style piece of paper.
    The Days of the month/calendar height need to have a fluid height to grow with the events inside them.

    I've tried just putting the calendar on a blank page because I figured that'd be the easiest and its still causing me problems.

  3. devra
    Member
    Posted 2 years ago #

    I finally gave up on trying to print the calendar page. We take a screen shot of the page, massage it in Photoshop, and print that for the customers. Not a slick or impressive process.

  4. smurl44
    Member
    Posted 2 years ago #

    I am also having the same issue. I have been looking at it for days now. I tried my own print.css stylesheet:

    /* Print Style Sheet */
    @media print {
    body { background:white; color:black; margin:0; border:none; }
    #header {display:none}
    #toppanel {display:none}

    .gallerywrap stage-slider-wrap {display:none}
    .header-wrap {display: none}
    .header-wrap-img {display:none}
    .stage-slider {display:none}
    .fc-event-title {display: block; color: black}

    #content {display: block; color: black; font-size: 12pt}
    #comments {display:none}
    #sidebar {display:none}
    #footer {display:none}

    }

    I can hide everything but the calendar for the most part - but it's still positioned incorrectly - it seems that my header, gallerywrap items are still there making the calendar appear in the same position even though those items have display:none.

    Anyone have a solution for this?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic