Localization & RTL Support
Switch languages, custom month/weekday labels, first day of the week, and Right-to-Left (RTL) layout support.
Localization & RTL Support
Customize the starting day of the week with firstDayOfWeek, pass localized month and weekday arrays via translations, and support Right-To-Left (RTL) languages like Arabic or Hebrew by placing the calendar inside a container with dir="rtl".
Live Preview: Localization & RTL Support
Lun
Mar
Mié
Jue
Vie
Sáb
Dom
Code Example
import { useState } from 'react';
import { Calendar } from 'react-modular-datepicker';
import 'react-modular-datepicker/dist/index.css';
export function LocalizationDemo() {
const [lang, setLang] = useState<'es' | 'fr' | 'de' | 'ar'>('es');
const translationsMap = {
es: {
months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
weekdays: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
back: 'Mes anterior',
forward: 'Mes siguiente',
},
fr: {
months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
weekdays: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
back: 'Mois précédent',
forward: 'Mois suivant',
},
de: {
months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
weekdays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
back: 'Vorheriger Monat',
forward: 'Nächster Monat',
},
ar: {
months: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
weekdays: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
back: 'الشهر السابق',
forward: 'الشهر التالي',
},
};
const isRtl = lang === 'ar';
return (
<div>
<div className="flex gap-2 mb-4 justify-center">
{(['es', 'fr', 'de', 'ar'] as const).map((l) => (
<button
key={l}
onClick={() => setLang(l)}
className={`px-3 py-1 text-xs rounded font-medium ${
lang === l ? 'bg-slate-900 text-white' : 'bg-gray-100 text-gray-800'
}`}
>
{l === 'ar' ? 'العربية (RTL)' : l.toUpperCase()}
</button>
))}
</div>
<div dir={isRtl ? 'rtl' : 'ltr'} className="w-full flex justify-center">
<Calendar
firstDayOfWeek={isRtl ? 6 : 1}
translations={translationsMap[lang]}
/>
</div>
</div>
);
}