Javascript Scheduler Cell Content Template Example

Events appear over scheduler cells, which provide a great background layer for information. They can be disabled, styled with colored backgrounds, or used to present rich content.

Cell content in the scheduler can be customized using the renderCell option. The callback receives cell data such as the date, resource, and overlapping events in the cell. This lets you add custom content like icons or badges to cells based on their data. It's useful for showing holidays, availability, or statuses.

Cells can be hourly, 30 minute long, or however it is setup using the timeCellStep option.

Download and try example

Preview in full screen

Add custom content to Scheduler cells — show icons, badges, colored backgrounds, or status markers based on date, resource, and event data.

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

var myEvents = [
  {
    id: 1,
    title: 'Team Sync Meeting',
    start: '2026-10-24T10:15',
    end: '2026-10-24T11:30',
  },
  {
    id: 2,
    title: 'Apply Security Update',
    start: '2026-10-24T15:00',
    end: '2026-10-24T16:00',
  },
  {
    id: 3,
    title: 'Database Backup',
    start: '2026-10-23T12:00',
    end: '2026-10-23T13:00',
  },
  {
    id: 4,
    title: 'Project Kickoff & Coffee',
    start: '2026-10-23T09:00',
    end: '2026-10-23T10:00',
  },
  {
    id: 5,
    title: 'System Health Review',
    start: '2026-10-23T08:00',
    end: '2026-10-23T08:45',
  },
  {
    id: 6,
    title: 'Quarterly Health Audit',
    start: '2026-10-25T16:00',
    end: '2026-10-25T17:00',
  },
  {
    id: 7,
    title: 'Deployment Window',
    start: '2026-10-25T14:00',
    end: '2026-10-25T15:00',
  },
  {
    id: 8,
    title: 'Nightly Backup Prep',
    start: '2026-10-25T12:00',
    end: '2026-10-25T13:00',
  },
  {
    id: 9,
    title: 'Morning System Scan',
    start: '2026-10-25T08:00',
    end: '2026-10-25T08:45',
  },
  {
    id: 10,
    title: 'Sprint Review & Coffee',
    start: '2026-10-27T09:00',
    end: '2026-10-27T09:45',
  },
  {
    id: 11,
    title: 'Final Health Check',
    start: '2026-10-27T16:00',
    end: '2026-10-27T16:45',
  },
  {
    id: 12,
    title: 'Weekly Backup',
    start: '2026-10-27T12:00',
    end: '2026-10-27T12:45',
  },
  {
    id: 13,
    title: 'Morning Health Scan',
    start: '2026-10-26T08:15',
    end: '2026-10-26T09:00',
  },
  {
    id: 14,
    title: 'Afternoon Backup',
    start: '2026-10-26T12:15',
    end: '2026-10-26T13:00',
  },
];

mobiscroll.eventcalendar('#demo-cell-content-template', {
  clickToCreate:  ,
  dragToCreate:  ,
  dragToMove:  ,
  dragToResize:  ,
  eventDelete:  ,
  cssClass: 'mds-schedule-cell-template',
  data: myEvents,
  renderCell: function (args) {
    var h = args.date.getHours();
    var d = args.date.getDay();
    var icons = [];

    (d === 1 || d === 5) &&
      h === 9 &&
      icons.push(
        { icon: 'material-people', title: d === 1 ? 'Launch Meeting' : 'Sprint Review' },
        { icon: 'material-message', title: 'Coffee Break' },
      );
    h === 13 && icons.push({ icon: 'bubbles', title: 'Lunch Time' });
    d >= 1 && d <= 5 && h === 17 && icons.push({ icon: 'clock', title: 'Wrap Up' });
    d === 2 && (h === 10 || h === 11) && icons.push({ icon: 'loop2', title: 'Dev Sync' });
    h % 4 === 0 && icons.push({ icon: 'cogs', title: 'Health Check' });
    h === 3 && icons.push({ icon: 'connection', title: 'Network Probe' });
    h === 12 && icons.push({ icon: 'upload', title: 'Backup' });
    h === 15 && icons.push({ icon: 'lock', title: 'Security Patch' });
    d === 3 && h === 14 && icons.push({ icon: 'line-paperplane', title: 'Deploy Window' });

    if (!icons.length) {
      return '';
    }

    return (
      '<div class="mds-schedule-cell-icons-background"><div class="mds-schedule-cell-icons">' +
      icons
        .map(function (icon) {
          return (
            '<div class="mds-schedule-cell-icon" title="' +
            icon.title +
            '">' +
            '<div class="mbsc-font-icon mbsc-icon-' +
            icon.icon +
            '"></div>' +
            '</div>'
          );
        })
        .join('') +
      '</div></div>'
    );
  },
  view: {
    scheduler: { type: 'week', startTime: '08:00', endTime: '18:00', startDay: 1, endDay: 5 },
  },
});

<div id="demo-cell-content-template"></div>

.mds-schedule-cell-template .mbsc-schedule-time-wrapper,
.mds-schedule-cell-template .mbsc-schedule-item {
  height: 70px;
}

.mds-schedule-cell-template .mbsc-schedule-events {
  margin-right: 28px;
}

.mbsc-rtl .mds-schedule-cell-template .mbsc-schedule-events {
  margin-right: auto;
  margin-left: 28px;
}

.mds-schedule-cell-icons-background {
  height: 100%; 
  width: 100%;
  pointer-events: none;
  background: transparent;
  background: rgba(170, 170, 170, 0.15);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
}

.mds-schedule-cell-icons {
  pointer-events: auto; 
  position: absolute;
  top: 2px;
  right: 6px;
}

.mbsc-rtl .mds-schedule-cell-icons {
  left: 6px;
  right: auto;
}

.mds-schedule-cell-icon {
  font-size: 16px;
  width: 25px;
  height: 22px;
  line-height: 22px;
  color: #000;
  background: rgba(255, 255, 255, 0.8); 
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  margin: 7px 0;
  text-align: center;
}

Cell Content Template

Duplicate Session

Duplicate Session

Demo

Code

Duplicate Session

Duplicate Session