feat: add locale support
Guillermo Pages
4 months ago
parent
50ea538717
commit
cca9b10a45
@ -0,0 +1,135 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Year } from '../components/calendar/Year';
|
||||
import { Controls } from '../components/calendar/Controls';
|
||||
import { HeaderStyle, MonthCutoffType, DaySize } from '../types/calendar';
|
||||
import styles from './Examples.module.scss';
|
||||
import { Locale } from 'date-fns';
|
||||
import {
|
||||
enUS,
|
||||
es,
|
||||
fr,
|
||||
de,
|
||||
it,
|
||||
pt,
|
||||
ja,
|
||||
ko,
|
||||
zhCN,
|
||||
ru,
|
||||
ar,
|
||||
nl,
|
||||
pl,
|
||||
tr,
|
||||
sv,
|
||||
nb
|
||||
} from 'date-fns/locale';
|
||||
|
||||
export const LocaleSupport: React.FC = () => {
|
||||
const [dayHeaderStyle, setDayHeaderStyle] = useState<HeaderStyle>('tiny');
|
||||
const [monthCutoff, setMonthCutoff] = useState<MonthCutoffType>('truncate');
|
||||
const [size, setSize] = useState<DaySize>('l');
|
||||
const [fontProportion, setFontProportion] = useState<number>(100);
|
||||
const [magnify, setMagnify] = useState<boolean>(false);
|
||||
const [selectedLocale, setSelectedLocale] = useState<string>('enUS');
|
||||
|
||||
const locales: Record<string, { locale: Locale; name: string }> = {
|
||||
enUS: { locale: enUS, name: 'English (US)' },
|
||||
es: { locale: es, name: 'Español' },
|
||||
fr: { locale: fr, name: 'Français' },
|
||||
de: { locale: de, name: 'Deutsch' },
|
||||
it: { locale: it, name: 'Italiano' },
|
||||
pt: { locale: pt, name: 'Português' },
|
||||
ja: { locale: ja, name: '日本語' },
|
||||
ko: { locale: ko, name: '한국어' },
|
||||
zhCN: { locale: zhCN, name: '中文 (简体)' },
|
||||
ru: { locale: ru, name: 'Русский' },
|
||||
ar: { locale: ar, name: 'العربية' },
|
||||
nl: { locale: nl, name: 'Nederlands' },
|
||||
pl: { locale: pl, name: 'Polski' },
|
||||
tr: { locale: tr, name: 'Türkçe' },
|
||||
sv: { locale: sv, name: 'Svenska' },
|
||||
nb: { locale: nb, name: 'Norsk' }
|
||||
};
|
||||
|
||||
const activeDates = [
|
||||
new Date(2025, 0, 1), // New Year's Day
|
||||
new Date(2025, 3, 21), // Spring
|
||||
new Date(2025, 6, 14), // Bastille Day / Summer
|
||||
new Date(2025, 9, 31), // Halloween
|
||||
new Date(2025, 11, 25) // Christmas
|
||||
];
|
||||
|
||||
return (
|
||||
<section className={styles.section}>
|
||||
<h2 className={styles.sectionTitle}>International Locale Support</h2>
|
||||
<p className={styles.sectionDescription}>
|
||||
The calendar supports multiple languages through the date-fns locale system.
|
||||
Day names, month names, and date formats are automatically localized.
|
||||
</p>
|
||||
|
||||
<div className={styles.controlRow}>
|
||||
<label className={styles.control}>
|
||||
Language:
|
||||
<select
|
||||
value={selectedLocale}
|
||||
onChange={(e) => setSelectedLocale(e.target.value)}
|
||||
style={{ marginLeft: '8px', padding: '4px 8px' }}
|
||||
>
|
||||
{Object.entries(locales).map(([key, { name }]) => (
|
||||
<option key={key} value={key}>{name}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Controls
|
||||
headerStyle={dayHeaderStyle}
|
||||
monthCutoff={monthCutoff}
|
||||
size={size}
|
||||
fontProportion={fontProportion}
|
||||
magnify={magnify}
|
||||
onHeaderStyleChange={setDayHeaderStyle}
|
||||
onMonthCutoffChange={setMonthCutoff}
|
||||
onSizeChange={setSize}
|
||||
onFontProportionChange={setFontProportion}
|
||||
onMagnifyChange={setMagnify}
|
||||
/>
|
||||
|
||||
<div className={styles.demoContainer}>
|
||||
<Year
|
||||
year={2025}
|
||||
dayHeaderStyle={dayHeaderStyle}
|
||||
monthCutoff={monthCutoff}
|
||||
weekendDays={[6, 0]}
|
||||
size={size}
|
||||
fontProportion={fontProportion}
|
||||
magnify={magnify}
|
||||
locale={locales[selectedLocale].locale}
|
||||
activeDates={activeDates}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.info}>
|
||||
<h4>Localized Elements:</h4>
|
||||
<ul>
|
||||
<li>Month names (e.g., January, Janvier, Januar, 一月)</li>
|
||||
<li>Day names in headers (Monday, Lundi, Montag, 月曜日)</li>
|
||||
<li>Day abbreviations (Mon, Lun, Mo, 月)</li>
|
||||
<li>Single letter days (M, L, M, 月)</li>
|
||||
</ul>
|
||||
|
||||
<h4 style={{ marginTop: '20px' }}>Header Style Examples:</h4>
|
||||
<ul>
|
||||
<li><strong>Expanded:</strong> Full day names (e.g., MONDAY, LUNDI, MONTAG)</li>
|
||||
<li><strong>Compacted:</strong> 3-letter abbreviations (e.g., MON, LUN, MO)</li>
|
||||
<li><strong>Tiny:</strong> Single letters with special handling for conflicts</li>
|
||||
<li><strong>None:</strong> No day headers, only numbers</li>
|
||||
</ul>
|
||||
|
||||
<p style={{ marginTop: '20px', fontSize: '0.9em', color: '#666' }}>
|
||||
Note: Some languages may show squares or incorrect characters if the required fonts
|
||||
are not installed on your system (especially for Arabic, Chinese, Japanese, and Korean).
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue