headers

Weekday header data for rendering calendar column headers.

Type


headers: {
  weekdays: Array<{
    key: string;  // Unique key for React rendering
    value: Date; // Date object for the weekday
  }>;
}

Usage


const { headers } = useCalendar();
 
<thead>
  <tr>
    {headers.weekdays.map(({ key, value }) => (
      <th key={key}>{format(value, 'EEE')}</th>
    ))}
  </tr>
</thead>

Formatting

Use toLocaleDateString() or Intl.DateTimeFormat to display weekday names:


value.toLocaleDateString('en', { weekday: 'long' })   // Sunday, Monday, Tuesday, ...
value.toLocaleDateString('en', { weekday: 'short' })  // Sun, Mon, Tue, ...
value.toLocaleDateString('en', { weekday: 'narrow' }) // S, M, T, ...

Week Start

The weekday order respects the defaultWeekStart option:


// Week starts on Sunday (default)
const { headers } = useCalendar({ defaultWeekStart: 0 });
// headers.weekdays[0] = Sunday
 
// Week starts on Monday
const { headers } = useCalendar({ defaultWeekStart: 1 });
// headers.weekdays[0] = Monday

You can also change it dynamically:


const { headers, view } = useCalendar();
 
view.setWeekStartsOn(1); // Change to Monday
// headers.weekdays will update accordingly