提问人:Anonimo 提问时间:10/27/2023 更新时间:10/27/2023 访问量:19
打印使用 FullCalendar 创建的日历
print the calendar created with fullcalendar
问:
我有以下日历,我想在其中打印 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>
创建示例后,我将解释我的两个问题:
首先是您不能将相同的信息重复两次。
第二个问题是,由于列表有一个滚动条,因此此滚动条内的内容不会出现在打印输出中。我希望在打印时显示所有信息。
它只打印屏幕上显示的内容,并应打印日历中返回的所有信息
谁能帮助克服这个问题?
答: 暂无答案
上一个:关闭 div 时清除字段
下一个:从数据库返回数据并显示在日历中
评论