jQuery Scheduler Dynamic View Switching
Download and try exampleUsage
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 View Switching
Dynamically switch views within one instance. Use a UI control to let users do the switching or do it programmatically.
The example features a month view with events as labels, a weekly schedule view, a daily schedule and a weekly agenda. Use the setOptions method to dynamically change the settings.
Demo
Code
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
$(function () {
var calendar = $('#demo-day-week-view')
.mobiscroll()
.eventcalendar({
clickToCreate: ,
dragToCreate: ,
dragToMove: ,
dragToResize: ,
eventDelete: ,
view: {
calendar: {
labels: true,
},
},
renderHeader: function () {
return (
'<div mbsc-calendar-nav class="cal-header-nav"></div>' +
'<div class="cal-header-picker">' +
'<label>Year<input mbsc-segmented type="radio" name="view" value="year" class="md-view-change"></label>' +
'<label>Month<input mbsc-segmented type="radio" name="view" value="month" class="md-view-change" checked></label>' +
'<label>Week<input mbsc-segmented type="radio" name="view" value="week" class="md-view-change"></label>' +
'<label>Day<input mbsc-segmented type="radio" name="view" value="day" class="md-view-change"></label>' +
'<label>Agenda<input mbsc-segmented type="radio" name="view" value="agenda" class="md-view-change"></label>' +
'</div>' +
'<div mbsc-calendar-prev class="cal-header-prev"></div>' +
'<div mbsc-calendar-today class="cal-header-today"></div>' +
'<div mbsc-calendar-next class="cal-header-next"></div>'
);
},
})
.mobiscroll('getInst');
$.getJSON(
'https://trial.mobiscroll.com/events/?vers=5&callback=?',
function (events) {
calendar.setEvents(events);
},
'jsonp',
);
$('.md-view-change').change(function (ev) {
switch (ev.target.value) {
case 'year':
calendar.setOptions({
view: {
calendar: { type: 'year', labels: true },
},
});
break;
case 'month':
calendar.setOptions({
view: {
calendar: { type: 'month', labels: true },
},
});
break;
case 'week':
calendar.setOptions({
view: {
scheduler: { type: 'week' },
},
});
break;
case 'day':
calendar.setOptions({
view: {
scheduler: { type: 'day' },
},
});
break;
case 'agenda':
calendar.setOptions({
view: {
calendar: { type: 'week' },
agenda: { type: 'week' },
},
});
break;
}
});
});
<div id="demo-day-week-view" class="md-switching-view-cont"></div>
.md-switching-view-cont .mbsc-segmented {
max-width: 350px;
margin: 0 auto;
}
.md-switching-view-cont .mbsc-calendar-grid-item {
height: 490px;
box-sizing: border-box;
}
.cal-header-picker {
flex: 1 0 auto;
}
.cal-header-nav {
width: 200px;
}
/* material header order */
.mbsc-material.cal-header-prev {
order: 1;
}
.mbsc-material.cal-header-next {
order: 2;
}
.mbsc-material.cal-header-nav {
order: 3;
}
.mbsc-material .cal-header-picker {
order: 4;
}
.mbsc-material .cal-header-today {
order: 5;
}
/* windows header order */
.mbsc-windows.cal-header-nav {
order: 1;
}
.mbsc-windows.cal-header-prev {
order: 2;
}
.mbsc-windows.cal-header-next {
order: 3;
}
.mbsc-windows .cal-header-picker {
order: 4;
}
.mbsc-windows .cal-header-today {
order: 5;
}