---
title: "Javascript Scheduler Cell Content Template Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/cell-content-template"
---
# Cell Content Template - JavaScript Scheduler demo
Add custom content to Javascript Scheduler cells — show icons, badges, colored backgrounds, or status markers based on date, resource, and event data. Plain JavaScript API.
- [Live demo](https://demo.mobiscroll.com/javascript/scheduler/cell-content-template)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/scheduler/cell-content-template)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/scheduler/cell-content-template.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/cell-content-template.md), [React](https://demo.mobiscroll.com/react/scheduler/cell-content-template.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/cell-content-template.md)
## Description
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.](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderCell) 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`](https://mobiscroll.com/docs/javascript/eventcalendar/timeline#view-timeline-timeCellStep) option.
## What this demo shows
- A desktop weekly scheduler for Monday through Friday, with a fixed week strip, a fixed all-day row, and a vertically scrollable time grid from 8 AM to 6 PM.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week view** The fixed strip below the header shows the selected work week from Monday to Friday, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler shows a 10-hour range from 8 AM to 6 PM and supports vertical scrolling.
- **Timed events** Timed events appear as blue cards in the weekly scheduler grid, with a blue stripe on the left, the exact start and end time above the title, and the event title shown in bold.
- **Custom cell content** Some time-grid cells use custom content, including a gray background and icons on the left side of the cell.
- **Cell data usage** Custom cell rendering can show icons, badges, or status markers based on cell data such as holidays, availability, or other scheduling states.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.
## Best for
- **Employee shift scheduling** Plan weekly work schedules, manage overlapping shifts, track availability, and show all-day absences or holidays in the scheduler.
- **Appointment and service booking** Manage appointments for clinics, salons, consulting firms, and service businesses that need clear time slots and conflict visibility.
- **Resource and room management** Coordinate meeting rooms, equipment, shared workspaces, or other resources with reservations throughout the work week.
- **Project and team planning** Organize weekly tasks, workshops, standups, and milestones while keeping work, availability, and time allocation visible.
## API used in this demo
- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventDelete) - option
- [`cssClass`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-cssClass) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`renderCell`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderCell) - renderer
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
## Code
### JS
```js
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
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: true,
dragToCreate: true,
dragToMove: true,
dragToResize: true,
eventDelete: true,
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 (
'
' +
icons
.map(function (icon) {
return (
'
' +
'' +
'
'
);
})
.join('') +
'
'
);
},
view: {
scheduler: { type: 'week', startTime: '08:00', endTime: '18:00', startDay: 1, endDay: 5 },
},
});
```
### HTML
```html
```
### CSS
```css
.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;
}
```
## Implementation notes
- Use `view: { scheduler: { type: 'week', startTime: '08:00', endTime: '18:00', startDay: 1, endDay: 5 } }` - Mon-Fri, 8am-6pm.
- Define 14 inline events with relative dates; each has `title`, `start`, `end`, and `id`.
- Pass a cell renderer to `renderCell` (Vue: `#cell` slot; Angular: `[cellTemplate]`). The renderer receives the cell's `date` - read `.getHours()` and `.getDay()` to determine which icon badges to show:
- Mon/Fri at h=9: people + message icons; h=13: lunch icon; Mon-Fri at h=17: clock icon; Tue at h=10-11: loop icon; `h % 4 === 0`: cogs icon; h=3: connection icon; h=12: upload icon; h=15: lock icon (React/Vue/JS/jQuery; Angular omits this condition); Wed at h=14: deploy icon.
- Each icon is rendered as a `mbsc-font-icon mbsc-icon-{name}` element with a `title` attribute. Return `null`/empty string when the cell has no icons.
## Run it in your project
1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).
2. Clone the repository:
```
git clone https://github.com/acidb/mobiscroll-demos-javascript.git
```
3. If not installed yet, install the Mobiscroll CLI from NPM:
```
npm install -g @mobiscroll/cli
```
4. Config Mobiscroll - open a terminal window in the root directory and run:
```
mobiscroll config javascript
```
5. Install dependencies - open a terminal window in the root directory and run:
```
npm install
```
6. Run the project:
```
npm run dev
```
On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.
Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation
## Related demos
- Previous: [Resource Headers](https://demo.mobiscroll.com/javascript/scheduler/custom-resource-header-template.md) - Build a Javascript resource scheduler where each column shows a custom header — add avatar, name, and job title to identify resources at a glance.
- Next: [Custom Header](https://demo.mobiscroll.com/javascript/scheduler/customizing-header.md) - Customize the Javascript Scheduler header — rearrange navigation controls, add a view-switcher for scheduler/calendar views, and set per-theme control order.