Localization
Usage
theme="ios" You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant="light" You can turn auto dark mode on based on system settings.
Usage
locale={localeEn} Selecting the locale loads the localized settings and the translated UI text.
Localization
The components are fully localized. In case of the agenda this covers date and time format, button copy, rtl and more. You can see how each example shows up by clicking on the small flag icon or checking the examples below.
All settings can be manually overridden See what options the localization impacts →
Demo
Code
View code on GitHub
import { Dropdown, Eventcalendar, getJson, locale, Page, setOptions } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
theme: ' ',
themeVariant: ' '
});
function App() {
const [localeStr, setLocaleStr] = useState('en');
const [myEvents, setEvents] = useState([]);
const languages = useMemo(
() => [
{ name: 'Arabic', value: 'ar' },
{ name: 'Bulgarian', value: 'bg' },
{ name: 'Catala', value: 'ca' },
{ name: 'Cestina', value: 'cs' },
{ name: 'Dansk', value: 'da' },
{ name: 'Deutsch', value: 'de' },
{ name: 'Greek', value: 'el' },
{ name: 'English', value: 'en' },
{ name: 'English-UK', value: 'en-GB' },
{ name: 'Espanol', value: 'es' },
{ name: 'Farsi', value: 'fa' },
{ name: 'Suomi', value: 'fi' },
{ name: 'Français', value: 'fr' },
{ name: 'Hebrew', value: 'he' },
{ name: 'Hindi', value: 'hi' },
{ name: 'Croatian', value: 'hr' },
{ name: 'Magyar', value: 'hu' },
{ name: 'Italiano', value: 'it' },
{ name: 'Japanese', value: 'ja' },
{ name: 'Korean', value: 'ko' },
{ name: 'Lietuvių', value: 'lt' },
{ name: 'Nederlands', value: 'nl' },
{ name: 'Norsk', value: 'no' },
{ name: 'Polski', value: 'pl' },
{ name: 'Português Brasileiro', value: 'pt-BR' },
{ name: 'Português Europeu', value: 'pt-PT' },
{ name: 'Română', value: 'ro' },
{ name: 'Russian UA', value: 'ru-UA' },
{ name: 'Russian', value: 'ru' },
{ name: 'Slovencina', value: 'sk' },
{ name: 'Serbian', value: 'sr' },
{ name: 'Svenska', value: 'sv' },
{ name: 'Thai', value: 'th' },
{ name: 'Türkçe', value: 'tr' },
{ name: 'Ukrainian', value: 'ua' },
{ name: 'Vietnamese', value: 'vi' },
{ name: 'Chinese', value: 'zh' },
],
[],
);
const myView = useMemo(
() => ({
calendar: { type: 'week' },
agenda: { type: 'day' },
}),
[],
);
const handleChange = useCallback((event) => {
setLocaleStr(event.target.value);
}, []);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Page className="mds-full-height">
<div className="mds-locale-cont mds-full-height mbsc-flex-col">
<div className="mbsc-grid">
<div className="mbsc-row">
<div className="mbsc-col-sm-8">
<Dropdown inputStyle="box" label="Locale" labelStyle="stacked" value={localeStr} onChange={handleChange}>
{languages.map((lang) => (
<option key={lang.value} value={lang.value}>
{lang.name}
</option>
))}
</Dropdown>
</div>
</div>
</div>
<div className="mds-overflow-hidden mbsc-flex-1-1">
<Eventcalendar locale={locale[localeStr]} data={myEvents} view={myView} />
</div>
</div>
</Page>
);
}
export default App;
import { Dropdown, Eventcalendar, getJson, locale, MbscCalendarEvent, MbscEventcalendarView, Page, setOptions } from '@mobiscroll/react';
import { ChangeEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [localeStr, setLocaleStr] = useState('en');
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const languages = useMemo(
() => [
{ name: 'Arabic', value: 'ar' },
{ name: 'Bulgarian', value: 'bg' },
{ name: 'Catala', value: 'ca' },
{ name: 'Cestina', value: 'cs' },
{ name: 'Dansk', value: 'da' },
{ name: 'Deutsch', value: 'de' },
{ name: 'Greek', value: 'el' },
{ name: 'English', value: 'en' },
{ name: 'English-UK', value: 'en-GB' },
{ name: 'Espanol', value: 'es' },
{ name: 'Farsi', value: 'fa' },
{ name: 'Suomi', value: 'fi' },
{ name: 'Français', value: 'fr' },
{ name: 'Hebrew', value: 'he' },
{ name: 'Hindi', value: 'hi' },
{ name: 'Croatian', value: 'hr' },
{ name: 'Magyar', value: 'hu' },
{ name: 'Italiano', value: 'it' },
{ name: 'Japanese', value: 'ja' },
{ name: 'Korean', value: 'ko' },
{ name: 'Lietuvių', value: 'lt' },
{ name: 'Nederlands', value: 'nl' },
{ name: 'Norsk', value: 'no' },
{ name: 'Polski', value: 'pl' },
{ name: 'Português Brasileiro', value: 'pt-BR' },
{ name: 'Português Europeu', value: 'pt-PT' },
{ name: 'Română', value: 'ro' },
{ name: 'Russian UA', value: 'ru-UA' },
{ name: 'Russian', value: 'ru' },
{ name: 'Slovencina', value: 'sk' },
{ name: 'Serbian', value: 'sr' },
{ name: 'Svenska', value: 'sv' },
{ name: 'Thai', value: 'th' },
{ name: 'Türkçe', value: 'tr' },
{ name: 'Ukrainian', value: 'ua' },
{ name: 'Vietnamese', value: 'vi' },
{ name: 'Chinese', value: 'zh' },
],
[],
);
const myView = useMemo<MbscEventcalendarView>(
() => ({
calendar: { type: 'week' },
agenda: { type: 'day' },
}),
[],
);
const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setLocaleStr(event.target.value);
}, []);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Page className="mds-full-height">
<div className="mds-locale-cont mds-full-height mbsc-flex-col">
<div className="mbsc-grid">
<div className="mbsc-row">
<div className="mbsc-col-sm-8">
<Dropdown inputStyle="box" label="Locale" labelStyle="stacked" value={localeStr} onChange={handleChange}>
{languages.map((lang) => (
<option key={lang.value} value={lang.value}>
{lang.name}
</option>
))}
</Dropdown>
</div>
</div>
</div>
<div className="mds-overflow-hidden mbsc-flex-1-1">
<Eventcalendar locale={locale[localeStr]} data={myEvents} view={myView} />
</div>
</div>
</Page>
);
};
export default App;
.mds-full-height {
height: 100%;
}
.mds-locale-cont .mbsc-col-sm-8 {
margin: 0 auto;
}
.mds-overflow-hidden {
overflow: hidden;
}