---
title: "Javascript Scheduler Inline Data Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/load-inline-data"
---

# Inline Data - JavaScript Scheduler demo

Pass a static event array to the Javascript Scheduler to see how event data is structured — before connecting a live or on-demand data source. Plain JavaScript API.

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

## Description

What is a scheduler without any events in it? To populate it with events all you have to do is pass the event array to the [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) option.

In a real-world scenario you would probably [load the events from a remote resource](https://demo.mobiscroll.com/javascript/scheduler/load-events-from-remote-api) or event better, [load them on demand](https://demo.mobiscroll.com/javascript/scheduler/load-events-on-demand). However the point of this example is to understand how easy it is to add events to the scheduler.

**Do you want to learn about the event data sctructure?** [See how the event object is built →](https://demo.mobiscroll.com/javascript/scheduler/event-data-structure)

## What this demo shows

- A mobile daily scheduler view with a fixed week strip at the top, a fixed all-day row below it, and a scrollable time grid for the selected day.
- **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 dates and jump back to the current day.
- **Week view** The fixed week strip below the header shows the surrounding dates for quick day switching. Dates highlight on hover, and the selected day is marked with a blue circle.
- **All-day events** All-day events are displayed in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler below the all-day row scrolls vertically through the hours of the selected day.
- **Hover feedback** Hovering the time grid shows a time indicator that follows the pointer in 15-minute increments.
- **Event rendering** Events appear 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.
- **Event interactions** Hovering an event highlights it and shows resize and drag handles, indicating that events can be resized or repositioned.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.
- **Event selection** Clicking an event selects and highlights it.
- **Current time** A blue line across the scheduler indicates the current time.

## Best for

- **Business schedules** Daily meeting-heavy calendars for product teams, leadership groups, internal planning, and other workdays with overlapping appointments.
- **Operational scheduling** Use cases such as field service, medical scheduling, conference planning, or shift coordination where users need a fast day-by-day view on mobile.

## 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
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option

## Code

### JS

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

var now = new Date();

mobiscroll.eventcalendar('#demo-inline-data', {
  view: {
    calendar: { type: 'week' },
    scheduler: { type: 'day' },
  },
  data: [
    {
      start: '2026-10-25T09:00',
      end: '2026-10-28T18:00',
      title: 'Business of Software Conference',
      color: '#ff6d42',
    },
    {
      start: '2026-10-25T13:00',
      end: '2026-10-26T21:00',
      title: 'Friends binge marathon',
      color: '#7bde83',
    },
    {
      start: '2026-11-01T13:00',
      end: '2026-11-02T21:00',
      title: 'Friends binge marathon',
      color: '#7bde83',
    },
    {
      start: '2026-10-25T08:00',
      end: '2026-10-25T09:00',
      title: 'Product team mtg.',
      color: '#913aa7',
    },
    {
      start: '2026-10-26T07:00',
      end: '2026-10-26T08:00',
      title: 'Green box to post office',
      color: '#6e7f29',
    },
    {
      start: '2026-10-24T08:45',
      end: '2026-10-24T10:00',
      title: 'Quick mtg. with Martin',
      color: '#de3d83',
    },
    {
      start: '2026-10-08T09:30',
      end: '2026-10-08T10:30',
      title: 'Product team mtg.',
      color: '#f67944',
    },
    {
      start: '2026-10-08T11:00',
      end: '2026-10-08T11:45',
      title: 'Stakeholder mtg.',
      color: '#a144f6',
    },
    {
      start: '2026-10-08T13:00',
      end: '2026-10-08T13:45',
      title: "Lunch @ Butcher's",
      color: '#00aabb',
    },
    {
      start: '2026-10-08T15:00',
      end: '2026-10-08T16:00',
      title: 'General orientation',
      color: '#a71111',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: now.getMonth() + 1,
        day: 14,
      },
      allDay: true,
      title: 'Dexter BD',
      color: '#37bbe4',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: now.getMonth() + 1,
        day: 25,
      },
      allDay: true,
      title: 'Luke BD',
      color: '#37bbe4',
    },
    {
      recurring: {
        repeat: 'weekly',
        weekDays: 'WE',
      },
      allDay: true,
      title: 'Employment (Semi-weekly)',
      color: '#228c73',
    },
    {
      start: '2026-10-10T00:00',
      end: '2026-10-15T00:00',
      allDay: true,
      title: 'Sam OFF',
      color: '#ca4747',
    },
    {
      start: '2026-10-18T00:00',
      end: '2026-10-29T00:00',
      allDay: true,
      title: 'Europe tour',
      color: '#56ca70',
    },
    {
      start: '2026-02-07T00:00',
      end: '2026-02-25T00:00',
      allDay: true,
      title: 'Dean OFF',
      color: '#99ff33',
    },
    {
      start: '2026-03-05T00:00',
      end: '2026-03-14T00:00',
      allDay: true,
      title: 'Mike OFF',
      color: '#e7b300',
    },
    {
      start: '2026-05-07T00:00',
      end: '2026-05-16T00:00',
      allDay: true,
      title: 'John OFF',
      color: '#669900',
    },
    {
      start: '2026-06-01T00:00',
      end: '2026-06-11T00:00',
      allDay: true,
      title: 'Carol OFF',
      color: '#6699ff',
    },
    {
      start: '2026-07-02T00:00',
      end: '2026-07-17T00:00',
      allDay: true,
      title: 'Jason OFF',
      color: '#cc9900',
    },
    {
      start: '2026-08-06T00:00',
      end: '2026-08-14T00:00',
      allDay: true,
      title: 'Ashley OFF',
      color: '#339966',
    },
    {
      start: '2026-09-10T00:00',
      end: '2026-09-20T00:00',
      allDay: true,
      title: 'Marisol OFF',
      color: '#8701a9',
    },
    {
      start: '2026-10-01T00:00',
      end: '2026-10-12T00:00',
      allDay: true,
      title: 'Sharon OFF',
      color: '#cc6699',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 12,
        day: 25,
      },
      allDay: true,
      title: 'Christmas Day',
      color: '#ff0066',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 1,
        day: 1,
      },
      allDay: true,
      title: "New Year's day",
      color: '#99ccff',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 4,
        day: 1,
      },
      allDay: true,
      title: "April Fool's Day",
      color: '#ff6666',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 2,
      },
      allDay: true,
      title: 'File Form 720 for the third quarter',
      color: '#147ea6',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 2,
      },
      allDay: true,
      title: 'File Form 730 and pay tax on wagers accepted during September',
      color: '#a73a4e',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 2,
      },
      allDay: true,
      title: 'File Form 2290 and pay the tax for vehicles first used during September',
      color: '#218e0d',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 2,
      },
      allDay: true,
      title: 'File Form 941 for the third quarter',
      color: '#a67914',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 2,
      },
      allDay: true,
      title: 'Deposit FUTA owed through Sep if more than $500',
      color: '#3c0707',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 30,
      },
      allDay: true,
      title: 'Deposit payroll tax for payments on Nov 21-24 if the semiweekly deposit rule applies',
      color: '#14a618',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 30,
      },
      allDay: true,
      title: 'File Form 730 and pay tax on wagers accepted during October',
      color: '#722ac1',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 30,
      },
      allDay: true,
      title: 'File Form 2290 and pay the tax for vehicles first used during October',
      color: '#256069',
    },
  ],
});
```

### HTML

```html
<div id="demo-inline-data"></div>
```

## Implementation notes

- Use a combined view: `view: { calendar: { type: 'week' }, scheduler: { type: 'day' } }` - a week calendar strip above and a day scheduler below.
- Pass a static array directly to the `data` option. The dataset demonstrates the full range of event patterns:
  - **Timed events** with `dyndatetime` offsets for relative dates
  - **Multi-day events** spanning several days (e.g., conferences, vacations)
  - **All-day events** via `allDay: true`
  - **Recurring yearly events** using `recurring: { repeat: 'yearly', month: M, day: D }`
  - **Recurring weekly events** using `recurring: { repeat: 'weekly', weekDays: 'WE' }`

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

- Next: [Load Events from Remote API](https://demo.mobiscroll.com/javascript/scheduler/load-events-from-remote-api.md) - Populate a Javascript Scheduler from a remote API — fetch from your backend or third-party source and pass data in the format the scheduler expects.