---
title: "JQuery Event calendar Inline Events Example | Mobiscroll"
component: "Event calendar"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/eventcalendar/load-inline-data"
---

# Inline Events - jQuery Event calendar demo

Populate a JQuery event calendar with events using an inline data array — month view with event labels and overflow popover. For jQuery or jQuery Mobile.

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

## Description

What is an event calendar 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/jquery/eventcalendar/api#opt-data) option.

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

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

## What this demo shows

- A month-view event calendar is displayed inside a smartphone frame.
- **Month grid** Days with events display event labels directly in the month cells with different visual styles based on the event type or event data.
- **Overflow handling** The number of visible event labels depends on the available height in each day cell. Additional events are collapsed behind an `X more` link.
- **Popover** Clicking the `X more` link opens a popover that shows the hidden events for that day.
- **Event interaction** Hovering over or selecting an event label highlights it.
- **Day cell states** Hovering a day cell highlights the day number with a gray background, while clicking the empty part of the cell selects the day and highlights the day number with a blue background.
- **Month navigation** You can move between months by clicking and dragging the calendar left or right.
- **Calendar header** The header shows the current month and year on the left, and blue month navigation arrows with a `Today` button (for jumping back to the current date) between them on the right.

## Best for

- **Monthly event overview** Showing a full month of events in a compact calendar layout.

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

## Code

### JS

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

var now = new Date();

$(function () {
  $('#demo-inline-data')
    .mobiscroll()
    .eventcalendar({
      view: {
        calendar: {
          labels: true,
        },
      },
      data: [
        {
          start: '2026-10-21T09:00',
          end: '2026-10-24T18:00',
          title: 'Business of Software Conference',
          color: '#ff6d42',
        },
        {
          start: '2026-10-21T13:00',
          end: '2026-10-22T21:00',
          title: 'Friends binge marathon',
          color: '#7bde83',
        },
        {
          start: '2026-10-28T13:00',
          end: '2026-10-29T21:00',
          title: 'Friends binge marathon',
          color: '#7bde83',
        },
        {
          start: '2026-10-21T08:00',
          end: '2026-10-21T09:00',
          title: 'Product team mtg.',
          color: '#913aa7',
        },
        {
          start: '2026-10-22T07:00',
          end: '2026-10-22T08:00',
          title: 'Green box to post office',
          color: '#6e7f29',
        },
        {
          start: '2026-10-20T08:45',
          end: '2026-10-20T10: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 `view: { calendar: { labels: true } }`.
- Define a static event array and pass it directly to the `data` prop/option - no remote fetch. Include a variety of event shapes: timed events (`start`, `end`, `title`, `color`), multi-day events, all-day events (`allDay: true`), and recurring events (e.g., `{ recurring: { repeat: 'yearly', month: 12, day: 25 }, allDay: true, title: 'Christmas Day', color: '#ff0066' }`). Use relative date helpers (`dyndatetime` or equivalent) so events always land near the current month regardless of when the demo is opened.
- No `data` prop change or async loading is needed after mount - the event array is fully static. For JS/jQuery, pass the array as the `data` option directly in the `eventcalendar()` init call.

## 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: [Load Events from API](https://demo.mobiscroll.com/jquery/eventcalendar/load-events-from-remote-api.md) - Load events into a JQuery event calendar from a remote API — pass event data in the correct format to populate the calendar view.