如何使用FullCalendar插件实现打印功能？

Question

我使用fullcalendar作为演示.我该如何实现打印功能？我在FullCalendar包中找到了一个文件'fullcalendar.print.css',它用于什么？

如果有一个"打印"按钮,点击按钮后我该怎么办？任何帮助都会感激不尽!

Answer 1

我知道这是一个古老的问题,但我想我会回答.

以它告诉你的方式包含文件,例如:

<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css " rel="stylesheet" type="text/css" media="print" />

然后我将按如下方式设置我的按钮:

<button class="printBtn hidden-print">Print</button>

<script type="text/javascript">
  $('.printBtn').on('click', function (){
    window.print();
  });
</script>

这样,您的按钮就会从打印屏幕中隐藏,当您单击该按钮时,它会弹出一个打印屏幕.

隐藏打印是Bootstrap提供的类,如果您不使用引导程序,则可以在样式表中使用以下内容:

@media print {
  .visible-print  { display: inherit !important; }
  .hidden-print   { display: none !important; }
}

至于使用fullcalendar.print.css？当你media == print按照你的方式应用它<link>