Comment puis-je mettre en œuvre des fonctionnalités d'impression à l'aide de plugin FullCalendar?

Je suis en utilisant le fullcalendar comme une démo. comment puis-je mettre en œuvre des fonctionnalités d'impression ?
J'ai trouvé un fichier " fullcalendar.d'impression.css " dans FullCalendar paquet, ce qui les utilisent pour?

Si un avoir un bouton "Imprimer" ,que vais-je faire lorsque vous cliquez sur le bouton?
Toute aide sera reconnaissante!

InformationsquelleAutor Jonathan | 2012-10-08
  1. 8

    Je sais que c'est un peu une vieille question, mais pensé que je pourrais répondre de toute façon.

    inclure le fichier de la façon dont il vous dit par exemple:

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

    Je puis l'installation de mon bouton comme suit:

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

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

    De cette façon, votre bouton est caché à partir de l'écran d'impression et lorsque vous cliquez sur le bouton, il affiche un écran d'impression pour vous.

    Cachées-print est une classe fournie par Bootstrap si vous n'êtes pas en utilisant bootstrap vous pouvez utiliser quelque chose comme ce qui suit dans une feuille de style:

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

    Aussi loin que l'Utilisation de la fullcalendar.d'impression.css? Il est appliqué lors de votre media == print selon votre <link>

    InformationsquelleAutor buzzsawddog
  2. 2

    vous pouvez utiliser la solution utilisée dans le lien ci-dessous pour primefaces horaire (de même que le calendrier complet).
    http://eves4code.blogspot.in/2014/12/to-print-primefaces-schedule.html

    Cet exemple ouvre l'aperçu avant impression d'un calendrier dans un nouvel onglet.

    Extrait du lien ci-dessus est

    Cet exemple est mis en œuvre pour primefaces annexe composant qui utilise fullcalendar dans le backend

    La printScheduleArea est balise div englobant de la primefaces annexe.

    Dans votre XHTML, ajoutez une balise de lien pour votre nouvelle impression.css

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

    À l'impression.css

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

}

    Ajouter un bouton pour Imprimer dans votre page d'affichage.

    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);
}
    InformationsquelleAutor Eva Mariam