/ calendar

Calendar

@kumiki/components/calendar

Compound <Root> / <Header> / <Grid> / <Day> for single-date calendar. Uses @internationalized/date for any calendar system (Gregorian, Japanese, …).

Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**

Attach to your own DOM

<script lang="ts">
  import { createCalendar } from '@kumiki/headless/calendar';
  const ctl = createCalendar({});
</script>

<div {@attach ctl.root}>
  <!-- your markup -->
</div>

Compound components (<Root> / <Trigger> / …). Markup is fixed; styling is not. Same trade-off as a typical headless UI library.

Live preview

Compound usage

<script lang="ts">
  import { Calendar } from '@kumiki/components/calendar';
</script>

<Calendar.Root>
  <!-- subcomponents go here -->
</Calendar.Root>

Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.

Live preview

Live preview…

Install

pnpm add @kumiki/atelier

Internationalised Calendar

<script lang="ts">
  import { Tailwind as Calendar } from '@kumiki/atelier/calendar';
  import { type CalendarDate, today, getLocalTimeZone } from '@internationalized/date';

  let value = $state<CalendarDate | null>(today(getLocalTimeZone()));
</script>

<Calendar.Root bind:value>
  <Calendar.Header />
  <Calendar.Grid>
    {#snippet day(cell)}
      <Calendar.Day date={cell.date} inMonth={cell.inMonth} />
    {/snippet}
  </Calendar.Grid>
</Calendar.Root>

This component, layer by layer

Keyboard

Test discipline