Scroll Direction, Week Numbers & Outer Days
The calendar view can be customized with a couple of different parameters:
- Set a month change direction - specify
'horizontal'or'vertical'in thecalendarScrolloption - Set the first day of the week - specify the first day of the week using the
firstDayoption, where Sunday is 0, Monday is 1, etc. - Show week numbers - set the
showWeekNumbersto true and show a week counter starting from the first week of every year - Hide the outer days of a month - set the
showOuterDaysto false in case you don't want to see days from previous and next months
Demo
Set a scrolling direction
Set the first day of week to
Annual week numbers
Show week counter
Outer days (Hidden by default for vertical, visible by default for horizontal)
Show outer days
<Datepicker
calendarScroll="horizontal "
firstDay={1 }
showWeekNumbers={false }
showOuterDays={true }
/>JSXTSX
import { Datepicker, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<div>
<Datepicker display="inline" calendarScroll="horizontal" showWeekNumbers={true} showOuterDays={true} />
</div>
);
}
export default App;
import { Datepicker, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => (
<Datepicker controls={['calendar']} display="inline" calendarScroll="horizontal" showWeekNumbers={true} showOuterDays={true} />
);
export default App;