ember-power-calendar

Customizable Calendar Component for Ember.

Features

• 🖊 TypeScript support – ships with type definitions for smooth TypeScript integration.
• ✨ Glint support – template type-checking out of the box for safer templates.
• 🚀 FastBoot compatible – works in server-rendered Ember apps.
• 🕶 Shadow DOM support – can be rendered inside shadow roots without breaking positioning or events.
• 🛠 Addon v2 ready – modern Ember Addon v2 format.
• 🧱 Headless & flexible – build any calendar or date-picker UI without being constrained by markup or styles.
• 🎯 Powerful selection modes – choose between single, range, or multiple date selection
• 🔧 Flexible calendar API – plug in your preferred date library (e.g., momentjs, date-fns, Luxon)
• 🧩 Composable – assemble calendars using yielded subcomponents like days and navigation.
• ♿ Accessible by default – full keyboard navigation, ARIA attributes, and focus management built-in.
• 🎨 Fully customizable rendering – control how days, headers, and disabled states are displayed.

Compatibility

• Embroider or ember-auto-import v2
• Ember.js v4.12 or above

Installation

pnpm install ember-power-calendar

Usage

There are many possible ways to use it, for giving you just a taste of the API:

import PowerCalendar from "ember-power-calendar/components/power-calendar";

<template>
  <PowerCalendar @selected={{this.arrival}} @onSelect={{this.onChange}} as |calendar|>
    <calendar.Nav/>
    <calendar.Days/>
  </PowerCalendar>
</template>

Check the full documentation at www.ember-power-calendar.com