Granular control over the interaction
Click to create event (double click)
Drag to create event
Move & reorder events
Drag to resize existing events
Delete events
Control drag sensitivity
Snap events to every minutes when moving.
$('#calendar').mobiscroll().eventcalendar({
    view: {
        scheduler: { type: 'week' }
    },
    data: [{
        title: 'Fixed event',
        start: '2026-03-31T16:00',
        end: '2026-03-31T20:00',
        color: '#9e9e9e',
        editable: false
    }, {
        title: 'Fixed event',
        start: '2026-04-02T06:00',
        end: '2026-04-02T09:00',
        color: '#9e9e9e',
        editable: false
    }, {
        title: 'Fixed event',
        start: '2026-04-03T12:00',
        end: '2026-04-03T14:00',
        color: '#9e9e9e',
        editable: false
    }, {
        title: 'Drag me',
        start: '2026-04-01T11:00',
        end: '2026-04-01T15:00',
        color: '#cc9900'
    }, {
        title: 'Drag me',
        start: '2026-04-04T04:00',
        end: '2026-04-04T08:00',
        color: '#cc9900'
    }, {
        title: 'Resize me',
        start: '2026-03-31T02:00',
        end: '2026-03-31T06:00',
        color: '#ca4747'
    }, {
        title: 'Resize me',
        start: '2026-04-04T13:00',
        end: '2026-04-04T18:00',
        color: '#ca4747'
    }, {
        title: 'Move me around',
        start: '2026-04-02T19:00',
        end: '2026-04-02T23:00',
        color: '#339966'
    }, {
        title: 'Move me around',
        start: '2026-04-05T08:00',
        end: '2026-04-05T11:00',
        color: '#339966'
    }],
    clickToCreate: true,
    dragToCreate: true,
    dragToMove: true,
    dragToResize: true,
    dragTimeStep: 15,
    eventDelete: true
});