Week & Month Views

jsvar myCalendar = mobiscroll.datepicker('#custom-header', {
    controls: ['calendar'],
    calendarType: 'week',
    calendarSize: 1,
    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="view" value="week" class="view-change" checked></label>' +
            '<label><input data-icon="material-event-note" mbsc-segmented type="radio" name="static-view" "month" class="view-change"></label></div>' +
            '<div mbsc-calendar-prev></div>' + 
            '<div mbsc-calendar-next></div>';
    }
}
                                
document.querySelectorAll('.view-change').forEach(function (elm) {
    elm.addEventListener('change', function (ev) {
        switch (ev.target.value) {
            case 'week':
			    myCalendar.setOptions({
				    calendarType: 'week'
			    });
			break;
		case 'month':
			    myCalendar.setOptions({
				    calendarType: 'month'
			    });
			break;
        }
    });
});

css.custom-view {
    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;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;                 

    .mbsc-segmented {
        margin: 0;
    }

    .mbsc-segmented.mbsc-material,
    .mbsc-segmented.mbsc-windows {
        padding: 0 2px;
    }

    .mbsc-segmented .mbsc-segmented-button {
        padding: 0 1px;
    }

    .mbsc-segmented .mbsc-icon {
        font-size: 20px;
    }

    .mbsc-segmented-button.mbsc-windows {
        border: 0;
    }
}

.custom-view-nav .mbsc-calendar-title.mbsc-material {
    font-size: 16px;
}