---
title: "JQuery Timeline Time Grid and Timeline Layout Example | Mobiscroll"
component: "Timeline"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/timeline/timeline-time-grid"
---

# Time Grid and Timeline Layout - jQuery Timeline demo

Switch between a vertical time grid and a horizontal resource timeline in a JQuery scheduler — set responsive to show each layout by screen size. For jQuery or jQuery Mobile.

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

## Description

The scheduler can be laid out in two different ways - as a timegrid or a timeline.

### Time grid

The times rendered vertically, with one or more resources rendered horizontally as a time grid. Day views are great on small screens which can be dynamically switched to work week or full week views and even timeline views on bigger screens. [Play around with the responsive API.](https://demo.mobiscroll.com/jquery/scheduler/responsive-day-week-schedule)

### Timeline

Alternatively you can render the times/days horizontally and the resources vertically as a timeline view. The timeline can easily accommodate a large number of resources thanks to the vertical scroll that is easy to understand for users. This plays well on larger screens and in landscape containers.

You can switch between the two modes by [dynamically setting the event calendar options](https://mobiscroll.com/docs/jquery/eventcalendar/api#setting-options-dynamically) or you can set it up responsively using the [`responsive`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-responsive) option. Eg. show a day grid on mobile and a timeline on desktop.

**Interested in the timeline view?** [Learn how to configure and customize the timeline →](https://demo.mobiscroll.com/jquery/timeline)

## What this demo shows

- A side-by-side comparison of two scheduler layout modes - timeline and time grid - switchable via an external segmented control that dynamically updates the event calendar instance.
- **Timeline view** - five resources listed vertically on the left, with time running horizontally. The view is horizontally scrollable, making it easy to scan across a wide time range for many resources at once.
- **Time grid view** - the same five resources listed horizontally as columns across the top, with time running vertically on the left in hourly steps. Events are positioned within each resource column following their scheduled time.
- Switching between the two modes is done outside the component via a segmented control/tab, demonstrating how to change the `view` option dynamically at runtime.

## Best for

- **Time grid** - providing a familiar vertical calendar layout (similar to Google Calendar) for one or more resources, where events are stacked by time of day. Works well when the number of resources is small and time precision matters.
- **Timeline** - providing a horizontal overview across a large number of resources, where the focus is on seeing resource utilization and event distribution across time rather than precise time-of-day positioning.
- **Responsive or toggled layouts** - applications that need to offer both views and let users or the app switch between them depending on screen size, user preference, or context.

## Tutorial

- ( ) Time grid
- (x) Timeline

```js
$('#mycalendar').mobiscroll().eventcalendar({
    view: {
    timeline: {
            type: 'week'
        }
    },
    resources: [{
        id: 1,
        name: 'Ryan',
        color: '#e9ec12'
    }, {
        id: 2,
        name: 'Kate',
        color: '#239a21'
    }, {
        id: 3,
        name: 'John',
        color: '#ff0101'
    }, {
        id: 4,
        name: 'Mark',
        color: '#d8ca1a'
    }, {
        id: 5,
        name: 'Sharon',
        color: '#8f1ed6'
    }, {
        id: 6,
        name: 'Ashley',
        color: '#01adff'
    }]
});
```

With "Time grid":

```js
$('#mycalendar').mobiscroll().eventcalendar({
    view: {
    schedule: {
            type: 'week'
        }
    },
    resources: [{
        id: 1,
        name: 'Ryan',
        color: '#e9ec12'
    }, {
        id: 2,
        name: 'Kate',
        color: '#239a21'
    }, {
        id: 3,
        name: 'John',
        color: '#ff0101'
    }, {
        id: 4,
        name: 'Mark',
        color: '#d8ca1a'
    }, {
        id: 5,
        name: 'Sharon',
        color: '#8f1ed6'
    }, {
        id: 6,
        name: 'Ashley',
        color: '#01adff'
    }]
});
```

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

## Code

### JS

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

$(function () {
  var calendar = $('#demo-timeline-time-grid')
    .mobiscroll()
    .eventcalendar({
      clickToCreate: true,
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      eventDelete: true,
      view: {
        timeline: {
          type: 'week',
        },
      },
      resources: [
        {
          id: 1,
          name: 'Ryan',
          color: '#fdf500',
        },
        {
          id: 2,
          name: 'Kate',
          color: '#ff4600',
        },
        {
          id: 3,
          name: 'John',
          color: '#ff0101',
        },
        {
          id: 4,
          name: 'Mark',
          color: '#239a21',
        },
        {
          id: 5,
          name: 'Sharon',
          color: '#8f1ed6',
        },
        {
          id: 6,
          name: 'Ashley',
          color: '#01adff',
        },
      ],
    })
    .mobiscroll('getInst');

  $.getJSON(
    'https://trial.mobiscroll.com/timeline-events/?callback=?',
    function (events) {
      calendar.setEvents(events);
    },
    'jsonp',
  );
});
```

### HTML

```html
<div id="demo-timeline-time-grid"></div>
```

### CSS

```css

```

## Implementation notes

- Use `timeline: { type: 'week' }` under the `view` option to render a weekly horizontal timeline with one column per day and one row per resource.
- Define a `resources` array where each entry has an `id`, a `name`, and a `color`. The color tints all event blocks for that resource row.
- Load events asynchronously using `getJson` from the Mobiscroll utility (or any equivalent fetch helper) and pass the result to the `data` prop. Each event needs a `resource` id, a `start`, an `end`, and a `title`.
- To switch to a time-grid layout, replace `timeline: { type: 'week' }` with `schedule: { type: 'week' }` in the view config - resources switch from vertical rows to horizontal columns and time flows vertically. This can be toggled at runtime by updating the `view` prop/option.

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

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: [Month View](https://demo.mobiscroll.com/jquery/timeline/calendar-timeline.md) - Show all resources in a monthly JQuery timeline — resources as rows, days as columns, with configurable time slot granularity. For jQuery or jQuery Mobile.
- Next: [Print and PDF Export](https://demo.mobiscroll.com/jquery/timeline/printing-the-view.md) - Add a print button to your JQuery Timeline to print only the timeline — not the full page — or print the entire page. For jQuery or jQuery Mobile.