PeriodPicker | Arbol UI

Language

Appearance

A report of what already happened

The calendar ends today; the page starts on the last 7 days (presetRange(7)) and can compare them with the 7 days before.

import { getLocalTimeZone, today } from '@internationalized/date';
import { useState } from 'react';
import { PeriodPicker, presetRange } from '@arbol-ai/ui';

const PastExample = () => {
  const [period, setPeriod] = useState(() => presetRange(7));
  const [isComparing, setIsComparing] = useState(true);
  return (
    <PeriodPicker
      isComparing={isComparing}
      label="Period"
      maxValue={today(getLocalTimeZone())}
      onChange={setPeriod}
      onComparingChange={setIsComparing}
      value={period}
    />
  );
};

<PastExample />

An agenda that also looks ahead

Scheduling reports add the days ahead, for appointments still to come.

import { useState } from 'react';
import { PeriodPicker, presetRange } from '@arbol-ai/ui';

const AheadExample = () => {
  const [period, setPeriod] = useState(() => presetRange({ next: 7 }));
  return (
    <div className="flex max-w-md flex-wrap gap-2">
      <PeriodPicker
        className="min-w-40 flex-1"
        firstDayOfWeek="mon"
        label="Period"
        onChange={setPeriod}
        presets={[7, 30, 90, 'this-month', 'last-month', { next: 7 }, { next: 30 }]}
        value={period}
      />
    </div>
  );
};

<AheadExample />

Source

The examples above are src/blocks/period-picker/period-picker.examples.tsx, which the library’s tests render too.