Use the agenda object inside the view option to configure the agenda. type and size can be set as follows:
- day -
agenda: { type: 'day', size: 20 }can be configured for a single day or a range of days - week -
agenda: { type: 'week', size: 3 }can be configured for a single or multiple weeks - month -
agenda: { type: 'month' }can be configured for one or more months - year -
agenda: { type: 'year' }can be configured for one or more years
Interested in combining this with a calendar view? Check out the previous example →
Demo
Daily agenda
days
Weekly agenda
weeks
Monthly agenda
months
Yearly agenda
years
view: {
agenda: { type: 'day ', size: 2 }
}

JSHTML
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
$(function () {
var daily = $('#demo-agenda-daily')
.mobiscroll()
.eventcalendar({
view: {
agenda: { type: 'day' },
},
})
.mobiscroll('getInst');
var weekly = $('#demo-agenda-weekly')
.mobiscroll()
.eventcalendar({
view: {
agenda: { type: 'week' },
},
})
.mobiscroll('getInst');
var monthly = $('#demo-agenda-monthly')
.mobiscroll()
.eventcalendar({
view: {
agenda: { type: 'month' },
},
})
.mobiscroll('getInst');
$.getJSON('https://trial.mobiscroll.com/events-new/?vers=5&callback=?', function (events) {
daily.setEvents(events);
weekly.setEvents(events);
monthly.setEvents(events);
});
});
<div class="demo-inline demo-max-width-1100" mbsc-page> <div class="mbsc-grid">
<div class="mbsc-row">
<div class="mbsc-col-sm-12 mbsc-col-md-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Daily agenda</div>
<div id="demo-agenda-daily"></div>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Weekly agenda</div>
<div id="demo-agenda-weekly"></div>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Monthly agenda</div>
<div id="demo-agenda-monthly"></div>
</div>
</div>
</div>
</div>
</div>