javascript - fullcalendar and bootstrap visible-print -

I am trying to include two full calendars on one page. The first should be visible only on the screen and the second should appear on the print.

  & lt; Div class = "hidden-print" & gt; & Lt; H1 & gt; It's hidden in print & lt; / H1> & Lt; Div id = "calendar" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "visible-print" & gt; & Lt; H1 & gt; It appears in print & lt; / H1> & Lt; Div id = "calendar2" & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

But when I print the page, the second calendar is not visible and if I check the source then the content of the second calendar is not provided. I made a plunk to display it:

(code :)

This makes sense because it expects behavior according to the full calendar docs:

"Note that whenever any tab is shown, even when any tab is shown, this example calls. This is fine because full calendars are visible to a sufficient user. Enough to render the calendar. "

post-text "itemprop = "Text">

This is not a very good answer and I would like to see a better one. But if you have enough static fullcalendar, then it should work.

Basically, Start with the FC out of view-print , then present it, then press it.

$ ('# Calendar2'). Full Calendar ({}); $ (' # CalendarCALENDAR2 ') fullcalendar (' render '). $ (' # CalendarCALENDAR2 ') appendTo ("visible" Rint. ").;).

Note that every time you make a change for it, it will need to move and re-submit .