Cell Content Template

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.

Get started with this example

Demo

Loading the live demo

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.

Code

View code on GitHub 
import { Eventcalendar, setOptions  } from '@mobiscroll/react';
import { useCallback, useMemo } from 'react';

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

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

  const myView = useMemo(
    () => ({
      scheduler: { type: 'week', startTime: '08:00', endTime: '18:00', startDay: 1, endDay: 5 },
    }),
    [],
  );

  const renderCell = useCallback((cell) => {
    const h = cell.date.getHours();
    const d = cell.date.getDay();
    const icons = [];

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

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

    return (
      <div className="mds-schedule-cell-icons-background">
        <div className="mds-schedule-cell-icons">
          {icons.map((i) => (
            <div key={i.icon} className="mds-schedule-cell-icon" title={i.title}>
              <div className={'mbsc-font-icon mbsc-icon-' + i.icon} />
            </div>
          ))}
        </div>
      </div>
    );
  }, []);

  return (
    <>
      <Eventcalendar cssClass="mds-schedule-cell-template" data={myEvents} renderCell={renderCell} view={myView} />
    </>
  );
}

export default App;

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.