RTL Layout
RTL support is built in and can be explicitly controlled through the rtl option. If not set, it is inherited from the locale settings.
Explore the different locales Check out this example →
Demo
Enable Right-To-Left rendering
Turn RTL on
<Eventcalendar
rtl={true }
/>
JSXTSX
import { Eventcalendar, getJson, setOptions } from '@mobiscroll/react';
import { useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [myEvents, setEvents] = useState([]);
const myResources = useMemo(
() => [
{
id: 1,
name: 'Ryan',
color: '#fdf500',
},
{
id: 2,
name: 'Kate',
color: '#ff4600',
},
{
id: 3,
name: 'John',
color: '#ff0101',
},
{
id: 4,
name: 'Mark',
color: '#239a21',
},
{
id: 5,
name: 'Sharon',
color: '#8f1ed6',
},
{
id: 6,
name: 'Ashley',
color: '#01adff',
},
],
[],
);
const myView = useMemo(
() => ({
timeline: { type: 'day' },
}),
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/timeline-events/',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return <Eventcalendar data={myEvents} view={myView} resources={myResources} rtl={true} />;
}
export default App;
import {
Eventcalendar,
getJson,
MbscCalendarEvent,
MbscEventcalendarView,
MbscResource,
setOptions ,
} from '@mobiscroll/react';
import { FC, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const myResources = useMemo<MbscResource[]>(
() => [
{
id: 1,
name: 'Ryan',
color: '#fdf500',
},
{
id: 2,
name: 'Kate',
color: '#ff4600',
},
{
id: 3,
name: 'John',
color: '#ff0101',
},
{
id: 4,
name: 'Mark',
color: '#239a21',
},
{
id: 5,
name: 'Sharon',
color: '#8f1ed6',
},
{
id: 6,
name: 'Ashley',
color: '#01adff',
},
],
[],
);
const myView = useMemo<MbscEventcalendarView>(
() => ({
timeline: { type: 'day' },
}),
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/timeline-events/',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return <Eventcalendar data={myEvents} view={myView} resources={myResources} rtl={true} />;
};
export default App;