Keyboard Shortcuts

This plugin binds a global keydown listener and maps it to scheduler actions. Bindings are ignored while the user is typing in an input, textarea, select, or contenteditable element.

Installation

npm install @dayflow-scheduler/plugin-keyboard-shortcuts

Usage

The factory takes a required config object: pass {} to accept every default.

import { useSchedulerApp, DayflowScheduler } from '@dayflow-scheduler/react';
import { createSchedulerKeyboardShortcutsPlugin } from '@dayflow-scheduler/plugin-keyboard-shortcuts';

export function MyScheduler() {
  const app = useSchedulerApp({
    resources,
    events,
    plugins: [createSchedulerKeyboardShortcutsPlugin({})],
  });

  return <DayflowScheduler app={app} />;
}

import { useSchedulerApp } from '@dayflow-scheduler/vue';
import { createSchedulerKeyboardShortcutsPlugin } from '@dayflow-scheduler/plugin-keyboard-shortcuts';

const app = useSchedulerApp({
  resources,
  events,
  plugins: [createSchedulerKeyboardShortcutsPlugin({})],
});

import { SchedulerApp } from '@dayflow-scheduler/angular';
import { createSchedulerKeyboardShortcutsPlugin } from '@dayflow-scheduler/plugin-keyboard-shortcuts';

app = new SchedulerApp({
  resources: this.resources,
  events: this.events,
  plugins: [createSchedulerKeyboardShortcutsPlugin({})],
});

import { createSchedulerApp } from '@dayflow-scheduler/svelte';
import { createSchedulerKeyboardShortcutsPlugin } from '@dayflow-scheduler/plugin-keyboard-shortcuts';

const app = createSchedulerApp({
  resources,
  events,
  plugins: [createSchedulerKeyboardShortcutsPlugin({})],
});

Default Shortcuts

Action	macOS	Windows / Linux
Go to today	`Cmd + T`	`Ctrl + T`
Search	`Cmd + F`	`Ctrl + F`
New event	`Cmd + N`	`Ctrl + N`
Previous / next range	`←` / `→`	`←` / `→`
Cycle through events	`Tab` / `Shift + Tab`	`Tab` / `Shift + Tab`
Undo	`Cmd + Z`	`Ctrl + Z`
Redo	`Cmd + Shift + Z` / `Cmd + Y`	`Ctrl + Y`
Copy / cut / paste event	`Cmd + C` / `X` / `V`	`Ctrl + C` / `X` / `V`
Delete event	`Backspace` / `Delete`	`Backspace` / `Delete`
Close dialogs and panels	`Esc`	`Esc`

Options

Option	Type	Default	Description
`enabled`	`boolean`	`true`	Set to `false` to detach the listener without removing the plugin.
`keyMap`	`KeyMap`	-	Overrides the default key bindings.
`callbacks`	`Callbacks`	-	Overrides the default action handlers.

KeyMap

Each entry is a KeyboardEvent.key value. Actions that need Cmd/Ctrl list only the letter: the modifier is always required. Navigation keys match without a modifier.

Key	Default	Triggered by	Action
`today`	`'t'`	`Cmd/Ctrl + T`	Jump to today.
`search`	`'f'`	`Cmd/Ctrl + F`	Open the search bar.
`newEvent`	`'n'`	`Cmd/Ctrl + N`	Start new event creation.
`prev`	`'ArrowLeft'`	`←`	Navigate to the previous range.
`next`	`'ArrowRight'`	`→`	Navigate to the next range.
`undo`	`'z'`	`Cmd/Ctrl + Z`	Undo the last change.
`redo`	`'y'`	`Cmd/Ctrl + Y` or `Cmd + Shift + Z`	Redo the last undone change.
`copy`	`'c'`	`Cmd/Ctrl + C`	Copy the selected event.
`cut`	`'x'`	`Cmd/Ctrl + X`	Cut the selected event.
`paste`	`'v'`	`Cmd/Ctrl + V`	Paste the copied event.
`delete`	`'Delete'`	`Backspace` or `Delete`	Delete the selected event.

createSchedulerKeyboardShortcutsPlugin({
  keyMap: { today: 'd', newEvent: 'i' },
});

Only list the keys you want to change; unlisted keys keep their defaults.

Callbacks

Callbacks replace the default action. Each receives the live app instance and may return a promise. Two signatures exist:

AppOnlyCallback: (app: ISchedulerApp) => void | Promise<void>
SelectedEventCallback: (app: ISchedulerApp, event?: SchedulerEvent) => void | Promise<void>

Callback	Signature	Default behavior
`today`	`AppOnlyCallback`	Calls `app.goToToday()`.
`prev`	`AppOnlyCallback`	Calls `app.goToPrevious()`.
`next`	`AppOnlyCallback`	Calls `app.goToNext()`.
`search`	`AppOnlyCallback`	Opens the search bar and focuses the input.
`dismiss`	`AppOnlyCallback`	Calls `app.dismissUI()`.
`paste`	`AppOnlyCallback`	Pastes the clipboard event at the selected event's position.
`copy`	`SelectedEventCallback`	Copies the selected event to the internal clipboard.
`cut`	`SelectedEventCallback`	Copies, then deletes the selected event.
`delete`	`SelectedEventCallback`	Calls `app.deleteEvent(event.id)`.
`tab`	`(app: ISchedulerApp, reverse: boolean) => void \| Promise<void>`	Cycles focus through visible events. `reverse` is `true` for `Shift + Tab`.
`newEvent`	`AppOnlyCallback`	No default: provide one to handle event creation.
`undo`	`AppOnlyCallback`	No default: provide one to hook into your undo stack.
`redo`	`AppOnlyCallback`	No default: provide one to hook into your redo stack.

createSchedulerKeyboardShortcutsPlugin({
  callbacks: {
    newEvent: app => openMyCreateDialog(app.getCurrentDate()),
    undo: app => app.undo(),
    delete: (app, event) => {
      if (event && confirm(`Delete "${event.title}"?`)) {
        app.deleteEvent(event.id);
      }
    },
  },
});

The app argument is the same instance returned by useSchedulerApp; see The App Instance for its full API.

Dismissing UI Programmatically

Esc maps to app.dismissUI(), which you can also call directly to close any open panel, dialog, or menu:

app.dismissUI();

useSchedulerApp: every method available to a callback.
Drag & Drop: pointer equivalents for the same actions.
Registry Access & License: the license option.

On this page