全日历和 bootstrap 可见打印

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）

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

"Notice that this example calls render whenever any tab is shown, not just the tab that the calendar is within. This is okay, because FullCalendar is smart enough to only render calendars that are visible to the user." http://fullcalendar.io/docs/display/render/

是否有可能以某种方式覆盖此行为并将完整日历放在 "visible-print"-class 中？

Answer 1

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

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

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

Plunker

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

全日历和 bootstrap 可见打印

fullcalendar and bootstrap visible-print

javascript

fullcalendar

twitter-bootstrap