键盘快捷键插件

键盘快捷键 (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 + TCtrl + T
搜索Cmd + FCtrl + F
新建事件Cmd + NCtrl + N
视图导航左箭头 / 右箭头左箭头 / 右箭头
循环选择事件Tab / Shift + TabTab / Shift + Tab
撤销Cmd + ZCtrl + Z
重做Cmd + Shift + Z / Cmd + YCtrl + Y
复制事件Cmd + CCtrl + C
剪切事件Cmd + XCtrl + X
粘贴事件Cmd + VCtrl + V
删除事件Backspace / DeleteBackspace / Delete
关闭弹窗/面板EscEsc

配置项

您可以自定义按键映射并为每个操作提供自定义回调函数:

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 (接收 appevent?: Event 参数)
  • today, search, prev, next, newEvent, dismiss (接收 app 参数)
  • tab (接收 appreverse: boolean 参数)

插件 API

您可以通过编程方式触发 UI 关闭:

calendar.app.dismissUI();

On this page