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

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

Switch a React event calendar between day, week, and month views using a header segmented control — each view paired with a matching agenda list. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/eventcalendar/switching-day-week-month-view)
- [Preview in full screen](https://demo.mobiscroll.com/fullscreen/eventcalendar/switching-day-week-month-view)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/calendar-view/switching-day-week-month-view)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/calendar-view/switching-day-week-month-view)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/eventcalendar/switching-day-week-month-view.md), [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), [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.

Thanks to property binding and all option changes are live and propagate accordingly.

**Interested in the agenda?** [How to render an agenda instead of a calendar →](https://demo.mobiscroll.com/react/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/react/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-eventDelete) - option
- [`renderHeader`](https://mobiscroll.com/docs/react/eventcalendar/api#renderer-renderHeader) - renderer
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option

## Code

### JSX

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

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

function App() {
  const [view, setView] = useState('month');
  const [myEvents, setEvents] = useState([]);
  const [calView, setCalView] = useState({
    calendar: { type: 'month' },
    agenda: { type: 'month' },
  });

  const changeView = useCallback((event) => {
    let view;
    switch (event.target.value) {
      case 'month':
        view = {
          calendar: { type: 'month' },
          agenda: { type: 'month' },
        };
        break;
      case 'week':
        view = {
          calendar: { type: 'week' },
          agenda: { type: 'week' },
        };
        break;
      case 'day':
        view = {
          agenda: { type: 'day' },
        };
        break;
    }

    setView(event.target.value);
    setCalView(view);
  }, []);

  const customWithNavButtons = useCallback(
    () => (
      <>
        <CalendarNav className="cal-header-nav" />
        <div className="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-center">
          <SegmentedGroup value={view} onChange={changeView}>
            <Segmented value="month" icon="material-event-note" />
            <Segmented value="week" icon="material-date-range" />
            <Segmented value="day" icon="material-view-day" />
          </SegmentedGroup>
        </div>
        <CalendarPrev className="cal-header-prev" />
        <CalendarNext className="cal-header-next" />
      </>
    ),
    [changeView, view],
  );

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <div className="md-switching-view-cont">
      <Eventcalendar
        clickToCreate={true}
        dragToCreate={true}
        dragToMove={true}
        dragToResize={true}
        eventDelete={true}
        renderHeader={customWithNavButtons}
        view={calView}
        data={myEvents}
      />
    </div>
  );
}

export default App;
```

### TSX

```tsx
import {
  CalendarNav,
  CalendarNext,
  CalendarPrev,
  Eventcalendar,
  getJson,
  MbscCalendarEvent,
  MbscEventcalendarView,
  Segmented,
  SegmentedGroup,
  setOptions,
} from '@mobiscroll/react';
import { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';

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

const App: FC = () => {
  const [view, setView] = useState('month');
  const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);

  const [calView, setCalView] = useState<MbscEventcalendarView>({
    calendar: { type: 'month' },
    agenda: { type: 'month' },
  });

  const changeView = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    let view = {};
    switch (event.target.value) {
      case 'month':
        view = {
          calendar: { type: 'month' },
          agenda: { type: 'month' },
        };
        break;
      case 'week':
        view = {
          calendar: { type: 'week' },
          agenda: { type: 'week' },
        };
        break;
      case 'day':
        view = {
          agenda: { type: 'day' },
        };
        break;
    }

    setView(event.target.value);
    setCalView(view);
  }, []);

  const customWithNavButtons = useCallback(
    () => (
      <>
        <CalendarNav className="cal-header-nav" />
        <div className="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-center">
          <SegmentedGroup value={view} onChange={changeView}>
            <Segmented value="month" icon="material-event-note" />
            <Segmented value="week" icon="material-date-range" />
            <Segmented value="day" icon="material-view-day" />
          </SegmentedGroup>
        </div>
        <CalendarPrev className="cal-header-prev" />
        <CalendarNext className="cal-header-next" />
      </>
    ),
    [changeView, view],
  );

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events: MbscCalendarEvent[]) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <div className="md-switching-view-cont">
      <Eventcalendar
        clickToCreate={true}
        dragToCreate={true}
        dragToMove={true}
        dragToResize={true}
        eventDelete={true}
        renderHeader={customWithNavButtons}
        view={calView}
        data={myEvents}
      />
    </div>
  );
};
export default App;
```

### 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-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: [Colored Cell Backgrounds](https://demo.mobiscroll.com/react/eventcalendar/colored-cell-background.md) - Color day-cell backgrounds in a React 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/react/eventcalendar/navigate-from-external-date-picker.md) - Use a React event calendar with an external date picker in two-pane layout — date selection navigates the calendar and keeps both in sync.