---
title: "React Event calendar Week and Month View Example | Mobiscroll"
component: "Event calendar"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/eventcalendar/month-week-view"
---
# Week and Month View - React Event calendar demo
Display events in a React calendar with switchable week and month views — choose 1, 2, or 3 weeks and set a locale-aware or fixed week start day. For React and Next.JS.
- [Live demo](https://demo.mobiscroll.com/react/eventcalendar/month-week-view)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/calendar-view/month-week-view)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/calendar-view/month-week-view)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/eventcalendar/month-week-view.md), [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/month-week-view.md), [Angular](https://demo.mobiscroll.com/angular/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/react/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/react/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)`
```jsx
```
With "Month view":
```jsx
```
With "One":
```jsx
```
With "Three":
```jsx
```
With "Sunday":
```jsx
```
With "Monday":
```jsx
```
## 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
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - 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
## Code
### JSX
```jsx
import { Eventcalendar, getJson, Page, setOptions } from '@mobiscroll/react';
import { useEffect, useMemo, useState } from 'react';
setOptions({
theme: 'ios',
themeVariant: 'light'
});
function App() {
const [myEvents, setEvents] = useState([]);
const oneWeekView = useMemo(() => ({ calendar: { type: 'week' } }), []);
const twoWeekView = useMemo(() => ({ calendar: { type: 'week', size: 2 } }), []);
const threeWeekView = useMemo(() => ({ calendar: { type: 'week', size: 3 } }), []);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
);
}
export default App;
```
### TSX
```tsx
import { Eventcalendar, getJson, MbscCalendarEvent, MbscEventcalendarView, Page, setOptions } from '@mobiscroll/react';
import { FC, useEffect, useMemo, useState } from 'react';
setOptions({
theme: 'ios',
themeVariant: 'light'
});
const App: FC = () => {
const [myEvents, setEvents] = useState([]);
const oneWeekView = useMemo(
() => ({
calendar: { type: 'week' },
}),
[],
);
const twoWeekView = useMemo(
() => ({
calendar: { type: 'week', size: 2 },
}),
[],
);
const threeWeekView = useMemo(
() => ({
calendar: { type: 'week', size: 3 },
}),
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
);
};
export default App;
```
## 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-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
- Next: [Quarter and Year View](https://demo.mobiscroll.com/react/eventcalendar/quarter-year-view.md) - Show three months or a full year in the React event calendar — switch between quarter and year views to give users a planning-scale event overview.