---
title: "Javascript Calendar Week & Month Views Example | Mobiscroll"
component: "Calendar"
framework: "JavaScript"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/javascript/calendar/week-to-month"
---
# Week & Month Views - JavaScript Calendar demo
Show week and month calendar views in the Javascript date picker — add a header view switcher so users can toggle between layouts. Plain JavaScript API.
- [Live demo](https://demo.mobiscroll.com/javascript/calendar/week-to-month)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/calendar/week-to-month)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/calendar/week-to-month.md), [Angular](https://demo.mobiscroll.com/angular/calendar/week-to-month.md), [React](https://demo.mobiscroll.com/react/calendar/week-to-month.md), [Vue](https://demo.mobiscroll.com/vue/calendar/week-to-month.md)
## Description
If you want to enable switching between week & month view, you can do it by adding a segmented control to the header and dynamically change the [`calendarType`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-calendarType) option. If you are not looking for dynamic switching you can configure a [week calendar](https://demo.mobiscroll.com/javascript/calendar/week-view) or a [month calendar](https://demo.mobiscroll.com/javascript/calendar/multiple-months).
## What this demo shows
- A date picker calendar with a view switcher for changing between week and month views.
- **Header and segmented control** A centered segmented control provides icon-based week and month options. It sits between the month and year quick navigation label on the left and the previous and next navigation arrows on the right.
- **Week view** The week view is selected by default and displays the current week below the header.
- **Month view** Selecting the month option displays a full month. A fixed weekday header shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. Selecting a day highlights its number with a blue background. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates the calendar to the corresponding month.
## Best for
- **Appointment booking** Let users focus on dates in the current week or switch to a month view to compare availability across a longer period.
- **Travel and accommodation date selection** Support quick near-term date choices while allowing users to scan dates across the full month.
- **Delivery and service scheduling** Help users choose an upcoming day in week view or review a broader set of available dates in month view.
- **Responsive date selection** Provide both a compact weekly layout and a broader monthly overview from the same calendar header.
## Tutorial
```js
var myCalendar = mobiscroll.datepicker('#custom-header', {
controls: ['calendar'],
calendarType: 'week',
calendarSize: 1,
renderCalendarHeader: function () {
return '
' +
'' +
''
);
},
});
document.querySelectorAll('.view-change').forEach(function (elm) {
elm.addEventListener('change', function (ev) {
switch (ev.target.value) {
case 'week':
myCalendar.setOptions({
calendarType: 'week',
});
break;
case 'month':
myCalendar.setOptions({
calendarType: 'month',
});
break;
}
});
});
```
### HTML
```html
```
### CSS
```css
.custom-view .mbsc-segmented .mbsc-icon {
font-size: 20px;
}
```
## Implementation notes
- Use `controls: ['calendar']`, `display: 'inline'`, `calendarType: 'week'`, and `calendarSize: 1` as the starting (week) view.
- Pass `renderCalendarHeader` (Angular: `calendarHeaderTemplate`, Vue: `#header` slot) returning custom markup with `mbsc-calendar-nav` and `mbsc-calendar-prev`/`mbsc-calendar-next`.
- `calendarType` can be switched at runtime via `setOptions({ calendarType: 'week' | 'month' })` to switch between the compact weekly layout and the full month grid - `calendarSize` stays as configured and only applies while in `'week'` type.
## 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: [Quarter and Year View](https://demo.mobiscroll.com/javascript/calendar/quarter-year-view.md) - A Javascript date picker with switchable quarter and year views — select dates across a 3-month grid or all 12 months at once.
- Next: [Colored Dots, Highlights & Labels](https://demo.mobiscroll.com/javascript/calendar/dots-colors-labels.md) - Mark calendar dates with colored dots, background highlights, or text labels — for specific dates, date ranges, or recurring rules.