Multiple Months
Showing multiple months helps when people need to be looking at longer stretches of times. When the calendarType is set to 'month' the month count can be set through the pages option. By setting pages: 1, pages: 2, the calendar will render the exact number of months regardless of the width of the parent container. Passing pages: 'auto' renders as many months as can be fitted in the parent container.
You can dynamically change the number of months or switch between month and week view without the need for recycling the whole component.
Demo
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
$(function () {
$('#demo-1-month')
.mobiscroll()
.datepicker({
controls: ['calendar'],
display: 'inline',
calendarType: 'month',
pages: 1,
});
$('#demo-2-months')
.mobiscroll()
.datepicker({
controls: ['calendar'],
display: 'inline',
calendarType: 'month',
pages: 2,
});
$('#demo-3-months')
.mobiscroll()
.datepicker({
controls: ['calendar'],
display: 'inline',
calendarType: 'month',
pages: 3,
});
$('#demo-auto')
.mobiscroll()
.datepicker({
controls: ['calendar'],
display: 'inline',
calendarType: 'month',
pages: 'auto',
});
});
<div id="demo-1-month"></div>
<div id="demo-2-months"></div>
<div id="demo-3-months"></div>
<div id="demo-auto"></div>