完整日历和引导可见打印

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>

但是当我打印页面时，第二个日历不可见，如果我检查源代码，第二个日历的内容不会呈现。我创建了一个 plunk 来演示它：http://run.plnkr.co/plunks/RQx1Up2Y1jbzs9Ixm2aX/

（代码：http://plnkr.co/edit/RQx1Up2Y1jbzs9Ixm2aX）

这是有道理的，因为根据完整日历文档，这是预期行为：

"请注意，每当显示任何选项卡时，此示例都会调用 render，而不仅仅是日历所在的选项卡。这没关系，因为 FullCalendar 足够智能，只能呈现用户可见的日历 http://fullcalendar.io/docs/display/render/。

是否有可能以某种方式覆盖这种行为并将完整的日历放在"可见打印"类中？

Answer 1

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

本质上，从visible-print外的 FC 开始，渲染它，然后将其移入。

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

普伦克

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