PivotCalendar

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-pivot-calendar

pnpm add date-fns react-native-gesture-handler react-native-reanimated tailwind-variants

The public API (PivotCalendar, pivotCalendarVariants, usePivotCalendarController, the helpers and every type) matches the web component. helpers.ts, types.ts and the controller hook are synced copies of the web source. The layout is redesigned for phones:

• Toolbar: group-filter icon · ‹ title › · Today on one line, with a horizontally scrollable view switcher (Month / Week / Days / Year) underneath.
• Month view: a 7-column grid. Each day shows the first measure (the measure's formatValue, else a compact number such as 1.2K) and a coloured dot for each further non-zero measure. Tapping a day opens a bottom sheet that lists every measure, plus a per-group breakdown when groupBy is set. Each non-zero row fires onCellClick.
• Grid views (days-of-week, days-of-month, months-of-year): the group column stays fixed on the left while the date columns scroll horizontally. The view scrolls to today / the current month. A Totals row closes the grid. Each non-zero value cell fires onCellClick.
• Groups: the web side panel becomes a bottom sheet with a checkbox list (AvatarThumbnail per group) and an All / Clear toggle. The selection applies to every view.

Usage

import {
  PivotCalendar,
  type IPivotCalendarGroupBy,
  type IPivotCalendarMeasure
} from '@/components/docyrus-native/pivot-calendar';

type Sale = { date: string; region: string; amount: number };

const measures: IPivotCalendarMeasure<Sale>[] = [
  {
    id: 'revenue',
    label: 'Revenue',
    aggregate: 'sum',
    getValue: row => row.amount,
    formatValue: v => `$${(v / 1000).toFixed(1)}K`,
    color: '#10b981'
  },
  { id: 'orders', label: 'Orders', aggregate: 'count', color: '#6366f1' }
];

const groupBy: IPivotCalendarGroupBy<Sale> = {
  id: 'region',
  label: 'Region',
  getId: row => row.region
};

export function SalesCalendar({ sales }: { sales: Sale[] }) {
  return (
    <PivotCalendar<Sale>
      mode="local"
      data={sales}
      getDate={row => row.date}
      groupBy={groupBy}
      measures={measures}
      onCellClick={info => console.log(info.bucket, info.groupId, info.value)} />
  );
}

For a Docyrus data source, use useDocyrusPivotCalendar and spread its pivotCalendarProps.

API Reference

PivotCalendar

IPivotCalendarMeasure

IPivotCalendarGroupBy / IPivotCalendarGroup

IPivotCalendarCellClick

IPivotCalendarRemoteCell

Helpers

Components

Type Exports

Translations

Copy uses useUiTranslation() with English fallbacks: ui.pivotCalendar.today, previousPeriod, nextPeriod, filterGroups, views, viewMonth, viewWeek, viewDays, viewYear, groups, all, clear, noGroups, totals, total, byGroup (By {{group}}), tapToDrillDown, and weekdaySun … weekdaySat.