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.

100% Zoom, A4 quer, flexible Kalender-Breite

80% Zoom, A4 quer, flexible Kalender-Breite

52% Zoom, A4 quer, flexible Kalender-Breite

JavaScript Dialog/Prompt zum setzen der fixen Kalender-Breite für den Druck

100% Zoom, A3 quer, fixe Kalender-Breite von 38.1cm

Werbung