Hinterlasse einen Kommentar

SharePoint 2010/2013 Kalender-Monatsansichten drucken

In SharePoint 2010 und 2013 ist bei Kalendern die Wochen- und Monatsansicht nicht für den Druck optimiert. Termine werden entweder gar nicht angezeigt oder sie sind horizontal nicht korrekt ausgerichtet. Hier beschreibe ich zwei einfache Lösungen, um die Monatsansicht sauber auf ein A4 oder A3 Papier auszudrucken.

Hintergrund

In SharePoint 2010 und SharePoint 2013 (Foundation und Standard/Enterprise) passt sich der Kalender standardmässig der aktuellen Fenstergrösse des Browsers an. Die Termine werden dabei als Div-Layer darübergelegt und absolut positioniert mit left– & top-Position. Beim Ändern der Fenstergrösse werden die Positionen durch JavaScript neu berechnet (window.resized-Event und unter anderem SP.UI.ApplicationPages.CalendarStateHandler.prototype.parentResized()).

Diese Berechnung wird zwar auch bei der Druckansicht durchgeführt, jedoch werden die horizontalen Positionen (left-position) der Termine falsch berechnet. Das Resultat sind Kalender-Layouts, in denen die Termine bei 100% Zoom meist gar nicht angezeigt werden und bei ca. 80% Zoom die Termine horizontal falsch ausgerichtet sind.

Workaround mit korrektem Zoom-Level

Eine Lösung ist, den Zoom Level auf ein Prozent genau einzustellen. In meinem Beispiel mit der Monatsansicht für ein A4 Papier Querformat ist das 52 Prozent.

Workaround mit fixer Kalender-Breite

Im Microsoft Forum ist dieses Problem bereits beschrieben. Dort empfiehlt Darrin, dem Webpart eine fixe Breite von 12 Zoll (ca. 30 cm) zu setzen. Das funktioniert zwar, aber dadurch geht die dynamische Kalender-Breite verloren, zudem muss diese Einstellung auf jedem Kalender-Webpart und View separat gesetzt werden.

Mit einem 11 Zeilen jQuery lässt sich dasselbe Verhalten erreichen, und zwar auf allen Views auf einmal. Zudem gibt es im Internet Explorer und Firefox einen onbeforeprint-Event, in dem die fixe Breite gesetzt werden kann, und einen onafterprint-Event, in dem die fixe Breite wieder entfernt werden kann. Wichtig ist, dass der Resize-Eventhandler danach ausgelöst wird.

In meinem Beispiel für SharePoint 2013 kann der Anwender die fixe breite selber eingeben in einem Browser-Dialog.

// Print Optimization for Calendar. Set fix width before print and call resize-handler
window.onbeforeprint = function() {
  var newWidth = prompt("Seitenbreite eingeben (A4 query: ca. 22cm, A3 quer: ca. 38.1cm)", "38.1cm");
  if (newWidth) {
    $("#AsynchronousViewDefault_CalendarView").parents("div.ms-webpart-chrome,div.noindex").width(newWidth);
    window._events.resize[0].handler.call();
  }
}
window.onafterprint = function() {
  $("#AsynchronousViewDefault_CalendarView").parents("div.ms-webpart-chrome,div.noindex").width("100%");
  window._events.resize[0].handler.call();
}

Viel Spass damit und schöne Festtage.

Über Benjamin Gemperle

Web Developer bei 2sic Internet Solutions GmbH seit 2006. Entwickelt Software-Lösungen mit Web-Standards und Microsoft-Technologien. Mein Daily Business: SharePoint, DNN, AngularJS, ASP.Net, C#, SQL Server, IIS, InfoPath, Access, Excel, PowerShell sowie gängigen Web-Sprachen HTML, CSS, JavaScript (jQuery, AngularJS), AJAX, XML, XSL/XSLT. Mein Ausgleich: Reisen, Natur, fein Kochen und Essen, Fitness, Biken, Skiing.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: