Keyboard Shortcuts Plugin

The Keyboard Shortcuts plugin enables global keyboard controls for navigation, event management, and clipboard operations.

Installation

Install the plugin package:

npm install @dayflow/plugin-keyboard-shortcuts

pnpm add @dayflow/plugin-keyboard-shortcuts

yarn add @dayflow/plugin-keyboard-shortcuts

bun add @dayflow/plugin-keyboard-shortcuts

Usage

import { useCalendarApp } from '@dayflow/core';
import { createKeyboardShortcutsPlugin } from '@dayflow/plugin-keyboard-shortcuts';

function MyCalendar() {
  const calendar = useCalendarApp({
    // ...
    plugins: [
      createKeyboardShortcutsPlugin({
        // Optional configuration
      }),
    ],
  });

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

Default Shortcuts

Action	Key (Mac)	Key (Windows/Linux)
Go to Today	`Cmd + T`	`Ctrl + T`
Search	`Cmd + F`	`Ctrl + F`
New Event	`Cmd + N`	`Ctrl + N`
Navigation	`ArrowLeft` / `ArrowRight`	`ArrowLeft` / `ArrowRight`
Tab Through Events	`Tab` / `Shift + Tab`	`Tab` / `Shift + Tab`
Undo	`Cmd + Z`	`Ctrl + Z`
Redo	`Cmd + Shift + Z` / `Cmd + Y`	`Ctrl + Y`
Copy Event	`Cmd + C`	`Ctrl + C`
Cut Event	`Cmd + X`	`Ctrl + X`
Paste Event	`Cmd + V`	`Ctrl + V`
Delete Event	`Backspace` / `Delete`	`Backspace` / `Delete`
Close Dialogs/Panels	`Esc`	`Esc`

Configuration

You can customize the key mappings and provide custom callbacks for each action:

createKeyboardShortcutsPlugin({
  keyMap: {
    today: 't',
    search: 'f',
    prev: 'ArrowLeft',
    next: 'ArrowRight',
    undo: 'z',
    redo: 'y',
    delete: 'Delete',
    newEvent: 'n',
  },
  callbacks: {
    undo: app => {
      console.log('Custom undo logic');
      app.undo();
    },
    redo: app => {
      console.log('Custom redo logic');
      if (app.redo) app.redo();
    },
    delete: app => {
      if (confirm('Are you sure?')) {
        const selectedId = app.state.selectedEventId;
        if (selectedId) app.deleteEvent(selectedId);
      }
    },
  },
});

Available Callbacks

The following callbacks are supported in the callbacks object:

undo, redo, paste (receives app)
copy, cut, delete (receives app and event?: Event)
today, search, prev, next, newEvent, dismiss (receives app)
tab (receives app and reverse: boolean)

Plugin API

You can programmatically trigger UI dismissal:

calendar.app.dismissUI();