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

# Desktop Month View - JavaScript Event calendar demo

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. Plain JS api for usage everywhere.

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

## Description

Desktops or larger screens provide more space, which means you can use not just the horizontal but vertical space as well. Horizontally the calendar grows to fill the full width of the parent container while the height can be adjusted through the [`height`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-height) option.

The number of visible labels are determined by the available space and the ones that don't fit will be shown in a popover. To save vertical space you can [show all events in a popover](https://demo.mobiscroll.com/javascript/eventcalendar/event-popover).

**Interested to see how the event calendar looks on smaller screens?** [Check out the previous demo →](https://demo.mobiscroll.com/javascript/eventcalendar/mobile-month-view)

## What this demo shows

- A desktop month view event calendar is displayed with a full monthly grid and event labels inside the day cells.
- **Responsive layout** The month grid expands horizontally to fill the available width of the parent container as the screen size or browser width changes.
- **Event labels** Days with events display labels directly in the cell, with different label styles and colors to distinguish all-day, multi-day all-day, and timed events.
- **Overflow handling** The number of visible event labels depends on the available vertical space in the day cell. Additional events are moved into a popover and indicated by an `X more` label.
- **Popover events** Clicking the `X more` label opens a popover that shows the events that do not fit in the cell.
- **Event selection** Clicking an event label highlights it and shows a toast at the bottom center of the calendar with the event title.
- **Day hover and selection** Hovering over a day highlights the day number in the top-right corner with a gray background. Clicking an empty area in the cell (or an event) selects the day and changes that highlight to blue.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Header controls** The header shows the current month and year on the left, with blue previous and next arrows plus a `Today` button on the right.
- **Header navigation** Clicking the current month and year opens a popover with month selection and year selection views. The arrow buttons move the calendar backward or forward by month, and the `Today` button returns to the month that contains today's date.

## Best for

- **Desktop scheduling overviews** Showing a full month of events on larger screens where both horizontal and vertical space are available.
- **Event-heavy month grids** Displaying multiple events per day with label styles, colors, and overflow handling that keep the calendar readable.
- **Visual monthly planning** Giving users a quick overview of all-day, multi-day, and timed events in a single desktop calendar view.
- **Responsive embedded calendars** Adding a month view that naturally grows to fit the width of its parent container without custom resizing logic.

## 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
- [`labels`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-labels) - 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-desktop-month-view', {
  theme: 'ios',
  themeVariant: 'light',
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    calendar: { labels: true },
  },
  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-desktop-month-view"></div>
```

## Implementation notes

- Set `view: { calendar: { labels: true } }` to display a month grid with inline event labels in each day cell. When labels overflow the available cell height, the remainder appear in an `X more` popover 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

- Previous: [Mobile Month View](https://demo.mobiscroll.com/javascript/eventcalendar/mobile-month-view.md) - Javascript event calendar month view paired with a synchronized agenda — sticky day headers, tap-to-navigate, and mobile-first layout.
- Next: [Responsive Month View](https://demo.mobiscroll.com/javascript/eventcalendar/responsive-month-view.md) - Build a responsive Javascript event calendar — switch from week + agenda on mobile to a full month view on desktop using configurable breakpoints.