Fullcalendar如何打印div:媒体打印

时间:2019-06-18 17:22:23

标签: css fullcalendar fullcalendar-scheduler fullcalendar-4

我很好地使用了全日历版本4。我要添加一个打印按钮。文档说我不需要包含任何其他文件(例如需要版本3),并且我应该能够使用媒体查询来处理打印。

我一直在阅读有关媒体查询的信息,并提出了一些可在日历div的打印页面上工作的代码。

<div class="portlet-body">
  <div class='loader'>
  </div>
  <div class="row">
     <div class="col-md-5">
           <a id="print_calendar" class="btn btn-xs default">Print</a>
     </div>
  <div class="col-md-7">
  </div>
  <br>
    <div id="calendar_full" style="padding-left: 10px; padding-right: 15px;"> 
    </div>
  </div>
</div>

我从上面提取了一些不必要的代码来简化此过程。当用户单击打印链接时,我只希望calendar_full打印。

我在此索引页面上包含calendar_full.php,其中包含我的完整日历脚本。在该文件中,我有以下CSS。我是媒体印刷CSS的新手,所以我只需要隔离calendar_full div。

<style type="text/css">
    @media print {
        body * {
            visibility: hidden;
            height: 0;
        }

        #calendar_full,
        #calendar_full * {
            visibility: visible;
            height: auto;
        }

        #calendar_full {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%
        }
    }

当选择打印时,我看到这样的内容:

enter image description here

无论我处于什么视图中,日历都永远不会超出这个高度:列表,星期等等。事件似乎总是被切断。我不知道这是否只是CSS问题,还是我需要使用完整的日历插件做更多的事情。

我基本上需要它来扩展整个打印范围以涵盖所有日历div事件。

0 个答案:

没有答案