Are the ai2 Week calendars free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Do they respect reduced motion?

Yes. Under prefers-reduced-motion, nothing changes, there is no animation to skip.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Week calendars

Five calendars that trade the month grid for a week or agenda view: a week row, scrollable day pills, a vertical agenda, a toolbar strip and week rows with a week-number gutter. The week views step a week with the single chevrons and a month with the double chevrons; the agenda and row views step months. Each is self-contained (no date library) and starts from a fixed month so the output stays deterministic.

CalendarWeek

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/calendar-week

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install lucide-react

Copy the source

components/ui/calendar-week.tsx

"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react"

import { cn } from "@/lib/utils"

/* Week calendar family: 5 calendars offering week and agenda views instead of a month grid. Determinism: the visible week and month derive from a FIXED constant (January 2026), NOT from the clock; the agenda data is a hand-written fixed table. The week-based views jump a month with a double chevron and a week with a single one; the agenda and row views jump a month. Colour comes ONLY from semantic tokens. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const MONTHS = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
] as const

const WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"] as const

const FIXED_MONTH = new Date(2026, 0, 1)

function startOfMonth(d: Date) {
  return new Date(d.getFullYear(), d.getMonth(), 1)
}

function addMonths(d: Date, n: number) {
  return new Date(d.getFullYear(), d.getMonth() + n, 1)
}

function addDays(d: Date, n: number) {
  const next = new Date(d.getFullYear(), d.getMonth(), d.getDate())
  next.setDate(next.getDate() + n)
  return next
}

/* Pazartesi baslangicli hafta basi. */
function startOfWeek(d: Date) {
  const offset = (d.getDay() + 6) % 7
  return addDays(new Date(d.getFullYear(), d.getMonth(), d.getDate()), -offset)
}

function daysInMonth(d: Date) {
  return new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate()
}

function isSameDay(a: Date | null | undefined, b: Date | null | undefined) {
  return (
    !!a &&
    !!b &&
    a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate() === b.getDate()
  )
}

function buildWeek(anchor: Date): Date[] {
  const start = startOfWeek(anchor)
  const days: Date[] = []
  for (let i = 0; i < 7; i++) days.push(addDays(start, i))
  return days
}

function buildMonthGrid(month: Date): Date[] {
  const first = startOfMonth(month)
  const offset = (first.getDay() + 6) % 7
  const start = addDays(first, -offset)
  const days: Date[] = []
  for (let i = 0; i < 42; i++) days.push(addDays(start, i))
  return days
}

function toWeeks(days: Date[]): Date[][] {
  const weeks: Date[][] = []
  for (let i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7))
  return weeks
}

function ariaLabel(d: Date) {
  return `${MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`
}

/* For week-based views: week and month steps. */
function useVisibleWeek(defaultMonth?: Date) {
  const [anchor, setAnchor] = React.useState<Date>(() =>
    startOfWeek(startOfMonth(defaultMonth ?? FIXED_MONTH))
  )
  const prevWeek = React.useCallback(() => setAnchor((a) => addDays(a, -7)), [])
  const nextWeek = React.useCallback(() => setAnchor((a) => addDays(a, 7)), [])
  const prevMonth = React.useCallback(
    () => setAnchor((a) => startOfWeek(addMonths(a, -1))),
    []
  )
  const nextMonth = React.useCallback(
    () => setAnchor((a) => startOfWeek(addMonths(a, 1))),
    []
  )
  return { anchor, prevWeek, nextWeek, prevMonth, nextMonth }
}

function useVisibleMonth(defaultMonth?: Date) {
  const [visible, setVisible] = React.useState<Date>(() =>
    startOfMonth(defaultMonth ?? FIXED_MONTH)
  )
  const goPrev = React.useCallback(() => setVisible((m) => addMonths(m, -1)), [])
  const goNext = React.useCallback(() => setVisible((m) => addMonths(m, 1)), [])
  return { visible, goPrev, goNext }
}

function useSelected(defaultValue?: Date, onSelect?: (d: Date) => void) {
  const [selected, setSelected] = React.useState<Date | undefined>(defaultValue)
  const select = React.useCallback(
    (d: Date) => {
      setSelected(d)
      onSelect?.(d)
    },
    [onSelect]
  )
  return { selected, select }
}

const navButton =
  "inline-flex size-7 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const rootBase =
  "rounded-xl border border-border bg-card p-3 text-card-foreground"

const focusRing =
  "outline-none focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50"

const selectedFill =
  "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground"

export interface WeekCalendarProps {
  className?: string
  size?: StyledSize
  defaultMonth?: Date
  defaultValue?: Date
  onSelect?: (d: Date) => void
}

/* Hafta tabanli gorunumlerin ortak basligi: ay/hafta adimlari + gorunur ay adi. */
function WeekHeader({
  titleId,
  anchor,
  prevWeek,
  nextWeek,
  prevMonth,
  nextMonth,
}: {
  titleId: string
  anchor: Date
  prevWeek: () => void
  nextWeek: () => void
  prevMonth: () => void
  nextMonth: () => void
}) {
  return (
    <div className="mb-2 flex items-center justify-between gap-1 px-0.5">
      <div className="flex items-center gap-0.5">
        <button type="button" onClick={prevMonth} aria-label="Previous month" className={navButton}>
          <ChevronsLeft />
        </button>
        <button type="button" onClick={prevWeek} aria-label="Previous week" className={navButton}>
          <ChevronLeft />
        </button>
      </div>
      <div id={titleId} aria-live="polite" className="text-sm font-medium">
        {MONTHS[anchor.getMonth()]} {anchor.getFullYear()}
      </div>
      <div className="flex items-center gap-0.5">
        <button type="button" onClick={nextWeek} aria-label="Next week" className={navButton}>
          <ChevronRight />
        </button>
        <button type="button" onClick={nextMonth} aria-label="Next month" className={navButton}>
          <ChevronsRight />
        </button>
      </div>
    </div>
  )
}

/* ---- 1. WeekCalendar: tek hafta, gun adi ustte, buyuk gun numarasi ---- */

const weekCellSizes: Record<StyledSize, string> = {
  sm: "h-12 text-sm",
  md: "h-14 text-base",
  lg: "h-16 text-lg",
  xl: "h-20 text-xl",
}

export function WeekCalendar({
  className,
  size = "md",
  defaultMonth,
  defaultValue,
  onSelect,
}: WeekCalendarProps) {
  const { anchor, prevWeek, nextWeek, prevMonth, nextMonth } = useVisibleWeek(defaultMonth)
  const { selected, select } = useSelected(defaultValue, onSelect)
  const titleId = React.useId()
  const days = buildWeek(anchor)

  return (
    <div
      data-slot="styled-calendar"
      role="grid"
      aria-labelledby={titleId}
      className={cn(rootBase, "inline-block", className)}
    >
      <WeekHeader
        titleId={titleId}
        anchor={anchor}
        prevWeek={prevWeek}
        nextWeek={nextWeek}
        prevMonth={prevMonth}
        nextMonth={nextMonth}
      />
      <div role="row" className="grid grid-cols-7 gap-1">
        {days.map((d, i) => {
          const isSelected = isSameDay(d, selected)
          return (
            <button
              key={d.toISOString()}
              type="button"
              role="gridcell"
              aria-label={ariaLabel(d)}
              aria-selected={isSelected}
              onClick={() => select(d)}
              className={cn(
                "flex min-w-11 flex-col items-center justify-center gap-1 rounded-lg font-medium text-foreground transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-accent hover:text-accent-foreground motion-reduce:transition-none",
                focusRing,
                weekCellSizes[size],
                isSelected && selectedFill
              )}
            >
              <span
                className={cn(
                  "text-[0.65rem] font-medium uppercase leading-none",
                  isSelected ? "text-primary-foreground/80" : "text-muted-foreground"
                )}
              >
                {WEEKDAYS[i]}
              </span>
              <span className="leading-none tabular-nums">{d.getDate()}</span>
            </button>
          )
        })}
      </div>
    </div>
  )
}

/* ---- 2. DaysCalendar: yatay kaydirilabilir gun hapleri ---- */

const dayPillSizes: Record<StyledSize, string> = {
  sm: "h-12 w-11 text-sm",
  md: "h-14 w-12 text-base",
  lg: "h-16 w-14 text-lg",
  xl: "h-20 w-16 text-xl",
}

export function DaysCalendar({
  className,
  size = "md",
  defaultMonth,
  defaultValue,
  onSelect,
}: WeekCalendarProps) {
  const { anchor, prevWeek, nextWeek, prevMonth, nextMonth } = useVisibleWeek(defaultMonth)
  const { selected, select } = useSelected(defaultValue, onSelect)
  const titleId = React.useId()
  const days = buildWeek(anchor)

  return (
    <div
      data-slot="styled-calendar"
      role="grid"
      aria-labelledby={titleId}
      className={cn(rootBase, "inline-block max-w-full", className)}
    >
      <WeekHeader
        titleId={titleId}
        anchor={anchor}
        prevWeek={prevWeek}
        nextWeek={nextWeek}
        prevMonth={prevMonth}
        nextMonth={nextMonth}
      />
      <div role="row" className="flex gap-1.5 overflow-x-auto pb-1">
        {days.map((d, i) => {
          const isSelected = isSameDay(d, selected)
          return (
            <button
              key={d.toISOString()}
              type="button"
              role="gridcell"
              aria-label={ariaLabel(d)}
              aria-selected={isSelected}
              onClick={() => select(d)}
              className={cn(
                "flex shrink-0 flex-col items-center justify-center gap-1 rounded-full border border-border font-medium text-foreground transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-accent hover:text-accent-foreground motion-reduce:transition-none",
                focusRing,
                dayPillSizes[size],
                isSelected && cn(selectedFill, "border-primary")
              )}
            >
              <span
                className={cn(
                  "text-[0.65rem] font-medium uppercase leading-none",
                  isSelected ? "text-primary-foreground/80" : "text-muted-foreground"
                )}
              >
                {WEEKDAYS[i]}
              </span>
              <span className="leading-none tabular-nums">{d.getDate()}</span>
            </button>
          )
        })}
      </div>
    </div>
  )
}

/* ---- 3. AgendaCalendar: gorunur ayin ajanda kayitlarini dikey listeler ---- */

/* Sabit ajanda tablosu: ayin gunu -> baslik. Deterministik. */
const AGENDA: Record<number, string> = {
  5: "Design review",
  8: "Sprint planning",
  13: "Release cut",
  16: "Customer call",
  21: "Retrospective",
  27: "Roadmap sync",
}

const agendaRowSizes: Record<StyledSize, string> = {
  sm: "gap-2 px-2 py-1.5 text-xs",
  md: "gap-3 px-3 py-2 text-sm",
  lg: "gap-3 px-3 py-2.5 text-sm",
  xl: "gap-4 px-4 py-3 text-base",
}

export function AgendaCalendar({
  className,
  size = "md",
  defaultMonth,
  defaultValue,
  onSelect,
}: WeekCalendarProps) {
  const { visible, goPrev, goNext } = useVisibleMonth(defaultMonth)
  const { selected, select } = useSelected(defaultValue, onSelect)
  const titleId = React.useId()
  const total = daysInMonth(visible)
  const entries = Object.keys(AGENDA)
    .map((k) => Number(k))
    .filter((day) => day <= total)
    .sort((a, b) => a - b)
    .map((day) => ({ day, date: new Date(visible.getFullYear(), visible.getMonth(), day) }))

  return (
    <div
      data-slot="styled-calendar"
      role="grid"
      aria-labelledby={titleId}
      className={cn(rootBase, "inline-block w-full max-w-sm", className)}
    >
      <div className="mb-2 flex items-center justify-between gap-2 px-1">
        <button type="button" onClick={goPrev} aria-label="Previous month" className={navButton}>
          <ChevronLeft />
        </button>
        <div id={titleId} aria-live="polite" className="text-sm font-medium">
          {MONTHS[visible.getMonth()]} {visible.getFullYear()}
        </div>
        <button type="button" onClick={goNext} aria-label="Next month" className={navButton}>
          <ChevronRight />
        </button>
      </div>
      <div className="flex flex-col gap-1">
        {entries.map(({ day, date }) => {
          const isSelected = isSameDay(date, selected)
          return (
            <div key={day} role="row">
              <button
                type="button"
                role="gridcell"
                aria-label={ariaLabel(date)}
                aria-selected={isSelected}
                onClick={() => select(date)}
                className={cn(
                  "flex w-full items-center rounded-lg text-left text-foreground transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-accent hover:text-accent-foreground motion-reduce:transition-none",
                  focusRing,
                  agendaRowSizes[size],
                  isSelected && selectedFill
                )}
              >
                <span className="flex w-8 shrink-0 flex-col items-center">
                  <span
                    className={cn(
                      "text-[0.65rem] font-medium uppercase leading-none",
                      isSelected ? "text-primary-foreground/80" : "text-muted-foreground"
                    )}
                  >
                    {WEEKDAYS[(date.getDay() + 6) % 7]}
                  </span>
                  <span className="font-semibold leading-tight tabular-nums">{day}</span>
                </span>
                <span
                  aria-hidden="true"
                  className={cn(
                    "h-6 w-px shrink-0",
                    isSelected ? "bg-primary-foreground/40" : "bg-border"
                  )}
                />
                <span className="truncate">{AGENDA[day]}</span>
              </button>
            </div>
          )
        })}
      </div>
    </div>
  )
}

/* ---- 4. StripCalendar: tek satirlik, cok sik hafta seridi ---- */

const stripCellSizes: Record<StyledSize, string> = {
  sm: "h-7 w-7 text-[0.7rem]",
  md: "h-8 w-8 text-xs",
  lg: "h-9 w-9 text-sm",
  xl: "h-10 w-10 text-sm",
}

export function StripCalendar({
  className,
  size = "md",
  defaultMonth,
  defaultValue,
  onSelect,
}: WeekCalendarProps) {
  const { anchor, prevWeek, nextWeek, prevMonth, nextMonth } = useVisibleWeek(defaultMonth)
  const { selected, select } = useSelected(defaultValue, onSelect)
  const titleId = React.useId()
  const days = buildWeek(anchor)

  return (
    <div
      data-slot="styled-calendar"
      role="grid"
      aria-labelledby={titleId}
      className={cn(
        "inline-flex items-center gap-2 rounded-full border border-border bg-card px-2 py-1.5 text-card-foreground",
        className
      )}
    >
      <div className="flex items-center">
        <button type="button" onClick={prevMonth} aria-label="Previous month" className={navButton}>
          <ChevronsLeft />
        </button>
        <button type="button" onClick={prevWeek} aria-label="Previous week" className={navButton}>
          <ChevronLeft />
        </button>
      </div>
      <span id={titleId} aria-live="polite" className="sr-only">
        {MONTHS[anchor.getMonth()]} {anchor.getFullYear()}
      </span>
      <div role="row" className="flex items-center gap-0.5">
        {days.map((d) => {
          const isSelected = isSameDay(d, selected)
          return (
            <button
              key={d.toISOString()}
              type="button"
              role="gridcell"
              aria-label={ariaLabel(d)}
              aria-selected={isSelected}
              onClick={() => select(d)}
              className={cn(
                "inline-flex items-center justify-center rounded-full font-medium text-foreground tabular-nums transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-accent hover:text-accent-foreground motion-reduce:transition-none",
                focusRing,
                stripCellSizes[size],
                isSelected && selectedFill
              )}
            >
              {d.getDate()}
            </button>
          )
        })}
      </div>
      <div className="flex items-center">
        <button type="button" onClick={nextWeek} aria-label="Next week" className={navButton}>
          <ChevronRight />
        </button>
        <button type="button" onClick={nextMonth} aria-label="Next month" className={navButton}>
          <ChevronsRight />
        </button>
      </div>
    </div>
  )
}

/* ---- 5. RowCalendar: ay, hafta numarasi olugu olan satirlar halinde ---- */

const rowCellSizes: Record<StyledSize, string> = {
  sm: "h-8 text-xs",
  md: "h-9 text-sm",
  lg: "h-10 text-sm",
  xl: "h-11 text-base",
}

export function RowCalendar({
  className,
  size = "md",
  defaultMonth,
  defaultValue,
  onSelect,
}: WeekCalendarProps) {
  const { visible, goPrev, goNext } = useVisibleMonth(defaultMonth)
  const { selected, select } = useSelected(defaultValue, onSelect)
  const titleId = React.useId()
  const weeks = toWeeks(buildMonthGrid(visible))

  return (
    <div
      data-slot="styled-calendar"
      role="grid"
      aria-labelledby={titleId}
      className={cn(rootBase, "inline-block", className)}
    >
      <div className="mb-2 flex items-center justify-between gap-2 px-1">
        <button type="button" onClick={goPrev} aria-label="Previous month" className={navButton}>
          <ChevronLeft />
        </button>
        <div id={titleId} aria-live="polite" className="text-sm font-medium">
          {MONTHS[visible.getMonth()]} {visible.getFullYear()}
        </div>
        <button type="button" onClick={goNext} aria-label="Next month" className={navButton}>
          <ChevronRight />
        </button>
      </div>
      <div role="row" className="grid grid-cols-[2rem_repeat(7,minmax(0,1fr))] gap-1">
        <div role="columnheader" className="sr-only">
          Week
        </div>
        {WEEKDAYS.map((w) => (
          <div
            key={w}
            role="columnheader"
            className="flex items-center justify-center py-1 text-xs font-medium text-muted-foreground"
          >
            {w}
          </div>
        ))}
      </div>
      <div className="flex flex-col gap-1">
        {weeks.map((week, wi) => (
          <div
            key={week[0].toISOString()}
            role="row"
            className="grid grid-cols-[2rem_repeat(7,minmax(0,1fr))] items-center gap-1 rounded-lg transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-[color-mix(in_oklab,var(--color-foreground)_4%,transparent)] motion-reduce:transition-none"
          >
            <div
              role="rowheader"
              className="flex items-center justify-center text-[0.65rem] font-medium text-muted-foreground tabular-nums"
            >
              W{wi + 1}
            </div>
            {week.map((d) => {
              const outside = d.getMonth() !== visible.getMonth()
              const isSelected = isSameDay(d, selected)
              return (
                <button
                  key={d.toISOString()}
                  type="button"
                  role="gridcell"
                  aria-label={ariaLabel(d)}
                  aria-selected={isSelected}
                  onClick={() => select(d)}
                  className={cn(
                    "inline-flex min-w-9 items-center justify-center rounded-md font-normal text-foreground tabular-nums transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-accent hover:text-accent-foreground motion-reduce:transition-none",
                    focusRing,
                    rowCellSizes[size],
                    outside && "text-muted-foreground/50",
                    isSelected && selectedFill
                  )}
                >
                  {d.getDate()}
                </button>
              )
            })}
          </div>
        ))}
      </div>
    </div>
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Week

A single week with the weekday name above each day.

December 2025

Days

A scrollable row of day pills.

December 2025

Agenda

The month's entries as a vertical agenda list.

January 2026

Strip

A one-line week strip that fits in a toolbar.

Row

The full month as week rows with a week-number gutter.

January 2026

ai2 Week calendars: 5 styled variations on the token system

The ai2 Week calendars are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around week and agenda calendars instead of a full month grid. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: no transition; navigation swaps the visible week or month instantly. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, nothing changes, there is no animation to skip.

What is in the ai2 Week calendars?

5 exports in one file: Week, Days, Agenda, Strip and Row. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: no transition; navigation swaps the visible week or month instantly.
Reduced-motion aware: Under prefers-reduced-motion, nothing changes, there is no animation to skip.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Week calendars sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.