Custom Header
You can customize how the header of calendar looks and how the components are arranged. Besides that you can also add custom functionality, like a segmented control that lets people switch between week and month view.
Use the renderCalendarHeader option for passing a custom header layout. There are predefined components - shorthands if you will - that can be used to assemble the header:
- Navigation component -
<div mbsc-calendar-nav></div> - Today button -
<button mbsc-calendar-today></button> - Previous month button -
<button mbsc-calendar-prev></button> - Next month button -
<button mbsc-calendar-next></button>
Demo
The default header contains the two arrows on the far-right for previous and next months, while the current month indicator with the
mbsc-calendar-nav
component is placed to the far-left.
You can reorder the controls and place the
mbsc-calendar-nav
in the middle with the two arrows -
mbsc-calendar-prev and mbsc-calendar-next
- to the sides.
You can also add a custom component, like a
mbsc-calendar-today
button.
Use a segmented component for creating a view switcher.
Above all that you can give instructions or show the selected {value} in the header
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
$(function () {
$('#demo')
.mobiscroll()
.datepicker({
controls: ['calendar'],
display: 'inline',
calendarType: 'week',
calendarSize: 2,
});
$('#demo-custom')
.mobiscroll()
.datepicker({
controls: ['calendar'],
display: 'inline',
renderCalendarHeader: function () {
return (
'<div mbsc-calendar-prev class="custom-prev"></div>' +
'<div mbsc-calendar-nav class="custom-nav"></div>' +
'<div mbsc-calendar-next class="custom-next"></div>'
);
},
});
$('#demo-today')
.mobiscroll()
.datepicker({
controls: ['calendar'],
display: 'inline',
renderCalendarHeader: function () {
return (
'<div mbsc-calendar-nav></div>' +
'<div class="custom-buttons">' +
'<div mbsc-calendar-prev></div>' +
'<div mbsc-calendar-today></div>' +
'<div mbsc-calendar-next></div>' +
'</div>'
);
},
});
var myCalendar = $('#demo-switch')
.mobiscroll()
.datepicker({
controls: ['calendar'],
display: 'inline',
calendarType: 'week',
calendarSize: 2,
renderCalendarHeader: function () {
return (
'<div mbsc-calendar-nav class="custom-view-nav"></div><div class="custom-view">' +
'<label><input data-icon="material-date-range" mbsc-segmented type="radio" name="custom-header-view" value="week" class="custom-header-view-change" checked></label>' +
'<label><input data-icon="material-event-note" mbsc-segmented type="radio" name="custom-header-view" value="month" class="custom-header-view-change"></label></div>' +
'<div mbsc-calendar-prev></div>' +
'<div mbsc-calendar-next></div>'
);
},
})
.mobiscroll('getInst');
$('.custom-header-view-change').change(function (ev) {
switch (ev.target.value) {
case 'week':
myCalendar.setOptions({
calendarType: 'week',
});
break;
case 'month':
myCalendar.setOptions({
calendarType: 'month',
});
break;
}
});
$('#demo-prev')
.mobiscroll()
.datepicker({
controls: ['calendar'],
display: 'inline',
calendarType: 'week',
calendarSize: 2,
headerText: 'You selected {value}',
});
});
<div id="demo"></div>
<div id="demo-custom"></div>
<div id="demo-today"></div>
<div id="demo-switch"></div>
<div id="demo-prev"></div>
.custom-buttons,
.custom-view,
.custom-nav {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-moz-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.custom-buttons {
-webkit-justify-content: flex-end;
-moz-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.custom-view,
.custom-nav {
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.custom-view-nav .mbsc-calendar-title.mbsc-material {
font-size: 16px;
}
.custom-view .mbsc-segmented {
margin: 0;
}
.custom-view .mbsc-segmented.mbsc-material,
.custom-view .mbsc-segmented.mbsc-windows {
padding: 0 2px;
}
.custom-view .mbsc-segmented .mbsc-segmented-button {
padding: 0 1px;
}
.custom-view .mbsc-segmented .mbsc-icon {
font-size: 20px;
}
.custom-view .mbsc-segmented-button.mbsc-windows {
border: 0;
}