Are the ai2 Event 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.

Event calendars

Five calendars that surface events on the day cell: dots, a count badge, a load bar, a numeric count and tone-colored markers. Each is self-contained (no date library), renders an accessible month grid, and reads its event data from a fixed table so the output stays deterministic.

CalendarEvent

Installation

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

Run the following command

npx shadcn@latest add @ai2/calendar-event

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

Install dependencies

npm install lucide-react

Copy the source

components/ui/calendar-event.tsx

"use client"

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

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

/* Event calendar family: 5 month grids where the day cells carry an event marker. Determinism: the visible month derives from a FIXED constant (January 2026), NOT from the clock; the event data is a hand-written fixed table as well. That way the server and client output stay byte-identical (prerender and hydration safe). Colour comes ONLY from semantic tokens; transparency through the Tailwind slash modifier or color-mix. */

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

/* Locale'e bagimli olmayan sabit isim tablolari. */
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 isSameDay(a: Date | null | undefined, b: Date | null | undefined) {
  return (
    !!a &&
    !!b &&
    a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate() === b.getDate()
  )
}

/* Verilen ayin 6x7 (42 gun) izgarasi; pazartesi baslangicli, tasmalar dahil. */
function buildMonthGrid(month: Date): Date[] {
  const first = startOfMonth(month)
  const offset = (first.getDay() + 6) % 7
  const start = new Date(first)
  start.setDate(first.getDate() - offset)
  const days: Date[] = []
  for (let i = 0; i < 42; i++) {
    const d = new Date(start)
    d.setDate(start.getDate() + i)
    days.push(d)
  }
  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()}`
}

/* The visible month state; always held OUTSIDE the grid. */
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 }
}

/* Sabit etkinlik tablosu: ayin gunu -> etkinlik sayisi. Deterministik. */
const EVENT_COUNTS: Record<number, number> = {
  3: 1,
  6: 2,
  9: 3,
  12: 1,
  15: 2,
  18: 1,
  21: 3,
  24: 2,
  27: 1,
  30: 2,
}

type EventTone = "info" | "success" | "warning" | "danger"

/* Sabit ton tablosu: ayin gunu -> semantic ton. Deterministik. */
const EVENT_TONES: Record<number, EventTone> = {
  3: "info",
  6: "success",
  9: "danger",
  12: "warning",
  15: "info",
  18: "success",
  21: "danger",
  24: "warning",
  27: "info",
  30: "success",
}

function eventCount(d: Date, outside: boolean) {
  if (outside) return 0
  return EVENT_COUNTS[d.getDate()] ?? 0
}

function eventTone(d: Date): EventTone {
  return EVENT_TONES[d.getDate()] ?? "info"
}

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

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 dayBase =
  "relative inline-flex flex-col items-center justify-center gap-0.5 rounded-md font-normal text-foreground outline-none transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-accent hover:text-accent-foreground focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:transition-none"

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

const dayOutside = "text-muted-foreground/50"

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

interface DayContext {
  date: Date
  outside: boolean
  isSelected: boolean
  count: number
}

/* The shared body: a header (prev/next + the month name) + weekday headings +
   weekly role="row" rows. The variants only produce the day content. */
function EventCalendarBase({
  props,
  tone,
  renderDay,
}: {
  props: EventCalendarProps
  tone?: string
  renderDay: (ctx: DayContext) => React.ReactNode
}) {
  const { className, size = "md", defaultMonth, defaultValue, onSelect } = props
  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"
      data-tone={tone}
      role="grid"
      aria-labelledby={titleId}
      className={cn(
        "inline-block rounded-xl border border-border bg-card p-3 text-card-foreground",
        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-7 gap-1">
        {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>
      {weeks.map((week) => (
        <div key={week[0].toISOString()} role="row" className="grid grid-cols-7 gap-1">
          {week.map((d) => {
            const outside = d.getMonth() !== visible.getMonth()
            const isSelected = isSameDay(d, selected)
            const count = eventCount(d, outside)
            return (
              <button
                key={d.toISOString()}
                type="button"
                role="gridcell"
                aria-label={ariaLabel(d)}
                aria-selected={isSelected}
                onClick={() => select(d)}
                className={cn(
                  dayBase,
                  cellSizes[size],
                  outside && dayOutside,
                  isSelected && daySelected
                )}
              >
                {renderDay({ date: d, outside, isSelected, count })}
              </button>
            )
          })}
        </div>
      ))}
    </div>
  )
}

/* ---- 1. DotCalendar: gun numarasinin altinda etkinlik basina bir nokta ---- */

export function DotCalendar(props: EventCalendarProps) {
  return (
    <EventCalendarBase
      props={props}
      renderDay={({ date, isSelected, count }) => (
        <>
          <span className="leading-none">{date.getDate()}</span>
          <span className="flex h-1 items-center justify-center gap-0.5">
            {Array.from({ length: count }).map((_, i) => (
              <span
                key={i}
                className={cn(
                  "size-1 rounded-full",
                  isSelected ? "bg-primary-foreground" : "bg-primary"
                )}
              />
            ))}
          </span>
        </>
      )}
    />
  )
}

/* ---- 2. BadgeCalendar: sag ust kosede etkinlik sayisi rozeti ---- */

export function BadgeCalendar(props: EventCalendarProps) {
  return (
    <EventCalendarBase
      props={props}
      renderDay={({ date, isSelected, count }) => (
        <>
          <span className="leading-none">{date.getDate()}</span>
          {count > 0 ? (
            <span
              className={cn(
                "absolute right-0.5 top-0.5 inline-flex min-w-3 items-center justify-center rounded-full px-0.5 text-[0.6rem] font-medium leading-none",
                isSelected ? "bg-primary-foreground text-primary" : "bg-primary text-primary-foreground"
              )}
            >
              {count}
            </span>
          ) : null}
        </>
      )}
    />
  )
}

/* ---- 3. BarCalendar: hucre altinda yogunlukla orantili bir cubuk ---- */

export function BarCalendar(props: EventCalendarProps) {
  return (
    <EventCalendarBase
      props={props}
      renderDay={({ date, isSelected, count }) => (
        <>
          <span className="leading-none">{date.getDate()}</span>
          <span className="flex h-1 w-full items-center px-1.5">
            {count > 0 ? (
              <span
                style={{ width: `${(Math.min(count, 3) / 3) * 100}%` }}
                className={cn(
                  "block h-0.5 rounded-full",
                  isSelected ? "bg-primary-foreground" : "bg-primary"
                )}
              />
            ) : null}
          </span>
        </>
      )}
    />
  )
}

/* ---- 4. CountCalendar: gun numarasinin altinda "N events" sayaci ---- */

export function CountCalendar(props: EventCalendarProps) {
  return (
    <EventCalendarBase
      props={props}
      renderDay={({ date, isSelected, count }) => (
        <>
          <span className="leading-none">{date.getDate()}</span>
          <span
            className={cn(
              "h-2.5 text-[0.6rem] leading-none tabular-nums",
              isSelected ? "text-primary-foreground/80" : "text-muted-foreground"
            )}
          >
            {count > 0 ? count : ""}
          </span>
        </>
      )}
    />
  )
}

/* ---- 5. ToneEventCalendar: sabit ton tablosuna gore renkli noktalar ---- */

const toneDot: Record<EventTone, string> = {
  info: "bg-info",
  success: "bg-success",
  warning: "bg-warning",
  danger: "bg-danger",
}

export function ToneEventCalendar(props: EventCalendarProps) {
  return (
    <EventCalendarBase
      props={props}
      tone="neutral"
      renderDay={({ date, isSelected, count }) => (
        <>
          <span className="leading-none">{date.getDate()}</span>
          <span className="flex h-1 items-center justify-center gap-0.5">
            {Array.from({ length: count }).map((_, i) => (
              <span
                key={i}
                className={cn(
                  "size-1 rounded-full",
                  isSelected ? "bg-primary-foreground" : toneDot[eventTone(date)]
                )}
              />
            ))}
          </span>
        </>
      )}
    />
  )
}

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.

Dot

One dot under the day number per event.

January 2026

Badge

A small count badge in the corner of the day cell.

January 2026

Bar

A bar under the day whose width tracks the event load.

January 2026

Count

A plain numeric event count under the day.

January 2026

Tone

Dots colored by the event's semantic tone.

January 2026

ai2 Event calendars: 5 styled variations on the token system

The ai2 Event calendars are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around month-grid calendars whose day cells carry event markers. 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 month transition; the markers are static and token-driven. 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 Event calendars?

5 exports in one file: Dot, Badge, Bar, Count and Tone. 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 month transition; the markers are static and token-driven.
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 Event 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.

Event calendars

Installation

Run the following command

Install dependencies

Copy the source

Variations

Dot

Badge

Bar

Count

Tone

ai2 Event calendars: 5 styled variations on the token system

What is in the ai2 Event calendars?

Why use it

Features

Production tips

Works with the rest of ai2

FAQs

Are the ai2 Event calendars free?

Do they use framer-motion?

Do they respect reduced motion?

Can I change the size?

Get new components in your inbox