---
title: "React Calendar Week & Month Views Example | Mobiscroll"
component: "Calendar"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/calendar/week-to-month"
---

# Week & Month Views - React Calendar demo

Show week and month calendar view in a React date picker — add a header view switcher so users can toggle between layouts. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/calendar/week-to-month)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/datepicker/calendar/week-to-month)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/datepicker/calendar/week-to-month)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/calendar/week-to-month.md), [jQuery](https://demo.mobiscroll.com/jquery/calendar/week-to-month.md), [Angular](https://demo.mobiscroll.com/angular/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/react/datepicker/api#opt-calendarType) option. If you are not looking for dynamic switching you can configure a [week calendar](https://demo.mobiscroll.com/react/calendar/week-view) or a [month calendar](https://demo.mobiscroll.com/react/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

```jsx
const [calendarType, setCalendarType] = React.useState('week');
const calendarHeader = () => {
    return <React.Fragment>
        <CalendarNav className="custom-view-nav" />
        <div className="custom-view">
            <SegmentedGroup value={view} onChange={changeView}>
                <SegmentedItem value="week" icon="material-date-range" />
                <SegmentedItem value="month" icon="material-event-note" />
            </SegmentedGroup>             
        </div>
        <CalendarPrev />
        <CalendarNext />
    </React.Fragment>;
}
const changeView = (event) => {
    setCalendarType(event.target.value);
}
<Datepicker
    controls={['calendar']}
    calendarType={calendarType}
    calendarSize={1}
    renderCalendarHeader={calendarHeader}
/>
```

```css
.custom-view {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 1 0 auto;
    -moz-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;                 

    .mbsc-segmented {
        margin: 0;
    }

    .mbsc-segmented.mbsc-material,
    .mbsc-segmented.mbsc-windows {
        padding: 0 2px;
    }

    .mbsc-segmented .mbsc-segmented-button {
        padding: 0 1px;
    }

    .mbsc-segmented .mbsc-icon {
        font-size: 20px;
    }

    .mbsc-segmented-button.mbsc-windows {
        border: 0;
    }
}

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

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/datepicker/api#opt-themeVariant) - option
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option
- [`calendarType`](https://mobiscroll.com/docs/react/datepicker/api#opt-calendarType) - option
- [`calendarSize`](https://mobiscroll.com/docs/react/datepicker/api#opt-calendarSize) - option
- [`renderCalendarHeader`](https://mobiscroll.com/docs/react/datepicker/api#renderer-renderCalendarHeader) - renderer

## Code

### JSX

```jsx
import {
  CalendarNav,
  CalendarNext,
  CalendarPrev,
  Datepicker,
  Segmented,
  SegmentedGroup,
  setOptions,
} from '@mobiscroll/react';
import { useCallback, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const [calendarType, setCalendarType] = useState('week');

  const handleChange = useCallback((event) => {
    setCalendarType(event.target.value);
  }, []);

  const calendarHeaderSwitch = useCallback(
    () => (
      <>
        <CalendarNav className="custom-view-nav" />
        <div className="custom-view">
          <SegmentedGroup value={calendarType} onChange={handleChange}>
            <Segmented value="week" icon="material-date-range" />
            <Segmented value="month" icon="material-event-note" />
          </SegmentedGroup>
        </div>
        <CalendarPrev />
        <CalendarNext />
      </>
    ),
    [calendarType, handleChange],
  );

  return (
    <div>
      <Datepicker display="inline" calendarType={calendarType} calendarSize={1} renderCalendarHeader={calendarHeaderSwitch} />
    </div>
  );
}

export default App;
```

### TSX

```tsx
import {
  CalendarNav,
  CalendarNext,
  CalendarPrev,
  Datepicker,
  Segmented,
  SegmentedGroup,
  setOptions,
} from '@mobiscroll/react';
import { ChangeEvent, FC, useCallback, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => {
  const [calendarType, setCalendarType] = useState<'week' | 'month' | 'year' | undefined>('week');
  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setCalendarType(event.target.value as 'week' | 'month' | 'year' | undefined);
  }, []);

  const calendarHeaderSwitch = useCallback(
    () => (
      <>
        <CalendarNav className="custom-view-nav" />
        <div className="custom-view">
          <SegmentedGroup value={calendarType} onChange={handleChange}>
            <Segmented value="week" icon="material-date-range" />
            <Segmented value="month" icon="material-event-note" />
          </SegmentedGroup>
        </div>
        <CalendarPrev />
        <CalendarNext />
      </>
    ),
    [calendarType, handleChange],
  );

  return (
    <div>
      <Datepicker display="inline" calendarType={calendarType} calendarSize={1} renderCalendarHeader={calendarHeaderSwitch} />
    </div>
  );
};

export default App;
```

### 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-react.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 react
   ```

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 react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Quarter and Year View](https://demo.mobiscroll.com/react/calendar/quarter-year-view.md) - A React 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/react/calendar/dots-colors-labels.md) - Mark calendar dates with colored dots, background highlights, or text labels — for specific dates, date ranges, or recurring rules.