Javascript fullcalendar和bootstrap可视打印

我试图在一页上包括两个完整的日历。第一个应仅在屏幕上可见，第二个应仅在打印时可见

 <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>

这是隐藏在印刷品中的
这在印刷品中是可见的

但当我打印页面时，第二个日历不可见，如果我检查源，则不会呈现第二个日历的内容。我创建了一个plunk来演示它：

（代码：）

这是有意义的，因为根据fullcalendar文档，这是预期的行为：

请注意，此示例在显示任何选项卡时调用render，而不仅仅是日历所在的选项卡。这没关系，因为FullCalendar足够智能，可以只渲染用户可见的日历

---

不管怎样，是否有可能覆盖此行为并将完整日历放在“可见打印”类中？

这不是一个很好的答案，我希望看到更好的答案。但是如果你有一个相当静态的完整日历，它应该可以工作

基本上，从

可见打印

外部的FC开始，渲染它，然后将其移入

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

请注意，每次对其进行更改时，都需要将其移出并再次渲染