---
title: "JQuery Timeline Monthly Timetable View Example | Mobiscroll"
component: "Timeline"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/timeline/monthly-timetable-vertical-days-horizontal-times"
---

# Monthly Timetable View - jQuery Timeline demo

Display a monthly timetable in the JQuery Timeline — days listed vertically, hours across, with drag-to-create in a single-resource layout. For jQuery or jQuery Mobile.

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

## Description

While the timeline is great for [working with many resources](https://demo.mobiscroll.com/jquery/timeline/loading-big-data-sets) where each resource is rendered vertically with their own track, in case of a single resource you can use the vertical space to render multiple days.

By setting the [`resolutionVertical`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) to day and keeping the horizontal resolution hourly, you can easily render month views where the days of the month are listed vertically and the daily timeline is laid out horizontally.

**Want to learn about how you can configure the horizontal and vertical resolution?** [Play around with this example →](https://demo.mobiscroll.com/jquery/timeline/multiple-days-weeks-months-quarters-years-variable-resolution)

## What this demo shows

- A desktop monthly timetable layout where the days of the month are shown on the vertical axis and the hours of the day are shown on the horizontal axis.
- **Header navigation** The month and year label in the top left opens date navigation, while the previous and next arrows and the Today button move the timeline between months or back to the current day.
- **Time grid** The fixed strip below the header shows the 24-hour day in hourly columns.
- **Vertical month view** The left-side strip lists the days of the selected month using the `D DDD` date format, with the current date highlighted in blue.
- **Current time** The current time is marked with a vertical blue line and a time label.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** Events are rendered as colored cards with a colored stripe on the left, the exact start and end time below the title, and the title in bold.
- **Event positioning** Events are placed according to their date, start time, and end time.
- **Event overlapping** Overlapping events are stacked within the day row so they remain visible, with the row height increasing as needed.
- **Event creation** New events can be created by double-clicking in the timeline or by clicking and dragging across a time range.
- **Event interaction** Events highlight on hover and show drag and resize handles for moving the event or changing its duration.
- **Event selection** Clicking an event selects and highlights it.
- **Scrolling** The timeline supports vertical and horizontal scrolling for navigating across days and hours.

## Best for

- **Meeting schedules** Organizing time-based meetings by calendar date in a single monthly timetable.
- **Training plans** Planning sessions across multiple days when each item needs a clear start and end time.
- **Project timelines** Mapping scheduled work across a month without using people, rooms, or other resources as rows.
- **Event planning** Coordinating date-based activities that need hourly placement and overlap handling.
- **Daily agenda management** Managing time-based activities by day when a resource-based timeline would add unnecessary complexity.

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

## Code

### JS

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

$(function () {
  var calendar = $('#demo-vertical-resolution')
    .mobiscroll()
    .eventcalendar({
      clickToCreate: true,
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      eventDelete: true,
      view: {
        timeline: {
          type: 'month',
          resolutionHorizontal: 'hour',
          resolutionVertical: 'day',
        },
      },
    })
    .mobiscroll('getInst');

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

### HTML

```html
<div id="demo-vertical-resolution" class="md-vertical-timeline"></div>
```

### CSS

```css
.md-vertical-timeline .mbsc-timeline-row-gutter {
    height: 8px;
}
```

## Implementation notes

- Set `type: 'month'` to show a full calendar month in a single view.
- Set `resolutionVertical: 'day'` so each row on the vertical axis represents one day of the month.
- Set `resolutionHorizontal: 'hour'` so the horizontal axis shows hourly time columns across the full day.
- No resources are needed - the single vertical day axis is sufficient for a personal or single-room timetable.

## 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: [Multi-Classroom Timetable](https://demo.mobiscroll.com/jquery/timeline/multi-classroom-timetable.md) - Build a weekly classroom timetable with the JQuery Timeline — rooms and days listed vertically with hourly slots from 8 AM to 8 PM, Monday to Friday.
- Next: [Compare Resources Fixed at Top](https://demo.mobiscroll.com/jquery/timeline/compare-resources-fixed-at-top.md) - Use the JQuery Timeline to pin up to 3 resources to a fixed comparison section at the top — compare schedules side by side while the rest scroll below.