Month View
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.
Month View
Get an overview across all resources over a full month. Easily zoom in by controlling the timeCellSteps and timeLabelSteps as seen in this example. By default the timeline: { type: 'month' } as configured under the view option renders with daily horizontal resolution.
Demo
Code
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
mobiscroll.eventcalendar('#demo-month-view', {
clickToCreate: ,
dragToCreate: ,
dragToMove: ,
dragToResize: ,
eventDelete: ,
view: {
timeline: {
type: 'month',
},
},
data: [
{
start: '2026-10-02T00:00',
end: '2026-10-05T00:00',
title: 'Event 1',
resource: 1,
},
{
start: '2026-10-10T09:00',
end: '2026-10-15T15:00',
title: 'Event 2',
resource: 3,
},
{
start: '2026-10-12T00:00',
end: '2026-10-14T00:00',
title: 'Event 3',
resource: 4,
},
{
start: '2026-10-15T07:00',
end: '2026-10-20T12:00',
title: 'Event 4',
resource: 5,
},
{
start: '2026-10-03T00:00',
end: '2026-10-10T00:00',
title: 'Event 5',
resource: 6,
},
{
start: '2026-10-10T08:00',
end: '2026-10-11T20:00',
title: 'Event 6',
resource: 7,
},
{
start: '2026-10-22T00:00',
end: '2026-10-28T00:00',
title: 'Event 7',
resource: 7,
},
{
start: '2026-10-08T00:00',
end: '2026-10-13T00:00',
title: 'Event 8',
resource: 15,
},
{
start: '2026-10-25T00:00',
end: '2026-10-27T00:00',
title: 'Event 9',
resource: 10,
},
{
start: '2026-10-20T00:00',
end: '2026-10-23T00:00',
title: 'Event 10',
resource: 12,
},
],
resources: [
{
id: 1,
name: 'Resource A',
color: '#e20000',
},
{
id: 2,
name: 'Resource B',
color: '#76e083',
},
{
id: 3,
name: 'Resource C',
color: '#4981d6',
},
{
id: 4,
name: 'Resource D',
color: '#e25dd2',
},
{
id: 5,
name: 'Resource E',
color: '#1dab2f',
},
{
id: 6,
name: 'Resource F',
color: '#d6d145',
},
{
id: 7,
name: 'Resource G',
color: '#34c8e0',
},
{
id: 8,
name: 'Resource H',
color: '#9dde46',
},
{
id: 9,
name: 'Resource I',
color: '#166f6f',
},
{
id: 10,
name: 'Resource J',
color: '#f7961e',
},
{
id: 11,
name: 'Resource K',
color: '#34c8e0',
},
{
id: 12,
name: 'Resource L',
color: '#af0000',
},
{
id: 13,
name: 'Resource M',
color: '#446f1c',
},
{
id: 14,
name: 'Resource N',
color: '#073138',
},
{
id: 15,
name: 'Resource O',
color: '#4caf00',
},
],
});
<div id="demo-month-view"></div>