Reactのカレンダーで、週の始まりの曜日を地域に合わせる方法

ja {"firstDay":7,"weekend":[6,7]}
en {"firstDay":7,"weekend":[6,7]}
de {"firstDay":1,"weekend":[6,7]}
ar {"firstDay":6,"weekend":[5,6]}
en-US {"firstDay":7,"weekend":[6,7]}
en-GB {"firstDay":1,"weekend":[6,7]}
en-US-u-fw-mon {"firstDay":1,"weekend":[6,7]}
en-GB-u-fw-sun {"firstDay":7,"weekend":[6,7]}
ja-JP-u-fw-mon {"firstDay":1,"weekend":[6,7]}
fa-IR {"firstDay":6,"weekend":[5]}
ar-SA {"firstDay":7,"weekend":[5,6]}
en-MV {"firstDay":5,"weekend":[6,7]}

// weekInfo.ts
// 古いブラウザ（Chrome 99〜129 など）は、getWeekInfo() の代わりに weekInfo というプロパティを持つ
type LocaleWithWeekInfo = Intl.Locale & { weekInfo?: Intl.WeekInfo };

// どちらもないブラウザで使う値（この例では日曜始まり、土日が週末）
const FALLBACK: Intl.WeekInfo = { firstDay: 7, weekend: [6, 7] };

export function getWeekInfo(tag: string): Intl.WeekInfo {
  const locale: LocaleWithWeekInfo = new Intl.Locale(tag);
  if (typeof locale.getWeekInfo === 'function') return locale.getWeekInfo();
  if (locale.weekInfo) return locale.weekInfo;
  return FALLBACK;
}

// getWeekInfo の曜日（1 が月曜、7 が日曜）を、Date#getDay の番号（0 が日曜、6 が土曜）に直す
export const toJsDay = (isoDay: number) => isoDay % 7;

typeof getWeekInfo: undefined / weekInfo: {"firstDay":1,"weekend":[6,7],"minimalDays":4}
ja-JP {"firstDay":7,"weekend":[6,7],"minimalDays":1}
en-GB {"firstDay":1,"weekend":[6,7],"minimalDays":4}
ar-EG {"firstDay":6,"weekend":[5,6],"minimalDays":1}
toJsDay: 1->1 2->2 3->3 4->4 5->5 6->6 7->0

// calendar.ts
import { toJsDay } from './weekInfo';

// 週の始まりの曜日から並べた、7つの曜日の番号（Date#getDay の番号）
export function weekdayOrder(firstDay: number): number[] {
  const start = toJsDay(firstDay);
  return Array.from({ length: 7 }, (_, i) => (start + i) % 7);
}

// 曜日の見出し。2026年11月1日は日曜日なので、1日 + 曜日の番号 の日付を表示用に書式化する
export function weekdayLabels(locale: string, order: number[]): string[] {
  const fmt = new Intl.DateTimeFormat(locale, { weekday: 'short' });
  return order.map((d) => fmt.format(new Date(2026, 10, 1 + d)));
}

// month は 0 始まり。表の左上の日から 6週ぶんの日付を返す
export function monthWeeks(year: number, month: number, firstDay: number): Date[][] {
  const offset = (new Date(year, month, 1).getDay() - toJsDay(firstDay) + 7) % 7;
  return Array.from({ length: 6 }, (_, w) =>
    Array.from({ length: 7 }, (_, d) => new Date(year, month, 1 - offset + w * 7 + d)),
  );
}

// MonthCalendar.tsx
import { useMemo } from 'react';
import { getWeekInfo, toJsDay } from './weekInfo';
import { monthWeeks, weekdayLabels, weekdayOrder } from './calendar';

type Props = { locale: string; year: number; month: number };

export function MonthCalendar({ locale, year, month }: Props) {
  const { firstDay, weekend } = useMemo(() => getWeekInfo(locale), [locale]);
  const order = useMemo(() => weekdayOrder(firstDay), [firstDay]);
  const labels = useMemo(() => weekdayLabels(locale, order), [locale, order]);
  const weeks = useMemo(() => monthWeeks(year, month, firstDay), [year, month, firstDay]);
  // 週末の曜日を Date#getDay の番号の集合にしておく
  const weekendDays = useMemo(() => new Set(weekend.map(toJsDay)), [weekend]);
  const title = new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long' })
    .format(new Date(year, month, 1));

  return (
    <table className="calendar">
      <caption>{title}</caption>
      <thead>
        <tr>
          {order.map((d, i) => (
            <th key={d} scope="col" className={weekendDays.has(d) ? 'weekend' : undefined}>
              {labels[i]}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {weeks.map((week) => (
          <tr key={week[0].toDateString()}>
            {week.map((date) => {
              const classes = [
                date.getMonth() !== month && 'outside',
                weekendDays.has(date.getDay()) && 'weekend',
              ].filter(Boolean).join(' ');
              return (
                <td key={date.toDateString()} className={classes || undefined}>
                  {date.getDate()}
                </td>
              );
            })}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// App.tsx
import { useState } from 'react';
import { MonthCalendar } from './MonthCalendar';

const CHOICES = ['ja-JP', 'en-US', 'en-GB', 'ar-EG'];

export function App() {
  // 最初はブラウザの言語設定に合わせる
  const [locale, setLocale] = useState(() => navigator.language);
  const options = CHOICES.includes(locale) ? CHOICES : [locale, ...CHOICES];

  return (
    <main>
      <label>
        地域
        <select value={locale} onChange={(e) => setLocale(e.target.value)}>
          {options.map((tag) => (
            <option key={tag} value={tag}>{tag}</option>
          ))}
        </select>
      </label>
      <MonthCalendar locale={locale} year={2026} month={10} />
    </main>
  );
}

ja-JP {"lang":"ja-JP","caption":"2026年11月","head":"日(週末) 月 火 水 木 金 土(週末)","row1":"1! 2 3 4 5 6 7!"} options: ja-JP,en-US,en-GB,ar-EG
en-US {"lang":"en-US","caption":"November 2026","head":"Sun(週末) Mon Tue Wed Thu Fri Sat(週末)","row1":"1! 2 3 4 5 6 7!"} options: ja-JP,en-US,en-GB,ar-EG
en-GB {"lang":"en-GB","caption":"November 2026","head":"Mon Tue Wed Thu Fri Sat(週末) Sun(週末)","row1":"26* 27* 28* 29* 30* 31*! 1!"} options: ja-JP,en-US,en-GB,ar-EG
ar-EG {"lang":"ar-EG","caption":"نوفمبر ٢٠٢٦","head":"السبت(週末) الأحد الاثنين الثلاثاء الأربعاء الخميس الجمعة(週末)","row1":"31*! 1 2 3 4 5 6!"} options: ja-JP,en-US,en-GB,ar-EG
en-MV {"lang":"en-MV","caption":"November 2026","head":"Fri Sat(週末) Sun(週末) Mon Tue Wed Thu","row1":"30* 31*! 1! 2 3 4 5"} options: en-MV,ja-JP,en-US,en-GB,ar-EG