キーボードショートカットプラグイン
キーボードショートカット (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 } from '@dayflow/core';
import { createKeyboardShortcutsPlugin } from '@dayflow/plugin-keyboard-shortcuts';
function MyCalendar() {
const calendar = useCalendarApp({
// ...
plugins: [
createKeyboardShortcutsPlugin({
// オプション設定
}),
],
});
return <DayFlowCalendar calendar={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
UI をプログラムから閉じることができます：
calendar.app.dismissUI();