---
title: "Javascript Event calendar Mobile Month View Example | Mobiscroll"
component: "Event calendar"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/eventcalendar/mobile-month-view"
---

# Mobile Month View - JavaScript Event calendar demo

Javascript event calendar month view paired with a synchronized agenda — sticky day headers, tap-to-navigate, and mobile-first layout. Plain JS api for usage everywhere.

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

## Description

Use the event calendar for mobile, desktop and everything in-between. The content perfectly fills the parent container or the mobile screen in full width. You can choose to render an agenda below the calendar broken up into days ordered chronologically. All of this is configured in the [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) option.

You can use the calendar and agenda together or separately. For more ways to use the agenda [learn about how to configure it](https://demo.mobiscroll.com/javascript/agenda).

**Interested to see how the event calendar looks on largers screens with labels?** [Check out the next demo →](https://demo.mobiscroll.com/javascript/eventcalendar/desktop-month-view)

## What this demo shows

- Shows a mobile-friendly month calendar paired with an agenda list in a single view.
- **Month calendar** A full month calendar is displayed at the top of the view.
- **Event markers** Days that contain events show a small dot marker inside the day cell.
- **Agenda list** The area below the calendar lists events grouped by date.
- **Sticky day headers** As the agenda scrolls vertically, each day stays visible with a sticky date header while its events appear underneath.
- **Scroll synchronization** Scrolling the agenda updates the selected date in the month calendar so the two views stay in sync.
- **Date navigation** Selecting a day in the month calendar scrolls the agenda to that date and reveals its events.
- **Event interaction** Selecting an event in the agenda shows a toast message with the event title.

## Best for

- **Small screens** Mobile layouts where a full month overview and an event list need to fit in a compact space.
- **Small containers** Embedded calendar panels inside dashboards or other constrained layouts.
- **Browse-and-detail workflows** Interfaces where users need a quick month-level overview on top and a chronological event listing below.
- **Compact navigation** Scenarios where users should be able to jump to a date from the calendar and immediately see that day's events in the agenda.

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

## Code

### JS

```js
var inst = mobiscroll.eventcalendar('#demo-mobile-month-view', {
  theme: 'ios',
  themeVariant: 'light',
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    calendar: { type: 'month' },
    agenda: { type: 'month' },
  },
  onEventClick: function (args) {
    mobiscroll.toast({
      message: args.event.title,
    });
  },
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/events/?vers=5',
  function (events) {
    inst.setEvents(events);
  },
  'jsonp',
);
```

### HTML

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

## Implementation notes

- Set `view: { calendar: { type: 'month' }, agenda: { type: 'month' } }` to render a month grid on top and a scrollable agenda list below on the same `Eventcalendar` instance. The calendar selection and agenda scroll position stay synchronized automatically.
- Load events from a remote endpoint using `getJson` and assign them to `data`; for the imperative API, call `inst.setEvents(events)` in the callback.
- Handle `onEventClick` to show a `Toast` with `args.event.title`.

## 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: [Desktop Month View](https://demo.mobiscroll.com/javascript/eventcalendar/desktop-month-view.md) - Show a full-month Javascript event calendar for desktop — display event labels, show hidden events in an overflow popover, and expand the grid to fill the container.