CoreUI ONE — 250+ PRO components and 25+ admin templates for React, Angular, Vue, Bootstrap and Next.js, plus Data Grid, Scheduler, 4,300+ PRO icons and the Next.js boilerplate. One license. → See what you get

Focusable Is Not Selectable: A Keyboard Focus Model for Date Grids

CoreUI Calendar showing October and November 2026, weekends unavailable and a Monday-to-Friday range from October 19 to 23 selected

Open almost any date picker, press Tab until you reach the grid, and focus lands on a day. Which day it can land on, and which days the arrow keys can reach, comes down to one small decision that most implementations make without noticing: can an unavailable date receive focus?

The intuitive answer is no. A disabled date is disabled, so you render it as <button disabled>, the browser skips it, and you move on. It looks right in a demo. It stops being right as soon as a real product starts disabling dates: weekends, public holidays, fully booked days, a minimum notice period, a cut-off time.

This post describes the model we use in the CoreUI v6 Calendar, and why: a cell’s focusability depends only on the calendar’s limits. Everything else decides only whether the cell can be selected.

Read More…
Subscribe to our newsletter
Get early information about new products, product updates and blog posts.