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

# Week and Month View - JavaScript Event calendar demo

Display events in a Javascript calendar with switchable week and month views — choose 1, 2, or 3 weeks and set a locale-aware or fixed week start day. Plain JS api for usage everywhere.

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

## Description

The calendar view supports variable weeks. Save space by only displaying one or two weeks or go for a full month where it makes sense. Use the `type` and `size` properties of the [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) option to set the size of the month or week view.

You can also set the first day of the week using the [`firstDay`](https://mobiscroll.com/docs/javascript/datepicker/api#localization-firstDay) option, where Sunday is 0, Monday is 1, etc.

## What this demo shows

- This demo shows an Event Calendar that can switch between a full month view and variable week views.
- **Calendar layout** In week mode, the calendar can display one, two, or three weeks at a time. In month mode, it shows the full month grid.
- **Event labels** Days with events display labels inside the day cell. Label styling changes based on the event type, including all-day, multi-day, and timed events. Event labels use different colors to distinguish between 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 where `X` represents the number of events inside the popover.
- **Popover interaction** Clicking the `X more` indicator opens a popover that lists the hidden events for that day.
- **Event selection** Hovering over or selecting an event label highlights that event.
- **Cell hover and selection** Hovering over a day cell highlights the day number in the top-right corner with a gray background. Clicking the empty area of a day cell selects that day and highlights the day number with a blue background.
- **Navigation** The calendar can be navigated by clicking and dragging 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.
- **View configuration panel** A side panel lets the user switch between `Month view` and `Week view`. In week view, a segmented control lets the user choose `One`, `Two`, or `Three` weeks.
- **Week start panel** A second side panel lets the user set the first day of the week to `Auto (set by locale)`, `Sunday`, or `Monday`.

## Best for

- **Space-sensitive calendar layouts** Interfaces that need to show one, two, or three weeks instead of a full month to save space.
- **Switchable overview depth** Experiences where users need to move between a compact weekly overview and a full month view.
- **Locale-aware calendars** Setups where the first day of the week should follow locale defaults or be switched explicitly to Sunday or Monday.
- **Event-dense month and week grids** Calendars that need to show event labels in day cells while still handling overflow through a more popup.

## Tutorial

### Configure month or week view

- ( ) Month view
- (x) Week view One Two Three weeks
- Set the first day of week to `Auto (set by locale)`

```js
mobiscroll.eventcalendar('#calendar', {
    view: {
        calendar:
            {
                labels: true,
                type: 'week',
                size: 2
            }
        }
});
```

With "Month view":

```js
mobiscroll.eventcalendar('#calendar', {
    view: {
        calendar:
            {
                labels: true,
                type: 'month'
            }
        }
});
```

With "One":

```js
mobiscroll.eventcalendar('#calendar', {
    view: {
        calendar:
            {
                labels: true,
                type: 'week',
                size: 1
            }
        }
});
```

With "Three":

```js
mobiscroll.eventcalendar('#calendar', {
    view: {
        calendar:
            {
                labels: true,
                type: 'week',
                size: 3
            }
        }
});
```

With "Sunday":

```js
mobiscroll.eventcalendar('#calendar', {
    firstDay: 0,
    view: {
        calendar:
            {
                labels: true,
                type: 'week',
                size: 2
            }
        }
});
```

With "Monday":

```js
mobiscroll.eventcalendar('#calendar', {
    firstDay: 1,
    view: {
        calendar:
            {
                labels: true,
                type: 'week',
                size: 2
            }
        }
});
```

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

## Code

### JS

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

var one;
var two;
var three;

one = mobiscroll.eventcalendar('#demo-one-week-view', {
  view: {
    calendar: { type: 'week' },
  },
});

two = mobiscroll.eventcalendar('#demo-two-week-view', {
  view: {
    calendar: { type: 'week', size: 2 },
  },
});

three = mobiscroll.eventcalendar('#demo-three-week-view', {
  view: {
    calendar: { type: 'week', size: 3 },
  },
});

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

### HTML

```html
<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">One week view</div>
                <div id="demo-one-week-view"></div>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Two week view</div>
                <div id="demo-two-week-view"></div>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Three week view</div>
                <div id="demo-three-week-view"></div>
            </div>
        </div>
    </div>
</div>
```

## Implementation notes

- Render three separate `Eventcalendar` instances side by side. Use `type: 'week'` in each `calendar` config, varying `size` to display 1, 2, or 3 weeks: `{ calendar: { type: 'week' } }`, `{ calendar: { type: 'week', size: 2 } }`, `{ calendar: { type: 'week', size: 3 } }`.
- Load events from a remote endpoint using `getJson` and pass the same `data` array to all three instances; for the imperative API, call `inst.setEvents(events)` in the callback.

## 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: [Quarter and Year View](https://demo.mobiscroll.com/javascript/eventcalendar/quarter-year-view.md) - Show three months or a full year in the Javascript event calendar — switch between quarter and year views to give users a planning-scale event overview.