Export calendar to PDF

Originally reported on Google Code with ID 2036

Hi,

I don't know where is the place to post this tip so i use a new issue.

For my website, I want to export my calendar to pdf. Ther is the way to obtain that
:)

Hope That Help You !

----
1 : download external files

JSPDF : use to generate a PDF file (http://parall.ax/products/jspdf)
html2canvas : use to generate a JPEG file of your #div calendar (http://html2canvas.hertzen.com/)

----
2 : install only the files needed
html2canvas.min.js
jspdf.js
jspdf.plugin.addimage.js

---
3 : now the code :)

3.1 : the pdf button

We add a new button in the header 

$("td.fc-header-left").append('<span id="AE_btn_pdf" class="cal-button"><input type="hidden"
id="zz_pdf" value="" />' + AEFC.translate("Pdf") + '</span>');

3.2 : the code to have a ui like button

   $("#AE_btn_pdf").button({
      icons: {
         primary: "ui-icon-image"
      },
      text: false
   }); // $("#AE_btn_pdf").button(

3.3 : the code to have the pdf... Yes it's very simple but usefull code :)

   $("#AE_btn_pdf").click(function () {
      //#AEFC is my div for FullCalendar
      html2canvas($('#AEFC'), {
         logging: true,
         useCORS: true,
         onrendered: function (canvas) {
            var imgData = canvas.toDataURL("image/jpeg");
            var doc = new jsPDF();      
            doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
            download(doc.output(), "AEFC.pdf", "text/pdf");                       

         }
      }) ;      
   }); // $("#AE_btn_pdf").click(function ()

--
4 JS : download function

function download(strData, strFileName, strMimeType) {
    var D = document,
        A = arguments,
        a = D.createElement("a"),
        d = A[0],
        n = A[1],
        t = A[2] || "text/plain";

    //build download link:
    a.href = "data:" + strMimeType + "," + escape(strData);

    if (window.MSBlobBuilder) {
        var bb = new MSBlobBuilder();
        bb.append(strData);
        return navigator.msSaveBlob(bb, strFileName);
    } /* end if(window.MSBlobBuilder) */

    if ('download' in a) {
        a.setAttribute("download", n);
        a.innerHTML = "downloading...";
        D.body.appendChild(a);
        setTimeout(function() {
            var e = D.createEvent("MouseEvents");
            e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false,
false, false, 0, null);
            a.dispatchEvent(e);
            D.body.removeChild(a);
        }, 66);
        return true;
    } /* end if('download' in a) */    

    //do iframe dataURL download:
    var f = D.createElement("iframe");
    D.body.appendChild(f);
    f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64"
: "") + "," + (window.btoa ? window.btoa : escape)(strData);
    setTimeout(function() {
        D.body.removeChild(f);
    }, 333);
    return true;
} /* end download() */

Reported by elecoest on 2013-11-17 17:13:34

Imported with 5 stars.

[arshaw]

I declare that this feature is out of the scope of the FullCalendar project. It’s tech stack is sufficiently different from FullCalendar’s where I feel it should be a separate project.

[Khawer-31]

Hi thanks you for your work, but do you have a solution to convert as a pdf a calendar
but with a scrollbar, because when i use you method it converts only what is display
on the browser screen and not what is hide

Reported by test.logograph on 2014-05-21 12:40:34

Were you able to achieve it? I am facing the same problem with a calendar that has scrollbar

Hi thanks you for your work, but do you have a solution to convert as a pdf a calendar
but with a scrollbar, because when i use you method it converts only what is display
on the browser screen and not what is hide

Reported by test.logograph on 2014-05-21 12:40:34

Were you able to achieve it? I am facing the same problem with a calendar that has scrollbar

Facing the same problem, any luck?