键盘快捷键插件
键盘快捷键 (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 |
| 视图导航 | 左箭头 / 右箭头 | 左箭头 / 右箭头 |
| 循环选择事件 | 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();