Dynamic Resource Filtering
Usage
theme: 'ios' You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant: 'light' You can turn auto dark mode on based on system settings.
Usage
clickToCreate: true,
// click to create is on dragToCreate: true,
// drag to create is on dragToMove: true,
// reordering is on dragToResize: true,
// resizing is on eventDelete: true
// deleting is on Fine-tune drag & drop with these options, which are false by default.
Usage
locale: mobiscroll.localeEn Selecting the locale loads the localized settings and the translated UI text.
Dynamic Resource Filtering
Resources can be dynamically turned on and off. This will show or hide the resource and can be done runtime the same way as for any other calendar option.
Demo

Code
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
var myResources = [
{
id: 1,
name: 'Ryan',
color: '#f7c4b4',
},
{
id: 2,
name: 'Kate',
color: '#c6f1c9',
},
{
id: 3,
name: 'John',
color: '#e8d0ef',
},
];
var calendar = mobiscroll.eventcalendar('#demo-dynamic-filter', {
clickToCreate: true,
dragToCreate: true,
dragToMove: true,
dragToResize: true,
view: {
scheduler: {
type: 'week',
allDay: false,
startDay: 1,
endDay: 5,
startTime: '08:00',
endTime: '17:00',
},
},
resources: myResources,
});
var checkboxList = document.querySelectorAll('.demo-shared-events-checkbox');
checkboxList.forEach(function (elm) {
elm.addEventListener('change', function () {
var selected = {};
for (var i = 0; i < checkboxList.length; i++) {
var checkbox = checkboxList[i];
selected[+checkbox.value] = checkbox.checked;
}
calendar.setOptions({
resources: myResources.filter(function (r) {
return selected[r.id];
}),
});
});
});
mobiscroll.getJson(
'https://trial.mobiscroll.com/resource-events-shared/',
function (events) {
calendar.setEvents(events);
},
'jsonp',
);
<div class="mbsc-grid mbsc-no-padding">
<div class="mbsc-row">
<div class="mbsc-col-sm-9 external-event-calendar">
<div id="demo-dynamic-filter"></div>
</div>
<div class="mbsc-col-sm-3">
<div class="mbsc-form-group-title">Show available tasks</div>
<label>
Ryan
<input value="1" mbsc-checkbox type="checkbox" class="demo-shared-events-checkbox" checked>
</label>
<label>
Kate
<input value="2" mbsc-checkbox type="checkbox" class="demo-shared-events-checkbox" checked>
</label>
<label>
John
<input value="3" mbsc-checkbox type="checkbox" class="demo-shared-events-checkbox" checked>
</label>
</div>
</div>
</div>
.dynamic-resources-calendar {
border-right: 1px solid #ccc;
}