Introduction

Hapio Calendar is an open-source calendar and scheduler for React apps that use shadcn/ui. It is MIT licensed, and there is no premium tier, ever: every view and feature, now and later, is free.

What it doesCopy Anchor Link

• Views: week and day time grids (and any number of days), month, week and day grids of day cells, and a list of events by day. The view switcher, navigation and nav links come with them.
• Time zones done right: every calendar has its own IANA zone, changing it re-renders without remounting, and daylight saving time is handled to the minute: 23- and 25-hour days, the hour that happens twice, days that start at 01:00. See Time zones.
• Selection and editing: select times and days, move and resize events with a mouse, a finger or the keyboard, with rules (constraints, overlap, your own checks) that say why a place is refused. An optimistic overlay shows a change at once and reverts it if your save fails.
• Without dragging: every move and resize also works with a single pointer and from the keyboard, through each event's actions menu (WCAG 2.5.7). See Event actions.
• Drag-in: items from outside the calendar (a palette of services, files from the desktop, or another drag-and-drop library) can be dropped or placed on it.
• Recurring events: RFC 5545 rules with this, this-and-following and all-events edits, on the client or expanded on your server.
• Accessible by contract: two roving keyboard composites per view, announcements through a live region, names and descriptions for every event, and a published accessibility contract that a development checker and your tests enforce.
• Languages: any locale Intl knows, a full Swedish string pack, right-to-left layouts.
• Print: the whole visible range, without scrollbars, from the browser's own print.

How it is builtCopy Anchor Link

Hapio Calendar has three layers, and you choose how deep you go:

• @hapio/calendar-core is framework-free TypeScript: dates, time zones, layout, rules, the interaction engines and the store. It is safe to import in React Server Components.
• @hapio/calendar-react provides headless hooks that return prop-getters: every role, ARIA attribute, id, handler and geometry variable an element needs. It renders no DOM and ships no CSS. It re-exports the core, so apps install one package.
• The @hapio shadcn registry owns every element and every Tailwind class. You add its components to your app with the shadcn CLI and edit them like any other shadcn component. The hapio-calendar block, HapioCalendar, is the batteries-included calendar.

Most apps use the block with its props. When the props are not enough, edit the copied files; when you need markup of your own, build it on the hooks and check it with runConformance. Customization maps each need to its path.

Two more packages complete it: @hapio/calendar-recurrence (the RFC 5545 engine) and @hapio/calendar-compat, which maps the options of the calendar you may be migrating from onto the same block. See the migration guide.

Where to startCopy Anchor Link

What comes after 1.0Copy Anchor Link

Later releases add views without changing what 1.0 provides: a minimum day width and print options (1.1), a timeline view and virtualization (1.2), resource timelines (1.3) and resource columns in time grids (1.4). Events, rules and drops carry resource ids already, so data written for 1.0 keeps working.