我很好地使用了全日历版本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%
}
}
当选择打印时,我看到这样的内容:
无论我处于什么视图中,日历都永远不会超出这个高度:列表,星期等等。事件似乎总是被切断。我不知道这是否只是CSS问题,还是我需要使用完整的日历插件做更多的事情。
我基本上需要它来扩展整个打印范围以涵盖所有日历div事件。