---
title: "JQuery Timeline Cell Hover Highlight Example | Mobiscroll"
component: "Timeline"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/timeline/dynamic-resource-column-highlight-on-cell-hover"
---
# Cell Hover Highlight - jQuery Timeline demo
Add row and column hover highlighting to a JQuery resource timeline — highlight the active resource row and date column on hover. For jQuery or jQuery Mobile.
- [Live demo](https://demo.mobiscroll.com/jquery/timeline/dynamic-resource-column-highlight-on-cell-hover)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/eventcalendar/timeline/dynamic-resource-column-highlight-on-cell-hover)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/dynamic-resource-column-highlight-on-cell-hover.md), [Angular](https://demo.mobiscroll.com/angular/timeline/dynamic-resource-column-highlight-on-cell-hover.md), [React](https://demo.mobiscroll.com/react/timeline/dynamic-resource-column-highlight-on-cell-hover.md), [Vue](https://demo.mobiscroll.com/vue/timeline/dynamic-resource-column-highlight-on-cell-hover.md)
## Description
Highlight the resource row and date column on cell hover to improve usability by clearly showing where the user is interacting.
This is achieved using the `onCellHoverIn` and `onCellHoverOut` lifecycle events. These track the hovered cell and update the resources with a custom `cssClass`, which highlights the resource row. A popup is also shown on hover, displaying relevant information about the cell like the date and resource name.
The column highlight is applied using the `renderCell`, `renderSidebar`, `renderTimelineDay`, and `renderDayFooter` callbacks, where conditional markup is returned to highlight the vertical column.
This makes it easy to implement custom hover interactions that match your design and UX goals.
## What this demo shows
- A desktop monthly timeline with days arranged horizontally and resources listed as rows.
- **Header navigation** The month and year label opens date navigation, the previous and next arrows move between months, and the Today button returns to the current date.
- **Month view** The timeline displays the days of the selected month as horizontal date columns.
- **Footer** The bottom strip repeats the days of the selected month.
- **Resources** Multiple resources are shown as separate timeline rows on the left.
- **Sidebar** Resource names are also rendered in a right-side sidebar.
- **Cell hover** Hovering a timeline cell highlights both the resource row and the date column, making the active cell context clear.
- **Hover popup** A popup appears on cell hover with contextual information, including the resource name and date.
- **Column highlight** The highlighted date column is applied across the timeline body, day header, footer, and sidebar rendering areas.
- **Event cards** Events appear as colored cards with a colored stripe, bold event title, and exact start and end time.
- **Date positioning** Events are positioned by their assigned resource and date range.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through dates and resources.
## Best for
- **Resource timelines** Applications that need to show many resources against a shared monthly timeline.
- **Context-heavy scheduling** Scheduling interfaces where users need clear row and column feedback before creating, moving, or resizing events.
- **Operational dashboards** Planning views that benefit from contextual hover details without opening a full editor.
- **Asset management** Interfaces for tracking equipment, rooms, vehicles, or other assignable resources over time.
- **Workforce scheduling** Staff planning views where resource names, dates, and scheduled work need to stay easy to follow.
## API used in this demo
- [`theme`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-eventDelete) - option
- [`cssClass`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-cssClass) - option
- [`data`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-resources) - option
- [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option
- [`onCellHoverIn`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onCellHoverIn) - event
- [`setOptions`](https://mobiscroll.com/docs/jquery/popup/api#method-setOptions) - method
- [`anchor`](https://mobiscroll.com/docs/jquery/popup/api#opt-anchor) - option
- [`open`](https://mobiscroll.com/docs/jquery/popup/api#method-open) - method
- [`setOptions`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-setOptions) - method
- [`onCellHoverOut`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onCellHoverOut) - event
- [`close`](https://mobiscroll.com/docs/jquery/popup/api#method-close) - method
- [`renderCell`](https://mobiscroll.com/docs/jquery/eventcalendar/api#renderer-renderCell) - renderer
- [`renderTimelineDay`](https://mobiscroll.com/docs/jquery/eventcalendar/api#renderer-renderTimelineDay) - renderer
- [`renderDayFooter`](https://mobiscroll.com/docs/jquery/eventcalendar/api#renderer-renderDayFooter) - renderer
- [`renderSidebar`](https://mobiscroll.com/docs/jquery/eventcalendar/api#renderer-renderSidebar) - renderer
- [`display`](https://mobiscroll.com/docs/jquery/popup/api#opt-display) - option
- [`showOverlay`](https://mobiscroll.com/docs/jquery/popup/api#opt-showOverlay) - option
- [`scrollLock`](https://mobiscroll.com/docs/jquery/popup/api#opt-scrollLock) - option
- [`focusOnClose`](https://mobiscroll.com/docs/jquery/popup/api#opt-focusOnClose) - option
## Code
### JS
```js
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
$(function () {
var myEvents = [
{
start: '2026-10-02T00:00',
end: '2026-10-05T00:00',
title: 'Event 1',
resource: 1,
},
{
start: '2026-10-10T09:00',
end: '2026-10-15T15:00',
title: 'Event 2',
resource: 3,
},
{
start: '2026-10-12T00:00',
end: '2026-10-14T00:00',
title: 'Event 3',
resource: 4,
},
{
start: '2026-10-15T07:00',
end: '2026-10-20T12:00',
title: 'Event 4',
resource: 5,
},
{
start: '2026-10-03T00:00',
end: '2026-10-10T00:00',
title: 'Event 5',
resource: 6,
},
{
start: '2026-10-10T08:00',
end: '2026-10-11T20:00',
title: 'Event 6',
resource: 7,
},
{
start: '2026-10-22T00:00',
end: '2026-10-28T00:00',
title: 'Event 7',
resource: 7,
},
{
start: '2026-10-08T00:00',
end: '2026-10-13T00:00',
title: 'Event 8',
resource: 15,
},
{
start: '2026-10-25T00:00',
end: '2026-10-27T00:00',
title: 'Event 9',
resource: 10,
},
{
start: '2026-10-20T00:00',
end: '2026-10-23T00:00',
title: 'Event 10',
resource: 12,
},
];
var myResources = [
{ id: 1, name: 'Resource A', color: '#e20000' },
{ id: 2, name: 'Resource B', color: '#76e083' },
{ id: 3, name: 'Resource C', color: '#4981d6' },
{ id: 4, name: 'Resource D', color: '#e25dd2' },
{ id: 5, name: 'Resource E', color: '#1dab2f' },
{ id: 6, name: 'Resource F', color: '#d6d145' },
{ id: 7, name: 'Resource G', color: '#34c8e0' },
{ id: 8, name: 'Resource H', color: '#9dde46' },
{ id: 9, name: 'Resource I', color: '#166f6f' },
{ id: 10, name: 'Resource J', color: '#f7961e' },
{ id: 11, name: 'Resource K', color: '#34c8e0' },
{ id: 12, name: 'Resource L', color: '#af0000' },
{ id: 13, name: 'Resource M', color: '#446f1c' },
{ id: 14, name: 'Resource N', color: '#073138' },
{ id: 15, name: 'Resource O', color: '#4caf00' },
];
var formatDate = mobiscroll.formatDate;
var hoverDateTime;
var calendar = $('#demo-highlight-hover')
.mobiscroll()
.eventcalendar({
clickToCreate: true,
dragToCreate: true,
dragToMove: true,
dragToResize: true,
eventDelete: true,
cssClass: 'mds-highlight-hover',
data: myEvents,
resources: myResources,
view: {
timeline: {
type: 'month',
resolutionHorizontal: 'day',
},
},
onCellHoverIn: function (args) {
$('.mds-highlight-tooltip-name').text(args.resource.name);
$('.mds-highlight-tooltip-date').text(formatDate('MMM DD, YYYY', args.date));
tooltip.setOptions({ anchor: args.domEvent.target });
tooltip.open();
hoverDateTime = args.date;
myResources.forEach(function (r) {
r.cssClass = r.id === args.resource.id ? 'mds-highlight-row-hover' : '';
});
calendar.setOptions({ resources: myResources.slice() });
},
onCellHoverOut: function () {
tooltip.close();
myResources.forEach(function (r) {
r.cssClass = '';
});
hoverDateTime = null;
setTimeout(function () {
calendar.setOptions({ resources: myResources.slice() });
});
},
renderCell: function (args) {
return hoverDateTime && args.date.getTime() === hoverDateTime.getTime() ? '' : '';
},
renderTimelineDay: function (args) {
var isHover = hoverDateTime && args.date.getTime() === hoverDateTime.getTime();
var hoverClass = isHover ? ' mds-highlight-col-hover' : '';
return '' + formatDate('D DDD', args.date) + '
';
},
renderDayFooter: function (args) {
var isHover = hoverDateTime && args.date.getTime() === hoverDateTime.getTime();
var hoverClass = isHover ? ' mds-highlight-col-hover' : '';
return '' + formatDate('D DDD', args.date) + '
';
},
renderSidebar: function (resource) {
return '' + resource.name + ' Sidebar
';
},
})
.mobiscroll('getInst');
var tooltip = $('#demo-highlight-cell-popup')
.mobiscroll()
.popup({
display: 'anchored',
showOverlay: false,
scrollLock: false,
focusOnClose: false,
closeOnScroll: true,
})
.mobiscroll('getInst');
});
```
### HTML
```html
```
### CSS
```css
.mds-highlight-hover .mbsc-timeline-sidebar-col {
width: 170px;
}
.mds-highlight-hover .mbsc-timeline-sidebar-resource-title {
font-weight: 500;
}
.mds-highlight-hover .mds-highlight-row-hover,
.mds-highlight-hover .mds-highlight-col-hover {
background: rgba(220,220,220,0.25);
}
.mds-highlight-col-hover {
position: absolute;
inset: 0;
background: transparent;
pointer-events: none;
box-sizing: border-box;
}
.mds-highlight-day-content {
font-size: 14px;
height: 30px;
text-align: center;
line-height: 30px;
position: relative;
}
.mds-highlight-tooltip {
padding: 5px;
font-size: 14px;
line-height: 1.4;
}
.mds-highlight-tooltip-name {
font-weight: bold;
margin-bottom: 5px;
}
.mds-highlight-tooltip-date {
color: #888;
}
```
## Implementation notes
- Use `timeline: { type: 'month', resolutionHorizontal: 'day' }` - a monthly view with one column per day.
- Define 15 resources (A-O) with `id`, `name`, and `color`.
- Add 10 events with `dyndatetime` offsets spread across the current month.
- Track the currently hovered cell in a `hoverDateTime` variable (set on hover in, cleared on hover out).
- **Row highlight** via `cssClass` on resource objects:
- `onCellHoverIn`: iterate the resources array, set `cssClass: 'mds-highlight-row-hover'` on the resource whose `id` matches `args.resource.id`, clear `cssClass` on all others. JS/jQuery: call `calendar.setOptions({ resources: myResources.slice() })` to push the change and trigger a re-render. React/Angular/Vue: instead update the state/binding feeding the `resources` prop directly (e.g. `setResources(myResources.slice())`).
- `onCellHoverOut`: clear all `cssClass` values. JS/jQuery: wrap `setOptions` in a `setTimeout` (no delay) so the render callbacks reset before the DOM updates. React/Angular/Vue: wrap the equivalent `resources` state/binding update (e.g. `setResources(myResources.slice())`) in the same `setTimeout` (no delay) so the render callbacks reset before the DOM updates.
- **Column highlight** via render callbacks that compare each cell's date to `hoverDateTime`:
- `renderCell` (Angular: `cellTemplate`, Vue: `#cell`): when `args.date` matches `hoverDateTime`, return a full-cell overlay `` (positioned absolute, `inset: 0`, `pointer-events: none`); otherwise return an empty string.
- `renderTimelineDay` (Angular: `timelineDayTemplate`, Vue: `#timelineDay`) and `renderDayFooter` (Angular: `dayFooterTemplate`, Vue: `#dayFooter`): always render a custom day content div showing `formatDate('D DDD', args.date)`. When the date matches `hoverDateTime`, add `mds-highlight-col-hover` to the div's class.
- `renderSidebar` (Angular: `sidebarTemplate`, Vue: `#sidebar`): renders the resource name with a " Sidebar" suffix.
- **Tooltip popup** (`Popup`, `display: 'anchored'`, `showOverlay: false`, `scrollLock: false`, `focusOnClose: false`, `closeOnScroll: true`):
- `onCellHoverIn`: set `anchor: args.domEvent.target`, populate the tooltip with `args.resource.name` and `formatDate('MMM DD, YYYY', args.date)`, then open.
- `onCellHoverOut`: close the popup.
- **CSS**: `.mds-highlight-row-hover` and `.mds-highlight-col-hover` share the same background `rgba(220,220,220,0.25)` - the row class is applied via the resource `cssClass` property (Mobiscroll renders it on the row container), and the column class is applied via the overlay div in `renderCell` and the class added in `renderTimelineDay`/`renderDayFooter`.
## 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-jquery.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 jquery
```
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 jquery --trial`.
Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/jquery/getting-started/installation
## Related demos
- Next: [Custom Time Range Backgrounds](https://demo.mobiscroll.com/jquery/timeline/colors-invalids-css-class.md) - Style a JQuery Timeline with disabled periods — add background patterns or labels to mark recurring hours, special days, or blocked slots.