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

# Switch Day, Week and Month Views - JavaScript Event calendar demo

Switch a Javascript event calendar between day, week, and month views using a header segmented control — each view paired with a matching agenda list. Plain JS api for usage everywhere.

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

## Description

Dynamically switch views within one calendar instance. Use a UI control to let users do the switching or do it programmatically. This example features a segmented component inside the header, but the live option changes can be invoked from anywhere.

Switch between a month view with a monthly agenda, a week view with a weekly agenda and daily event list.

Use the [`setOptions`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setOptions) method to dynamically update any option.

**Interested in the agenda?** [How to render an agenda instead of a calendar →](https://demo.mobiscroll.com/javascript/agenda/daily-weekly-monthly-annual-agenda)

## What this demo shows

- This demo switches an event calendar instance between month, week, and day layouts from a segmented control in the header.
- **Header control** The center area of the header contains a segmented control for switching between month, week, and day views represented with icons.
- **Calendar header** The top-left side shows the current month and year or the current date in case of day view, while the top-right side includes blue previous and next navigation arrows.
- **Month view** The default layout shows a mobile month calendar at the top and a monthly agenda below it.
- **Month view** Dates that have events are marked with a small dot in the day cell.
- **Monthly agenda** Under the month view, events are grouped by date in a monthy agenda vertical list, with sticky date headers as the user scrolls.
- **Month and agenda sync** Scrolling the agenda updates the selected date in the month calendar so it stays aligned with the visible event group.
- **Date selection** Clicking a date in the month calendar navigates the agenda to that date and reveals its events.
- **Week view** Switching to week view shows a week calendar at the top and a weekly agenda below it.
- **Day view** Switching to day view shows a daily agenda event list for the selected date.
- **Month and week navigation** The month and week view can be changed by clicking and dragging the calendar left or right.
- **Day cell states** Hovering a day cell highlights the day number with a gray background, while clicking the cell selects the day and highlights the day number with a blue background.

## Best for

- **Multi-level schedule browsing** Apps where users need to move between month overview, week planning, and day-level details without leaving the same screen.
- **Mobile scheduling flows** Touch-friendly experiences where a header control is a simple way to switch between calendar scopes.
- **Operational planning** Use cases where users need both a quick overview of upcoming activity and a detailed list of events for the selected date.

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

## Code

### JS

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

var calendar = mobiscroll.eventcalendar('#demo-day-week-month', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    calendar: { type: 'month' },
    agenda: { type: 'month' },
  },
  renderHeader: function () {
    return (
      '<div mbsc-calendar-nav class="cal-header-nav"></div>' +
      '<div class="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-center">' +
      '<label><input data-icon="material-event-note" mbsc-segmented type="radio" name="view" value="month" class="md-view-change" checked></label>' +
      '<label><input data-icon="material-date-range" mbsc-segmented type="radio" name="view" value="week" class="md-view-change"></label>' +
      '<label><input data-icon="material-view-day" mbsc-segmented type="radio" name="view" value="day" class="md-view-change"></label>' +
      '</div>' +
      '<div mbsc-calendar-prev class="cal-header-prev"></div>' +
      '<div mbsc-calendar-next class="cal-header-next"></div>'
    );
  },
});

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

document.querySelectorAll('.md-view-change').forEach(function (elm) {
  elm.addEventListener('change', function (ev) {
    switch (ev.target.value) {
      case 'month':
        calendar.setOptions({
          view: {
            calendar: { type: 'month' },
            agenda: { type: 'month' },
          },
        });
        break;
      case 'week':
        calendar.setOptions({
          view: {
            calendar: { type: 'week' },
            agenda: { type: 'week' },
          },
        });
        break;
      case 'day':
        calendar.setOptions({
          view: {
            agenda: { type: 'day' },
          },
        });
        break;
    }
  });
});
```

### HTML

```html
<div class="md-switching-view-cont">
    <div id="demo-day-week-month"></div>
</div>
```

### CSS

```css
.md-switching-view-cont {
    height: 100%;
}

.md-switching-view-cont .mbsc-segmented {
    margin: 0;
}

.md-switching-view-cont .mbsc-segmented.mbsc-material,
.md-switching-view-cont .mbsc-segmented.mbsc-windows {
    padding: 0;
}

.md-switching-view-cont .mbsc-segmented .mbsc-segmented-button {
    padding: 0 1px;
}

.md-switching-view-cont .mbsc-segmented .mbsc-icon {
    font-size: 20px;
}

.md-switching-view-cont .mbsc-segmented-button.mbsc-windows {
    border: 0;
}

.cal-header-picker {
    -webkit-flex: 1 0 auto;
    -moz-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.cal-header-nav {
    width: 165px;
}

.cal-header-nav .mbsc-calendar-title.mbsc-material {
    font-size: 16px;
}
```

## Implementation notes

- Define three view configs controlled by a state variable:
  - Month: `{ calendar: { type: 'month' }, agenda: { type: 'month' } }`
  - Week: `{ calendar: { type: 'week' }, agenda: { type: 'week' } }`
  - Day: `{ agenda: { type: 'day' } }`
- Use `renderHeader` (Angular: `headerTemplate`, Vue: `#header` slot) to build a custom header: `CalendarNav` on the left, an icon-only `SegmentedGroup` in the center with three `Segmented` items (`material-event-note` for month, `material-date-range` for week, `material-view-day` for day), and `CalendarPrev` and `CalendarNext` on the right.
- When the segmented selection changes, update the active view config. JS/jQuery: call `inst.setOptions({ view: ... })` instead of binding a reactive prop.
- Load events from a remote endpoint using `getJson` and assign them to `data`; 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

- Previous: [Colored Cell Backgrounds](https://demo.mobiscroll.com/javascript/eventcalendar/colored-cell-background.md) - Color day-cell backgrounds in a Javascript event calendar — mark exact or recuring dates or date ranges as visual highlights for holidays and special days.
- Next: [External Date Picker Navigation](https://demo.mobiscroll.com/javascript/eventcalendar/navigate-from-external-date-picker.md) - Use a Javascript event calendar with an external date picker in two-pane layout — date selection navigates the calendar and keeps both in sync.