Druck-Plugin

@dayflow-pro/plugin-print ergänzt DayFlow um einen Druckdialog mit Vorschau. Unterstützt werden Layouts für Tag, Woche, Monat und zwei Jahresvarianten; Papierformat und Ausrichtung lassen sich wählen, und je nach Kontext werden entweder nur die sichtbaren oder alle passenden Termine gedruckt.

Probieren Sie die Live-Demo aus

Installation

npm install @dayflow-pro/plugin-print

pnpm add @dayflow-pro/plugin-print

yarn add @dayflow-pro/plugin-print

bun add @dayflow-pro/plugin-print

Die Installationsschritte finden Sie im Leitfaden Pro-Installation.

Grundlegende Verwendung

import { DayFlowCalendar, useCalendarApp } from '@dayflow/react';
import { createPrintPlugin } from '@dayflow-pro/plugin-print';

function App() {
  const printPlugin = createPrintPlugin({
    defaultOptions: {
      miniCalendar: true,
      calendarKeys: true,
      textSize: 'medium',
    },
  });

  const calendar = useCalendarApp({
    views: [
      /* your views */
    ],
    plugins: [printPlugin],
  });

  return (
    <>
      <button onClick={() => printPlugin.api.open()}>Print</button>
      <DayFlowCalendar calendar={calendar} />
    </>
  );
}

<template>
  <button @click="printPlugin.api.open()">Print</button>
  <DayFlowCalendar :calendar="calendar" />
</template>

<script setup>
import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
import { createPrintPlugin } from '@dayflow-pro/plugin-print';

const printPlugin = createPrintPlugin({
  defaultOptions: {
    miniCalendar: true,
    calendarKeys: true,
    textSize: 'medium',
  },
});

const calendar = useCalendarApp({
  views: [
    /* your views */
  ],
  plugins: [printPlugin],
});
</script>

import { Component } from '@angular/core';
import { DayFlowCalendarModule } from '@dayflow/angular';
import { createPrintPlugin } from '@dayflow-pro/plugin-print';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <button (click)="printPlugin.api.open()">Print</button>
    <dayflow-calendar [calendar]="calendar"></dayflow-calendar>
  `
})
export class AppComponent {
  printPlugin = createPrintPlugin({
    defaultOptions: {
      miniCalendar: true,
      calendarKeys: true,
      textSize: 'medium',
    },
  });

  calendar = {
    views: [
      /* your views */
    ],
    plugins: [this.printPlugin]
  };
}

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import { createPrintPlugin } from '@dayflow-pro/plugin-print';

  const printPlugin = createPrintPlugin({
    defaultOptions: {
      miniCalendar: true,
      calendarKeys: true,
      textSize: 'medium',
    },
  });

  const calendar = useCalendarApp({
    views: [
      /* your views */
    ],
    plugins: [printPlugin],
  });
</script>

<button onclick={() => printPlugin.api.open()}>Print</button>
<DayFlowCalendar {calendar} />

Das Plugin hängt außerdem zwei Hilfsfunktionen direkt an die Kalender-App:

await calendar.openPrintDialog();
await calendar.print();

Was das Plugin mitbringt

einen Druckvorschau-Dialog, der in document.body gerendert wird
natives Drucken über window.print()
Layoutauswahl für Tag, Woche, Monat und Jahr
Filterung auf Kalenderebene über calendarIds
Einstellungen für Papierformat und Ausrichtung
Unterstützung des Kürzels Cmd/Strg + P, solange das Plugin installiert ist

Unterstützte Drucklayouts

Layout	Hinweise
`day`	Druckt einen oder mehrere ausgewählte Tage.
`week`	Druckt ein Wochenlayout.
`month`	Druckt ein Monatsraster.
`year-fixed-week`	Jahresübersicht mit festen Wochenzeilen. Standardmäßig im Querformat.
`year-canvas`	Dichte Jahresübersicht, optimiert für Hochformat.

Beim Öffnen leitet der Dialog sein Anfangslayout aus der aktuellen DayFlow-Ansicht ab:

aktuelle Monatsansicht -> month
aktuelle Wochenansicht -> week
aktuelle Tagesansicht -> day
aktuelle Jahresansicht -> year-fixed-week

Plugin-Konfiguration

Eigenschaft	Typ	Standard	Hinweise
`enabled`	`boolean`	`true`	Bei `false` wird das Plugin gar nicht erst installiert.
`defaultOptions`	`Partial<CalendarPrintOptions>`	—	Belegt den Dialog mit eigenen Druckoptionen vor.
`license`	`PackageLicenseConfig`	—	Optionale Angabe, wenn Sie keine globale Registrierung verwenden.

CalendarPrintOptions

Eigenschaft	Typ	Standard	Hinweise
`allDayEvents`	`boolean`	`true`	Ganztägige Termine einbeziehen.
`timedEvents`	`boolean`	`true`	Termine mit Uhrzeit einbeziehen.
`miniCalendar`	`boolean`	`true`	Zeigt den Minikalender in der Druckkopfzeile.
`calendarKeys`	`boolean`	`true`	Zeigt die Kalenderlegende.
`blackAndWhite`	`boolean`	`false`	Druckt ohne Kalenderfarben.
`textSize`	`'small' \| 'medium' \| 'large'`	`medium`	Steuert die Schriftdichte in Vorschau und Druck.

CalendarPrintConfig

Sie können den Druckdialog mit einer Teilkonfiguration vorbelegen oder überschreiben:

type CalendarPrintConfig = {
  view: 'month' | 'week' | 'day' | 'year-fixed-week' | 'year-canvas';
  paper: 'A4' | 'Letter';
  orientation?: 'portrait' | 'landscape';
  startDate: Date;
  endDate?: Date;
  calendarIds: string[];
  options: CalendarPrintOptions;
};

Wichtiges Verhalten laut Quellcode:

year-fixed-week erzwingt landscape.
year-canvas erzwingt portrait.
Der Dialog fügt eine @page-Regel ein, bevor die native Druckoberfläche des Browsers geöffnet wird.
In der Vorschau lässt sich vor dem Druck zoomen und verschieben.

Druckumfang

Der Dialog bezieht die Termine nicht immer aus derselben Quelle:

Stimmt das gewählte Drucklayout mit der aktuellen Kalenderansicht überein und entspricht startDate dem aktuellen Datum der App, verwendet die Vorschau app.getEvents(), also die sichtbaren Termine.
Andernfalls wird app.getAllEvents() verwendet, sodass auch Daten außerhalb des dargestellten Bildschirms gedruckt werden können.

Intern wird dies als sourceScope: 'visible' | 'all' abgebildet.

API

createPrintPlugin() liefert ein gewöhnliches DayFlow-Plugin mit einem api-Objekt:

type PrintPluginApi = {
  open: () => void;
  close: () => void;
  print: (config?: Partial<CalendarPrintConfig>) => void;
};

Hinweise:

api.open() öffnet den Druckdialog.
api.close() schließt ihn, sofern er eingehängt ist.
api.print(config) öffnet derzeit ebenfalls den Dialog; die Vorschau wird noch nicht übersprungen.
Nach der Installation reagiert das Plugin global auf Cmd/Strg + P.

Auf dieser Seite