0

I'm trying to implement a keyboard interface to my fullcalendar widget in an Angular app. The requirements call for being able to delete an event using the delete key, but there doesn't seem to be any keyboard event to attach to.

I've added the concept of selection to an event by listening for the click on it - then it shows itself differently, but how to actually listen for a keydown event?

Since fullcalendar is dependent on jquery I tried adding an event listener using .on('keydown'...) but it never fires, although using a similar technique to listen for click events does work, so maybe somehow fullcalendar is eating keypresses.

Craig Shearer
  • 14,222
  • 19
  • 64
  • 95
  • 1
    AFAIK keydown (and other keyboard events) only fire from input elements. Since your rendered event isn't one of those, it won't attach to it directly. What I suspect would work is: handle eventClick in fullCalendar, and use it to mark the event as selected. Then listen for the delete key being pressed on the whole document. In the callback for that, check if an event is selected or not (using whatever marker you created before) and if so, initiate your deletion process. – ADyson Aug 25 '17 at 13:43
  • 1
    You haven't posted your code, but it sounds like you're fairly close to this already. It might just be a case of moving the event handler for the key press to listen on `document`? The only other possibility, according to https://stackoverflow.com/questions/3149362/capture-key-press-or-keydown-event-on-div-element is you may be able to use JS to set the focus on the event element after it's clicked, and, if you can also give the event's HTML element a tabindex property (using the eventRender callback?) then it may be able to handle key events while it has the focus. – ADyson Aug 25 '17 at 13:47
  • @ADyson Thanks - your comments were helpful - got it working now. :) – Craig Shearer Aug 31 '17 at 23:06

0 Answers0