fullcalendar и bootstrap visible-print

Question

Я пытаюсь включить два полных календаря на одну страницу. Первый должен отображаться только на экране, а второй должен отображаться только при печати.

<div class="hidden-print"> 
    <h1>This is hidden in print</h1> 
    <div id="calendar"></div> 
</div> 
<div class="visible-print"> 
    <h1>This is visible in print</h1> 
    <div id="calendar2"></div> 
</div> 

Но когда я печатаю страницу, то второй календарь не видно, и если я проверить источник содержимое второго календаря не отображается. Я создал шлепнуть, чтобы продемонстрировать это: http://run.plnkr.co/plunks/RQx1Up2Y1jbzs9Ixm2aX/

(код: http://plnkr.co/edit/RQx1Up2Y1jbzs9Ixm2aX)

Это имеет смысл, так как это, как ожидается, поведение в соответствии с fullcalendar документы:

«Обратите внимание, что в этом примере вызовы делают, когда отображается любая вкладка, а не только вкладка, в которой находится календарь. Это нормально, потому что FullCalendar достаточно умен, чтобы отображать только календари, которые видны пользователю ». http://fullcalendar.io/docs/display/render/

Как можно переопределить это поведение и поместить полный календар в пределах класса «видимый-печатный»?

Answer 1

Это не очень хороший ответ, и мне бы хотелось увидеть лучшее. Но он должен работать, если у вас довольно статический fullcalendar.

По существу, начните с FC за пределами visible-print, сделать его, а затем переместить его в.

$('#calendar2').fullCalendar({}); 
$('#calendar2').fullCalendar('render'); 
$('#calendar2').appendTo(".visible-print"); 

Plunker

Обратите внимание, что каждый раз, когда вы делаете изменения к нему, он будет нужно быть вывезены и отображены снова.