Javascript Agenda Basic Usage Example

Initialize the agenda on any div by simply calling the mobiscroll.eventcalendar('#myDiv'); function. You can pass the options as an object: ... .eventcalendar('#myDiv', { theme: 'ios', view: { agenda: {type: 'month' } } });

The events can be passed in a couple of different ways. In this example we are loading them through an external API.

Interested to learn about the calendar view? Learn how to set up the range the agenda covers →

Download and try example

Javascript jQuery Angular React Vue

html<div id="agenda"></div>
jsmobiscroll.eventcalendar('#agenda', {
    view: {
        agenda: { type: 'month' }
    },
    theme: ''
    themeVariant: ''
});

$.getJSON('//trial.mobiscroll.com/events/?vers=5&callback=?', function (events) {
    inst.setEvents(events);
});