全日历日程安排时间表打印问题

Question

Scheduler Fullcalendar时间轴视图完全不支持打印，但是很遗憾，我的客户需要它。问题在于日历的后半部分已被打印出来。

[潜在的解决方案：在Chrome中使用zoom: 0.8效果惊人，一周中的每一天都会出现。但是，这对于Firefox并没有任何作用。 transform: scale(0.8)似乎没有效果，因为日历的一部分仍被切断，尽管它全部缩小了。如果我在Chrome中模拟css，即使启用了转换比例，它也会显示，但是在实际打印中不会显示。

请在打印日历时原谅土豆的样式。我更关心星期五日历的后半部分被切断。在Chrome浏览器中，切换我的评论以进行缩放，然后切换到缩放比例以查看差异。

这里是codepen链接https://codepen.io/bedelman851/pen/wXeZEO

Answer 1

我最终要使用的CSS在下面。我无法保证外观或您的需求，但如果有帮助，我会很高兴！

 //CALENDAR CSS
  .calendar-functions,
  .calendar-functions div:last-child,
  .calendar-functions a,
  .calendar-view h1,
  .fc-right,
  .fc-right button,
  .fc-license-message,
  .print-button,
  .print-button-week {
    display: none;
  }


  .month-view .calendar-functions div,
  .week-view .calendar-functions div {
    display: none;
  }

  .fc-event:after {
    content: attr(data-coll) !important;
  }

  .fc-body {
    height: 400px !important;
  }

  .calendar-widget-week,
  .fc-timeline {
    width: 100%;
  }

  body {
    width: 100%;
  }

  .fc-view-container {
    // transform: scale(0.8);
    zoom: 0.8;
  }

  .fc-timeline {

    th {
      height: 30px;
    }

    .fc-scroller-canvas {
      min-width: 100% !important;
      width: 100% !important;
    }
  }


  .calendar-day tr td:first-child {
    a[href]:after {
      display: none;
    }
  }

  .fc {
    max-width: 100% !important;

    th {
      height: 30px;
    }
  }

  .fc-event {
    background: transparent !important;
    color: #000 !important;
    page-break-inside: avoid;
  }

  .fc-event .fc-resizer {
    display: none;
  }

  .fc th,
  .fc td,
  .fc hr,
  .fc thead,
  .fc tbody,
  .fc-row {
    border-color: #ccc !important;
  }

  .fc-bgevent-skeleton,
  .fc-highlight-skeleton,
  .fc-helper-skeleton,
  .fc-business-container,
  .fc-highlight-container,
  .fc-helper-container {
    display: none;
  }

  .fc-ltr .fc-timeline-event {
    margin-right: 5px;
  }

  .calendar-widget-week .fc-timeline-event {
    padding-bottom: 97px;
  }

  /* don't force a min-height on rows (for DayGrid) */
  .fc tbody .fc-row {
    height: auto !important;
    /* undo height that JS set in distributeHeight */
    min-height: 0 !important;
/* undo the min-height from each view's specific stylesheet */ }

  .fc tbody .fc-row .fc-content-skeleton {
    position: static;
    /* undo .fc-rigid */
    padding-bottom: 0 !important;
/* use a more border-friendly method for this... */ }

  .fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td {
    /* only works in newer browsers */
    padding-bottom: 1em;
/* ...gives space within the skeleton. also ensures min height in a way */ }

  .fc tbody .fc-row .fc-content-skeleton table {
    /* provides a min-height for the row, but only effective for IE, which exaggerates this value,
     making it look more like 3em. for other browers, it will already be this tall */
    height: 1em; }

  //List views
  .pagination-right,
  .pagination-left *,
  .pagination-right *,
  .pagination-left {
    display: none;
  }

  .fc-day-grid-event,
  .fc-timeline-event {
    &:before {
      content: attr(data-id);

    }
    &:after {
      content: "";
    }

    &:before,
    &:after {
      display: inline-block !important;
    }
  }

  .fc-scroller {
    overflow: visible !important;

    .fc-scroller-canvas {
      min-width: none !important;
    }
  }

  @page :left {
    margin-left: 0;
  }

  @page :right {
    margin-left: 0;
  }

  /* for vertical events */
  .fc-event-bg {
    display: none !important;
  }

  .fc-event .ui-resizable-handle {
    display: none !important;
  }

  .print-window__exit {
    display: none;
  }

  #calendar-week {
    display: none;
  }

  .dt-print-view {
    #calendar-week {
      display: block;
    }
  }

  .print-table,
  .print-title {
    display: block !important;
  }