Fullcalendar Scheduler 时间线打印问题

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;
  }