0

我很好地使用了完整日历版本 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 事件。

4

0 回答 0