印刷プラグイン (Print Plugin)

@dayflow-pro/plugin-print は、DayFlow に組み込みの印刷ダイアログとマルチフォーマットエクスポート機能を追加します。インタラクティブなページプレビュー、用紙サイズと向きの制御、トラックパッドのピンチズーム、スプレッドシートのリアルタイムデータプレビュー、およびヘッドレスエクスポートAPIを提供します。

フォーマット	出力
`print`	ブラウザの印刷ダイアログ。選択した用紙に合わせてサイズ設定され、印刷または PDF 保存が可能
`png`	高解像度画像（ページごと）。複数ページは ZIP アーカイブとしてダウンロード
`xlsx`	Excel ワークブック：Events シート（イベント一覧）と Summary シート（カレンダー集計）
`ics`	Google カレンダー、Apple カレンダー、Outlook 向けの標準 iCalendar ファイル

ライブデモを試す。

インストール

npm install @dayflow-pro/plugin-print

pnpm add @dayflow-pro/plugin-print

yarn add @dayflow-pro/plugin-print

bun add @dayflow-pro/plugin-print

ライセンス設定の詳細については、Pro のインストールを参照してください。

コンポーネントのスタイルをインポートしてください：

import '@dayflow-pro/plugin-print/dist/styles.components.css';

基本的な使い方

import { DayFlowCalendar, useCalendarApp } from '@dayflow/react';
import { createPrintPlugin } from '@dayflow-pro/plugin-print';
import '@dayflow-pro/plugin-print/dist/styles.components.css';

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

  const calendar = useCalendarApp({
    views: [
      /* ビュー設定 */
    ],
    plugins: [printPlugin],
  });

  return (
    <>
      <button onClick={() => calendar.app.openPrintDialog()}>印刷</button>
      <button onClick={() => calendar.app.openPrintDialog({ format: 'xlsx' })}>
        Excel エクスポート
      </button>
      <DayFlowCalendar calendar={calendar} />
    </>
  );
}

<template>
  <div>
    <button @click="calendar.app.openPrintDialog()">印刷</button>
    <button @click="calendar.app.openPrintDialog({ format: 'xlsx' })">
      Excel エクスポート
    </button>
    <DayFlowCalendar :calendar="calendar" />
  </div>
</template>

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

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

const calendar = useCalendarApp({
  views: [
    /* ビュー設定 */
  ],
  plugins: [printPlugin],
});
</script>

import { Component } from '@angular/core';
import { DayFlowCalendarModule } from '@dayflow/angular';
import { createPrintPlugin } from '@dayflow-pro/plugin-print';
import '@dayflow-pro/plugin-print/dist/styles.components.css';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <button (click)="calendar.app.openPrintDialog()">印刷</button>
    <button (click)="calendar.app.openPrintDialog({ format: 'xlsx' })">Excel エクスポート</button>
    <dayflow-calendar [calendar]="calendar"></dayflow-calendar>
  `
})
export class AppComponent {
  printPlugin = createPrintPlugin({
    defaultOptions: {
      miniCalendar: true,
      calendarKeys: true,
      textSize: 'medium',
    },
  });

  calendar = {
    views: [
      /* ビュー設定 */
    ],
    plugins: [this.printPlugin]
  };
}

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

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

  const calendar = useCalendarApp({
    views: [
      /* ビュー設定 */
    ],
    plugins: [printPlugin],
  });
</script>

<button onclick={() => calendar.app.openPrintDialog()}>印刷</button>
<button onclick={() => calendar.app.openPrintDialog({ format: 'xlsx' })}>
  Excel エクスポート
</button>
<DayFlowCalendar {calendar} />

プラグインはカレンダーインスタンスに直接ヘルパーメソッドを登録します：

// デフォルトの印刷ダイアログを開く
await calendar.app.openPrintDialog();

// フォーマットやビューを指定して開く
await calendar.app.openPrintDialog({ format: 'xlsx', view: 'month' });

// ネイティブ印刷をトリガー
await calendar.app.print();

// UI ダイアログを開かずにコードからエクスポート
const result = await calendar.app.exportCalendar({
  format: 'png',
  view: 'week',
});

機能一覧

4つのエクスポート形式：Print/PDF、PNG（単一または複数ページの ZIP）、Excel (.xlsx)、および iCalendar (.ics)。
9種類の用紙サイズ：A3、A4、A5、B3、B4、B5、Letter、Legal、Tabloid。
インタラクティブプレビュー：用紙サイズ調整プレビュー、トラックパッドピンチズーム、ドラッグパン移動。
リアルタイムデータプレビュー：xlsx や ics に切り替えると、ダイアログ内にテーブル形式のデータプレビューを表示。
ヘッドレスエクスポート：calendar.app.exportCalendar() や printPlugin.api.export() を直接呼び出してファイルや Blob を取得。
フィルタリング：カレンダーごとの絞り込み、終日イベント/時間指定イベントの表示切り替え。
ショートカット：Cmd + P または Ctrl + P で印刷ダイアログを起動。

サポートされている印刷ビュー

ビュー	説明
`day`	選択した1日または複数日を印刷。
`week`	週間カレンダーレイアウトを印刷。
`month`	月間グリッドレイアウトを印刷。
`year-fixed-week`	固定週行を使用した年間概要。デフォルトは横向き（landscape）。
`year-canvas`	縦向き（portrait）に最適化された高密度な年間概要。

コードからのエクスポート (Headless Export)

ダイアログを開かずに直接エクスポートを実行できます：

const result = await calendar.app.exportCalendar({
  format: 'xlsx',
  view: 'month',
  startDate: new Date(2026, 8, 1),
  endDate: new Date(2026, 11, 1),
  calendarIds: ['work', 'personal'],
  download: true, // false に設定するとブラウザダウンロードを行わず result.blob を返します
  pixelRatio: 3, // PNG 出力解像度倍率（1 = 96 DPI）
  onProgress: ({ completed, total }) => {
    console.log(`${total} ページ中 ${completed} ページをレンダリング`);
  },
});

console.log(result.filename); // 'calendar-2026-09_2026-12.xlsx'
console.log(result.eventCount); // エクスポートされたイベント数
console.log(result.pageCount); // レンダリングされたページ数（xlsx, ics は 0）
console.log(result.blob); // download: false 時の Blob オブジェクト

CalendarExportRequest オプション

オプション	型	デフォルト値	説明
`format`	`'print' \| 'png' \| 'xlsx' \| 'ics'`	必須	エクスポート形式。
`view`	`PrintView`	現在のビュー	レンダリングレイアウト（`day`, `week`, `month`, `year-fixed-week`, `year-canvas`）。
`paper`	`PaperSize`	現在の用紙設定	用紙サイズ（`A3`, `A4`, `A5`, `B3`, `B4`, `B5`, `Letter`, `Legal`, `Tabloid`）。
`orientation`	`'portrait' \| 'landscape'`	ビューの初期設定	ページの向き。
`startDate`	`Date`	現在の日付	エクスポート範囲の開始日。
`endDate`	`Date`	自動計算	エクスポート範囲の終了日。
`calendarIds`	`string[]`	すべてのカレンダー	対象のカレンダー ID 配列。
`options`	`Partial<CalendarPrintOptions>`	プラグインの初期値	タイポグラフィ、凡例、イベントフィルタリングオプション。
`filename`	`string`	範囲から自動生成	拡張子なしのカスタムファイル名。
`download`	`boolean`	`true`	`false` の場合、ブラウザ保存を行わず `result.blob` を返します。
`pixelRatio`	`number`	`3`	PNG 解像度倍率（1 = 96 DPI）。
`onProgress`	`(progress: { completed: number; total: number }) => void`	—	PNG ページごとの進行状況コールバック。
`signal`	`AbortSignal`	—	処理を途中でキャンセルするためのシグナル。

プラグイン設定 (PrintPluginConfig)

const printPlugin = createPrintPlugin({
  formats: ['print', 'png', 'xlsx', 'ics'],
  filename: ({ format, view, rangeStart, rangeEnd }) => `schedule-${view}`,
  pixelRatio: 3,
  defaultOptions: {
    miniCalendar: true,
    calendarKeys: true,
    textSize: 'medium',
  },
});

プロパティ	型	デフォルト値	説明
`enabled`	`boolean`	`true`	`false` に設定するとプラグインを無効化。
`formats`	`CalendarExportFormat[]`	`['print', 'png', 'xlsx', 'ics']`	ダイアログに表示するフォーマットと順序。
`filename`	`string \| ((context: CalendarExportFilenameContext) => string)`	—	カスタムファイル名または生成関数。
`pixelRatio`	`number`	`3`	PNG のデフォルト解像度倍率。
`defaultOptions`	`Partial<CalendarPrintOptions>`	—	初期オプション設定。
`license`	`PackageLicenseConfig`	—	個別ライセンス設定。

CalendarPrintOptions

プロパティ	型	デフォルト値	説明
`allDayEvents`	`boolean`	`true`	終日イベントを含める。
`timedEvents`	`boolean`	`true`	時間指定イベントを含める。
`miniCalendar`	`boolean`	`true`	印刷ヘッダーにミニカレンダーを表示。
`calendarKeys`	`boolean`	`true`	カレンダー凡例を表示。
`blackAndWhite`	`boolean`	`false`	モノクロ印刷モード。
`textSize`	`'small' \| 'medium' \| 'large'`	`medium`	プレビューおよび印刷のタイポグラフィ密度。

プラグイン API

type PrintPluginApi = {
  open: (options?: PrintDialogOpenOptions) => void;
  close: () => void;
  print: (config?: CalendarPrintConfigInput) => void;
  export: (request: CalendarExportRequest) => Promise<CalendarExportResult>;
};

目次