Question

调度程序Fullcalendar时间轴视图根本不支持打印，但不幸的是我的客户需要它。问题在于日历的后半部分正在被打印出来。

潜在的解决方案：使用zoom: 0.8在Chrome中工作效果惊人，一周中的所有日子都会出现。然而，这对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;
  }

Fullcalendar计划程序时间表打印问题

1 个答案: