JavaScript print function make the calendar stop working

Question

I'm using Joomla as my CMS and I use below JavaScript to print specific area of the page (actually the whole body here).

JavaScript

function printDiv(divName) {

             var printContents = document.getElementById(divName).innerHTML;
             var originalContents = document.body.innerHTML;
             document.body.innerHTML = printContents;
             window.print();
             document.body.innerHTML = originalContents;
    }

I use Joomla to get a calendar on the same page in the body selection.

PHP

<?php echo JHTML::calendar($filter_date_to,'filter_date_to', 'filter_date_to', '%Y-%m-%d', `'');?>

After trying to print something the calendar stop working. No js error are shown in the console too. What seems to be the problem?

Answer 1

Assuming the calendar is reliant on javascript, it probably stopped working because all of the event listeners got unbound. You would be much better off opening the calendar information in a new popup window and printing it, or taking a snapshot of the calendar information, hiding the current calendar with a display:none, creating a new div which is visible and putting that snapshot of the calendar information in to print, then removing that after you're done.

Even beyond that, you can use CSS media queries to make all parts of the page disappear that you don't want to print, so you don't have to do this at all.