Empty State

mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

var myElement = document.getElementById('demo-agenda-empty');

mobiscroll.eventcalendar(myElement, {
  view: {
    calendar: { type: 'week' },
    agenda: { type: 'week' },
  },
  data: [
    {
      title: 'Zumba Class',
      start: '2026-10-18T17:00',
      end: '2026-10-18T19:00',
    },
    {
      title: 'Silent Party',
      start: '2026-10-18T21:00',
      end: '2026-10-18T23:00',
    },
    {
      title: 'Garbage Collection',
      start: '2026-11-01T15:00',
      end: '2026-11-01T17:00',
    },
    {
      title: 'Karaoke Night',
      start: '2026-11-01T20:00',
      end: '2026-11-01T22:00',
    },
  ],
  renderAgendaEmpty: function () {
    return (
      '<div class="mbsc-align-center mbsc-padding">' +
      '<img class="mds-empty-img" src="https://img.mobiscroll.com/demos/smart-empty-tin-can.png" alt="Empty can" />' +
      '<div class="mbsc-margin mbsc-medium mbsc-italic mbsc-txt-muted">Looks like this can is empty</div>' +
      '<button mbsc-button id="demo-agenda-empty-add" data-color="primary" data-variant="outline">Add something to it</button>' +
      '<div class="mds-empty-txt mbsc-txt-xs">Illustration by' +
      '<a href="https://icons8.com/illustrations/author/zD2oqC8lLBBA">Icons 8</a> from ' +
      '<a href="https://icons8.com/illustrations">Ouch!</a></div>' +
      '</div>'
    );
  },
});

myElement.addEventListener('click', function (e) {
  if (e.target.id === 'demo-agenda-empty-add') {
    mobiscroll.toast({ message: 'Add button clicked' });
  }
});
  

<div id="demo-agenda-empty"></div>
  

.mds-empty-img {
  width: 150px;
  margin: 50px 0;
}

.mds-empty-txt {
  padding-top: 150px;
}