---
title: "JQuery Scheduler Lazy Load Events on Scroll Example | Mobiscroll"
component: "Scheduler"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/scheduler/load-events-on-scroll"
---

# Lazy Load Events on Scroll - jQuery Scheduler demo

Load JQuery scheduler events on demand as users scroll — fetch only the visible date range to keep performance fast with large event counts.

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

## Description

The scheduler 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 count since not all data is loaded in memory from start.

## What this demo shows

- A desktop monthly scheduler layout with a fixed month strip at the top, repeated resources for each day, a fixed all-day row below it, and a scrollable scheduler time grid for the selected month.
- **Loading events on demand** On the initial load or navigating both vertically and horizontally through scrolling, a `Loading events...` toast appears at the bottom center of the calendar. This indicates that the events were loaded real time.
- **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 displays the days of the selected month, with the current date highlighted by a blue circle.
- **Resources**: Each day repeats the same 20 resources.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected month.
- **Timed events** Timed events are displayed in the monthly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **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.
- **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

- **On-scroll event loading** Explaining how to load calendar events as the user navigates both vertically and horizontally through scrolling.
- **Performance-sensitive calendars** Reducing the initial data load by fetching only the events needed for the currently visible date range.
- **Live data scenarios** Showing the most recent event data by requesting it when the calendar view changes.

## 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
- [`groupBy`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-groupBy) - option
- [`resources`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-resources) - option
- [`onVirtualLoading`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onVirtualLoading) - event
- [`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', color: '#FF5733' },
    { id: 2, name: 'Resource 2', color: '#33FF57' },
    { id: 3, name: 'Resource 3', color: '#3357FF' },
    { id: 4, name: 'Resource 4', color: '#FF33A6' },
    { id: 5, name: 'Resource 5', color: '#FFC300' },
    { id: 6, name: 'Resource 6', color: '#DAF7A6' },
    { id: 7, name: 'Resource 7', color: '#581845' },
    { id: 8, name: 'Resource 8', color: '#900C3F' },
    { id: 9, name: 'Resource 9', color: '#C70039' },
    { id: 10, name: 'Resource 10', color: '#FF5733' },
    { id: 11, name: 'Resource 11', color: '#33FFBD' },
    { id: 12, name: 'Resource 12', color: '#FFC300' },
    { id: 13, name: 'Resource 13', color: '#FF33F6' },
    { id: 14, name: 'Resource 14', color: '#33FF57' },
    { id: 15, name: 'Resource 15', color: '#33A6FF' },
    { id: 16, name: 'Resource 16', color: '#DAF7A6' },
    { id: 17, name: 'Resource 17', color: '#581845' },
    { id: 18, name: 'Resource 18', color: '#900C3F' },
    { id: 19, name: 'Resource 19', color: '#C70039' },
    { id: 20, name: 'Resource 20', color: '#FF33F6' },
  ];

  $('#demo-load-events-on-scroll')
    .mobiscroll()
    .eventcalendar({
      view: {
        scheduler: {
          type: 'month',
          timeCellStep: 15,
          timeLabelStep: 15,
        },
      },
      groupBy: 'date',
      resources: resources,
      onVirtualLoading: function (args, inst) {
        var start = mobiscroll.formatDate('YYYY-MM-DDTHH:mm:ss', args.viewStart);
        var end = mobiscroll.formatDate('YYYY-MM-DDTHH:mm:ss', args.viewEnd);

        $.getJSON(
          'https://trial.mobiscroll.com/load-data-scroll/?start=' +
            start +
            '&end=' +
            end +
            '&rstart=' +
            args.resourceStart +
            '&rend=' +
            args.resourceEnd +
            '&callback=?',
          function (data) {
            inst.setEvents(data.events);

            mobiscroll.toast({
              message: 'Loading events...',
              duration: 1000,
            });
          },
          'jsonp',
        );
      },
    });
});
```

### HTML

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

### CSS

```css
/* code */
```

## Implementation notes

- Use `view: { scheduler: { type: 'month', timeCellStep: 15, timeLabelStep: 15 } }` with `groupBy="date"` - a month view with 15-minute grid cells and date-grouped columns (rows = resources, columns = days).
- Define 20 resources with varied colors.
- **Scroll-triggered loading** is driven by `onVirtualLoading` (Vue: `@virtual-loading`), which fires whenever the user scrolls. Inside the handler, format the visible time window using `formatDate('YYYY-MM-DDTHH:mm:ss', args.viewStart)` and `formatDate('YYYY-MM-DDTHH:mm:ss', args.viewEnd)`, and pass the visible resource range via `args.resourceStart` and `args.resourceEnd`. Build the URL: `https://trial.mobiscroll.com/load-data-scroll/?start=...&end=...&rstart=...&rend=...`. Use `getJson(url, callback, 'jsonp')` to fetch. The endpoint returns an object - read `data.events`, not the raw response. For the imperative API, call `inst.setEvents(data.events)`. Show a `Toast` with `message: "Loading events..."` and `duration: 1000`.

## 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 Events on Demand](https://demo.mobiscroll.com/jquery/scheduler/load-events-on-demand.md) - Fetch JQuery scheduler events as users navigate between dates — use a lifecycle callback to load only the visible date range from a remote or local source.
- Next: [Large Dataset Performance](https://demo.mobiscroll.com/jquery/scheduler/loading-big-data-sets.md) - See how the JQuery Scheduler handles large data sets— virtual scrolling keeps 20 resources and 2,000 events smooth on mobile and desktop.