如何使用FullCalendar插件實現打印功能？

我正在使用fullcalendar作爲演示。我如何實現打印功能？我在FullCalendar包中找到了一個'fullcalendar.print.css'文件，那有什麼用？如何使用FullCalendar插件實現打印功能？

如果有一個按鈕「打印」，我點擊按鈕時該怎麼辦？任何幫助將感謝！

2012-10-08 Jonathan

我知道這是一個老問題，但我想我會回答。

包括文件時，它會告訴你，例如方式：

<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css" rel="stylesheet" type="text/css" /> 
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css " rel="stylesheet" type="text/css" media="print" />

我會再設置我的按鈕，如下：

<button class="printBtn hidden-print">Print</button> 

<script type="text/javascript"> 
    $('.printBtn').on('click', function(){ 
    window.print(); 
    }); 
</script>

這樣，你的按鈕從打印屏幕隱藏時你點擊按鈕它會彈出一個打印屏幕給你。

隱藏的印刷是，如果你使用的不是引導你可以使用的東西，通過引導提供了諸如在樣式表下面的一類：

@media print { 
    .visible-print { display: inherit !important; } 
    .hidden-print { display: none !important; } 
}

至於使用fullcalendar.print.css ？當您的media == print按照您的<link>

來源

2013-09-30 16:17:12 buzzsawddog

您可以使用下面的鏈接中用於Primefaces計劃（與完整日曆相同）的解決方案。 http://eves4code.blogspot.in/2014/12/to-print-primefaces-schedule.html

本示例在新選項卡中打開日曆的打印預覽。從上述鏈接

提取物是被

這個例子是對於其使用fullcalendar在後端

的printScheduleArea是div標籤包圍primefaces時間表primefaces調度組件實現。

在你的XHTML，爲您的新print.css

<link rel="stylesheet" href="#{request.contextPath}/css/print.css" 
type="text/css" media="print"/>

添加一個鏈接標籤在print.css

@media print { 
    body, html, #wrapper { 
    width: 100%; 
    } 
    div { 
    overflow: visible !important;  
    } 

}

添加一個按鈕，在視圖頁打印。

function printPreview() { 
    var headerElements = document.getElementsByClassName('fc-header');//.style.display = 'none'; 
    for(var i = 0, length = headerElements.length; i < length; i++) { 
    headerElements[i].style.display = 'none'; 
    } 
    var toPrint = document.getElementById('printScheduleArea').cloneNode(true); 

    for(var i = 0, length = headerElements.length; i < length; i++) { 
     headerElements[i].style.display = ''; 
    } 

    var linkElements = document.getElementsByTagName('link'); 
    var link = ''; 
    for(var i = 0, length = linkElements.length; i < length; i++) { 
    link = link + linkElements[i].outerHTML; 
    } 

    var styleElements = document.getElementsByTagName('style'); 
    var styles = ''; 
    for(var i = 0, length = styleElements.length; i < length; i++) { 
    styles = styles + styleElements[i].innerHTML; 
    } 

    var popupWin = window.open('', '_blank'); 
    popupWin.document.open(); 
    popupWin.document.write('<html><title>Schedule Preview</title>'+link 
+'<style>'+styles+'</style></head><body">') 
    popupWin.document.write(toPrint.innerHTML); 
    popupWin.document.write('</html>'); 
    popupWin.document.close(); 

    setTimeout(popupWin.print(), 20000); 
}

來源

2014-12-16 10:33:42

如何使用FullCalendar插件實現打印功能？

回答

相關問題