---
title: "Javascript Timeline Month View Example | Mobiscroll"
component: "Timeline"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/timeline/calendar-timeline"
---

# Month View - JavaScript Timeline demo

Show all resources in a monthly Javascript timeline — resources as rows, days as columns, with configurable time slot granularity. Plain JS api for usage everywhere.

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

## Description

Get an overview across all resources over a full month. Easily zoom in by controlling the `timeCellSteps` and `timeLabelSteps` as seen in [this example](https://demo.mobiscroll.com/javascript/timeline/daily-weekly-monthly-yearly-timeline). By default the `timeline: { type: 'month' }` as configured under the [`view` option](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) renders with daily horizontal resolution.

## What this demo shows

- A desktop monthly timeline layout with days arranged horizontally and resources arranged vertically on the left.
- **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.
- **Day headers** Displays day numbers with abbreviated weekday names for each timeline column.
- **Resources** Shows multiple resources vertically on the left side of the timeline, from Resource A through Resource O, as individual rows.
- **Event cards** Renders events as colored cards with a colored stripe on the left, the exact start and end time above the title, and the event title shown in bold.
- **Date positioning** Positions events according to both their assigned resource and exact date and time range.
- **Event interaction** Highlights events on hover and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Selects and highlights an event when it is clicked.
- **Event creation** Creates a new event by double-clicking the timeline or by clicking and dragging on it.
- **Vertical scrolling** Supports a scrollable resource area so many resources can be displayed in one timeline.
- **Horizontal scrolling** Supports horizontal timeline scrolling for navigating a larger date range.

## Best for

- **Monthly resource overview** Visualizing resource availability across an extended date range.
- **Resource planning** Comparing scheduled work across many resources in a single timeline.
- **Mixed event durations** Displaying single-day, multi-day, and longer events together in the same timeline.
- **Dense resource layouts** Working with many resource rows while keeping the timeline readable through scrolling.
- **Interactive scheduling** Creating, selecting, moving, and resizing events directly on the timeline.

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

## Code

### JS

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

mobiscroll.eventcalendar('#demo-month-view', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    timeline: {
      type: 'month',
    },
  },
  data: [
    {
      start: '2026-10-02T00:00',
      end: '2026-10-05T00:00',
      title: 'Event 1',
      resource: 1,
    },
    {
      start: '2026-10-10T09:00',
      end: '2026-10-15T15:00',
      title: 'Event 2',
      resource: 3,
    },
    {
      start: '2026-10-12T00:00',
      end: '2026-10-14T00:00',
      title: 'Event 3',
      resource: 4,
    },
    {
      start: '2026-10-15T07:00',
      end: '2026-10-20T12:00',
      title: 'Event 4',
      resource: 5,
    },
    {
      start: '2026-10-03T00:00',
      end: '2026-10-10T00:00',
      title: 'Event 5',
      resource: 6,
    },
    {
      start: '2026-10-10T08:00',
      end: '2026-10-11T20:00',
      title: 'Event 6',
      resource: 7,
    },
    {
      start: '2026-10-22T00:00',
      end: '2026-10-28T00:00',
      title: 'Event 7',
      resource: 7,
    },
    {
      start: '2026-10-08T00:00',
      end: '2026-10-13T00:00',
      title: 'Event 8',
      resource: 15,
    },
    {
      start: '2026-10-25T00:00',
      end: '2026-10-27T00:00',
      title: 'Event 9',
      resource: 10,
    },
    {
      start: '2026-10-20T00:00',
      end: '2026-10-23T00:00',
      title: 'Event 10',
      resource: 12,
    },
  ],

  resources: [
    {
      id: 1,
      name: 'Resource A',
      color: '#e20000',
    },
    {
      id: 2,
      name: 'Resource B',
      color: '#76e083',
    },
    {
      id: 3,
      name: 'Resource C',
      color: '#4981d6',
    },
    {
      id: 4,
      name: 'Resource D',
      color: '#e25dd2',
    },
    {
      id: 5,
      name: 'Resource E',
      color: '#1dab2f',
    },
    {
      id: 6,
      name: 'Resource F',
      color: '#d6d145',
    },
    {
      id: 7,
      name: 'Resource G',
      color: '#34c8e0',
    },
    {
      id: 8,
      name: 'Resource H',
      color: '#9dde46',
    },
    {
      id: 9,
      name: 'Resource I',
      color: '#166f6f',
    },
    {
      id: 10,
      name: 'Resource J',
      color: '#f7961e',
    },
    {
      id: 11,
      name: 'Resource K',
      color: '#34c8e0',
    },
    {
      id: 12,
      name: 'Resource L',
      color: '#af0000',
    },
    {
      id: 13,
      name: 'Resource M',
      color: '#446f1c',
    },
    {
      id: 14,
      name: 'Resource N',
      color: '#073138',
    },
    {
      id: 15,
      name: 'Resource O',
      color: '#4caf00',
    },
  ],
});
```

### HTML

```html
<div id="demo-month-view"></div>
```

## Implementation notes

- Use `timeline: { type: 'month' }` under the `view` option to render a horizontal timeline with one column per day spanning the full current month. This is the default resolution for a monthly timeline - no `timeCellSteps` or `timeLabelSteps` adjustment is needed for a daily-column view.
- Define a `resources` array where each entry has an `id`, a `name`, and a `color`. The color is applied to all events on that resource row by default.
- Assign each event a `resource` field matching a resource `id`, plus `start`, `end`, and `title`. Use relative date offsets from the current month (e.g. the 2nd, the 10th-15th) so events remain visible regardless of when the demo is opened.
- No custom renderers, interactions, or remote data loading are required - the default timeline layout handles the resource column, event blocks, and navigation controls.

## 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: [Time Grid and Timeline Layout](https://demo.mobiscroll.com/javascript/timeline/timeline-time-grid.md) - Switch between a vertical time grid and a horizontal resource timeline in a Javascript scheduler — set responsive to show each layout by screen size.