打印使用 FullCalendar 创建的日历

print the calendar created with fullcalendar

提问人:Anonimo 提问时间:10/27/2023 更新时间:10/27/2023 访问量:19

问:

我有以下日历,我想在其中打印 listMonth。我按如下方式组织我的代码:

  $('html,body').animate({scrollTop:0});
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        initialViews = 'listMonth';
        
   }else{
        initialViews = 'listMonth';

   }  

    var calendarEl = document.getElementById('calendarioo');
    var today = moment().day();

    var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            left: false,
            center: 'title',
            right: false
        },
        locale: "pt-br",

        navLinks: true,             
        initialView: initialViews,
        eventColor: '#f16621', 

        eventContent: function(info) {

                
          return { html: '<div class="ui top label grey attached"><strong>Utente:</strong> ' + info.event.title + '</div><br><div class="ui top label grey attached"><strong>Responsável:</strong> ' + info.event.extendedProps.respons + '</div><br><div class="ui top label grey attached"><strong>Local da Visita:</strong> ' + info.event.extendedProps.Localvisita + '</div>' };
        },

        events: [
        { id: '1', title: 'teste', respons: 'testeee', contact: '000000001', start: '2023-10-26T10:00:00', end: '2023-10-26T13:18:00' },
        { id: '2', title: 'teste1', respons: 'testeee1', contact: '000000002', start: '2023-10-27T10:00:00', end: '2023-10-27T13:18:00' },
        { id: '3', title: 'teste2', respons: 'testeee2', contact: '000000003', start: '2023-10-28T10:00:00', end: '2023-10-28T13:18:00' },
        { id: '4', title: 'teste2', respons: 'testeee2', contact: '000000003', start: '2023-10-29T10:00:00', end: '2023-10-29T13:18:00' },
        { id: '5', title: 'teste2', respons: 'testeee2', contact: '000000003', start: '2023-10-30T10:00:00', end: '2023-10-30T13:18:00' },
        { id: '6', title: 'teste2', respons: 'testeee2', contact: '000000003', start: '2023-10-31T10:00:00', end: '2023-10-31T13:18:00' }
      ],
        
    });
    calendar.render();
    
document.getElementById("btnPrintvisit").onclick = function () {
    printElement(document.getElementById("printThvisit")); 
}

function printElement(elem) {

    var domClone = elem.cloneNode(true);
    
    var $printSection = document.getElementById("printSection");
    
    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }
    console.log($printSection);
    $printSection.innerHTML = "";
    $printSection.appendChild(domClone);
    window.print();

}
@media screen {
    #printSection {
        display: none !important;
    }
}

@media print {
    #printSection, #printSection * {
      visibility:visible !important;
    }
    #printSection {
      position: relative;
      left:0 !important;
      top:0 !important;
    }
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>

<button type="button" tabindex="0" class="dropdown-item" id="btnPrintvisit">Print</button>

<div id="printThvisit"><div id='calendarioo'></div></div>

创建示例后,我将解释我的两个问题:

首先是您不能将相同的信息重复两次。

第二个问题是,由于列表有一个滚动条,因此此滚动条内的内容不会出现在打印输出中。我希望在打印时显示所有信息。

它只打印屏幕上显示的内容,并应打印日历中返回的所有信息

谁能帮助克服这个问题?

完整日历

评论

0赞 ADyson 10/31/2023
fullcalendar 已经自带打印 CSS,我认为您真的不需要添加自己的 CSS。尝试不使用额外的 CSS。演示:codepen.io/ADyson82/full/qBbMJRv

答: 暂无答案