Show a week calendar instead of a monthly calendar view to save space. By setting the calendarType to 'week' and passing the count in the calendarSize option you can simply enable a week view.
You can dynamically change the number of weeks or switch between month and week view without the need for recycling the whole component.
Interested in switching week and month view? Learn how to set up switch inside the calendar →
Demo
Change the week count
<Datepicker
calendarType="week"
calendarSize={2 }
/>JSXTSX
import { Datepicker, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<div>
<Datepicker display="inline" calendarType="week" calendarSize={1} />
<Datepicker display="inline" calendarType="week" calendarSize={2} />
<Datepicker display="inline" calendarType="week" calendarSize={3} />
</div>
);
}
export default App;
import { Datepicker, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => (
<div>
<Datepicker display="inline" calendarType="week" calendarSize={1} />
<Datepicker display="inline" calendarType="week" calendarSize={2} />
<Datepicker display="inline" calendarType="week" calendarSize={3} />{' '}
</div>
);
export default App;