---
title: "JQuery Timeline Load Resources on Scroll Example | Mobiscroll"
component: "Timeline"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/timeline/load-resources-on-scroll"
---

# Load Resources on Scroll - jQuery Timeline demo

Build responsive large-resource scheduling timelines with the JQuery Timeline — use virtual scrolling to load only visible resource rows on demand. For jQuery or jQuery Mobile.

- [Live demo](https://demo.mobiscroll.com/jquery/timeline/load-resources-on-scroll)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/eventcalendar/timeline/load-resources-on-scroll)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/load-resources-on-scroll.md), [Angular](https://demo.mobiscroll.com/angular/timeline/load-resources-on-scroll.md), [React](https://demo.mobiscroll.com/react/timeline/load-resources-on-scroll.md), [Vue](https://demo.mobiscroll.com/vue/timeline/load-resources-on-scroll.md)

## Description

The timeline view is virtualized which means that the markup is being generated and maintained on the fly. Navigating both vertically and horizontally through scrolling fires the [`onVirtualLoading`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onVirtualLoading) lifecycle event which can be used to load the data on scroll rather than load everything on initial page rendering.

This dramatically improves performance in case of a large event and resource count since not all data is loaded in memory from start.

**Looking to load events on scroll?** [Check out this example →](https://demo.mobiscroll.com/jquery/timeline/load-events-on-scroll)

## What this demo shows

- A desktop month timeline with days arranged horizontally and resources listed as rows on the left.
- **Loading resources on scroll** A `Loading Resources...` toast appears at the bottom center of the timeline when vertical scrolling reaches unloaded resource rows.
- **Virtual loading** Scrolling through the virtualized timeline fires the `onVirtualLoading` lifecycle event, which can be used to load resources for the visible range instead of loading all resources during initial rendering.
- **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 strip below the header shows the days of the selected month, with the current date highlighted.
- **Timeline grid** The timeline displays hourly columns from 12 AM to 12 PM.
- **Resources** Multiple resources are shown as separate timeline rows.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** Events appear as blue cards with a blue stripe on the left, the event title in bold, and the exact start and end time displayed below the title.
- **Date positioning** Events are positioned by their assigned resource and exact 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 time and resources.

## Best for

- **Large resource lists** Scheduling interfaces where loading every employee, room, vehicle, asset, or service provider up front would slow initial rendering.
- **Workforce planning** Staff scheduling boards where users move through long resource lists but only need the currently visible rows loaded at any given time.
- **Dispatch and field service** Timelines with many technicians, drivers, crews, or vehicles where resource rows can be loaded as the user scrolls.
- **Multi-location scheduling** Planning views that include resources across several branches, departments, sites, or regions.
- **High-volume operational views** Resource timelines that need to stay responsive while handling large data sets over time.

## 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
- [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option
- [`resources`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-resources) - option
- [`selectedDate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-selectedDate) - option
- [`onVirtualLoading`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onVirtualLoading) - event
- [`setOptions`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-setOptions) - method
- [`data`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-data) - option
- [`setEvents`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-setEvents) - method

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

$(function () {
  var resources = [
    { id: 1, name: 'Resource 1' },
    { id: 2, name: 'Resource 2' },
    { id: 3, name: 'Resource 3' },
    { id: 4, name: 'Resource 4' },
    { id: 5, name: 'Resource 5' },
    { id: 6, name: 'Resource 6' },
    { id: 7, name: 'Resource 7' },
    { id: 8, name: 'Resource 8' },
    { id: 9, name: 'Resource 9' },
    { id: 10, name: 'Resource 10' },
    { id: 11, name: 'Resource 11' },
    { id: 12, name: 'Resource 12' },
    { id: 13, name: 'Resource 13' },
    { id: 14, name: 'Resource 14' },
    { id: 15, name: 'Resource 15' },
    { id: 16, name: 'Resource 16' },
    { id: 17, name: 'Resource 17' },
    { id: 18, name: 'Resource 18' },
    { id: 19, name: 'Resource 19' },
    { id: 20, name: 'Resource 20' },
    { id: 21, name: 'Resource 21' },
    { id: 22, name: 'Resource 22' },
    { id: 23, name: 'Resource 23' },
    { id: 24, name: 'Resource 24' },
    { id: 25, name: 'Resource 25' },
  ];

  $('#demo-load-resources-on-scroll')
    .mobiscroll()
    .eventcalendar({
      view: {
        timeline: {
          type: 'month',
          resolutionHorizontal: 'hour',
        },
      },
      resources: resources,
      selectedDate: '2021-01-05',
      onVirtualLoading: function (args, inst) {
        var start = mobiscroll.formatDate('YYYY-MM-DD', args.viewStart);
        var end = mobiscroll.formatDate('YYYY-MM-DD', args.viewEnd);
        var isEndLoaded = resources[resources.length - 1].id > args.resourceEnd;

        if (!isEndLoaded) {
          mobiscroll.toast({
            message: 'Loading Resources...',
            duration: 1000,
          });
        }

        $.getJSON(
          'https://trial.mobiscroll.com/load-data-scroll/?start=' +
            start +
            '&end=' +
            end +
            '&rstart=' +
            args.resourceStart +
            '&rend=' +
            args.resourceEnd +
            '&load=' +
            (!isEndLoaded ? args.resourceEnd : 0) +
            '&callback=?',
          function (newData) {
            if (newData.resources) {
              resources = resources.concat(newData.resources);
              inst.setOptions({
                resources: resources,
                data: newData.events,
              });
            } else {
              inst.setEvents(newData.events);
            }
          },
          'jsonp',
        );
      },
    });
});
```

### HTML

```html
<div id="demo-load-resources-on-scroll"></div>
```

## Implementation notes

- Use `timeline: { type: 'month', resolutionHorizontal: 'hour' }` - same wide scrollable grid as the `load-events-on-scroll` demo.
- Start with 25 pre-defined resources (Resource 1-25), plain `{ id, name }` objects with no colors. No initial events - the events array starts empty and is populated by the first `onVirtualLoading` call.
- **`onVirtualLoading` handler** - fires on every scroll, both horizontal and vertical. It loads events for the visible time window, and also appends more resources when the user scrolls past the bottom of the currently loaded list:

  1. Format `args.viewStart` / `args.viewEnd` as `YYYY-MM-DD` using `formatDate`.
  2. **Detect whether more resources are needed**: `isEndLoaded = resources[resources.length - 1].id > args.resourceEnd`. When `isEndLoaded` is `false`, the viewport has scrolled past the last loaded resource - show the Toast "Loading Resources..." with `duration: 1000`.
  3. Build the API URL with four query params:
     ```
     https://trial.mobiscroll.com/load-data-scroll/?start=...&end=...&rstart={args.resourceStart}&rend={args.resourceEnd}&load={!isEndLoaded ? args.resourceEnd : 0}
     ```
     - `rstart` / `rend` - the index range of currently visible resource rows.
     - `load` - signals the server how many resources to return: set to `args.resourceEnd` when new resources are needed, `0` otherwise.
  4. On response:
     - If `data.resources` is present: append new resources to the existing list and update events.
     - Otherwise: update events only (no new resources for this scroll position).

- **State update after fetch**: spread new resources into the existing array (`[...resources, ...data.resources]`) and update events; for the imperative API, use `inst.setOptions({ resources: updatedList, data: data.events })` when resources change, or `inst.setEvents(data.events)` when only events change.

## 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

- Previous: [Load Resources on Demand](https://demo.mobiscroll.com/jquery/timeline/load-resources-on-demand.md) - Build hierarchical resource scheduling interfaces with on-demand data loading — the JQuery Timeline fetches child resources.
- Next: [Large Dataset Performance](https://demo.mobiscroll.com/jquery/timeline/loading-big-data-sets.md) - Handle thousands of events and resources in a JQuery Timeline — virtual scrolling keeps navigation smooth across long date ranges on mobile and desktop.