キーボードショートカットプラグイン

キーボードショートカット (Keyboard Shortcuts) プラグインは、ナビゲーション、イベント管理、およびクリップボード操作のためのグローバルなキーボードコントロールを可能にします。

インストール

プラグインパッケージをインストールします：

npm install @dayflow/plugin-keyboard-shortcuts

pnpm add @dayflow/plugin-keyboard-shortcuts

yarn add @dayflow/plugin-keyboard-shortcuts

bun add @dayflow/plugin-keyboard-shortcuts

使い方

import { useCalendarApp, DayFlowCalendar } from '@dayflow/react';
import { createKeyboardShortcutsPlugin } from '@dayflow/plugin-keyboard-shortcuts';

function MyCalendar() {
  const calendar = useCalendarApp({
    views: [
      /* ビュー */
    ],
    plugins: [
      createKeyboardShortcutsPlugin({
        // オプション設定
      }),
    ],
  });

  return <DayFlowCalendar calendar={calendar} />;
}

<template>
  <DayFlowCalendar :calendar="calendar" />
</template>

<script setup>
import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
import { createKeyboardShortcutsPlugin } from '@dayflow/plugin-keyboard-shortcuts';

const calendar = useCalendarApp({
  views: [
    /* ビュー */
  ],
  plugins: [
    createKeyboardShortcutsPlugin({
      // オプション設定
    }),
  ],
});
</script>

import { Component } from '@angular/core';
import { DayFlowCalendarModule } from '@dayflow/angular';
import { createKeyboardShortcutsPlugin } from '@dayflow/plugin-keyboard-shortcuts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `<dayflow-calendar [calendar]="calendar"></dayflow-calendar>`
})
export class AppComponent {
  calendar = {
    views: [
      /* ビュー */
    ],
    plugins: [
      createKeyboardShortcutsPlugin({
        // オプション設定
      })
    ]
  };
}

<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import { createKeyboardShortcutsPlugin } from '@dayflow/plugin-keyboard-shortcuts';

  const calendar = useCalendarApp({
    views: [
      /* ビュー */
    ],
    plugins: [
      createKeyboardShortcutsPlugin({
        // オプション設定
      }),
    ],
  });
</script>

<DayFlowCalendar {calendar} />

デフォルトのショートカット

操作	キー (Mac)	キー (Windows/Linux)
今日に移動	`Cmd + T`	`Ctrl + T`
検索	`Cmd + F`	`Ctrl + F`
新規イベント	`Cmd + N`	`Ctrl + N`
ナビゲーション	`ArrowLeft` / `ArrowRight`	`ArrowLeft` / `ArrowRight`
イベントのタブ移動	`Tab` / `Shift + Tab`	`Tab` / `Shift + Tab`
元に戻す	`Cmd + Z`	`Ctrl + Z`
やり直し	`Cmd + Shift + Z` / `Cmd + Y`	`Ctrl + Y`
イベントをコピー	`Cmd + C`	`Ctrl + C`
イベントを切り取り	`Cmd + X`	`Ctrl + X`
イベントを貼り付け	`Cmd + V`	`Ctrl + V`
イベントを削除	`Backspace` / `Delete`	`Backspace` / `Delete`
ダイアログ/パネルを閉じる	`Esc`	`Esc`

設定

キーマッピングをカスタマイズしたり、各アクションにカスタムコールバックを提供したりできます：

createKeyboardShortcutsPlugin({
  keyMap: {
    today: 't',
    search: 'f',
    prev: 'ArrowLeft',
    next: 'ArrowRight',
    undo: 'z',
    redo: 'y',
    delete: 'Delete',
    newEvent: 'n',
  },
  callbacks: {
    undo: app => {
      console.log('カスタムの元に戻すロジック');
      app.undo();
    },
    redo: app => {
      console.log('カスタムのやり直しロジック');
      if ((app as any).redo) (app as any).redo();
    },
    delete: app => {
      if (confirm('本当に削除しますか？')) {
        const selectedId = app.state.selectedEventId;
        if (selectedId) app.deleteEvent(selectedId);
      }
    },
  },
});

利用可能なコールバック

callbacks オブジェクトでは以下のコールバックがサポートされています：

undo, redo, paste (app を受け取ります)
copy, cut, delete (app と event?: Event を受け取ります)
today, search, prev, next, newEvent, dismiss (app を受け取ります)
tab (app と reverse: boolean を受け取ります)

プラグイン API

プラグインハンドルを取得して、実行時にショートカットの動作を制御できます：

import { type KeyboardShortcutsService } from '@dayflow/plugin-keyboard-shortcuts';

const kb = app.getPlugin<KeyboardShortcutsService>('keyboard-shortcuts');

KeyboardShortcutsService

メソッド	返り値	説明
`enable()`	`void`	ショートカット処理を再有効化する
`disable()`	`void`	`enable()` が呼ばれるまで全ショートカットを抑制する
`isEnabled()`	`boolean`	ショートカットが現在有効かどうかを返す

よくある使用例として、カスタムモーダルやリッチテキストエディタが開いている間、カレンダーのショートカットを一時的に抑制する場合があります：

function MyModal() {
  const kb = app.getPlugin<KeyboardShortcutsService>('keyboard-shortcuts');

  useEffect(() => {
    kb?.disable();
    return () => kb?.enable(); // アンマウント時に復元
  }, []);

  // ...
}

プログラムから開いている UI を閉じることもできます：

app.dismissUI();

目次