---
title: "React Agenda Daily, Weekly, Monthly & Yearly Views Example | Mobiscroll"
component: "Agenda"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/agenda/daily-weekly-monthly-annual-agenda"
---
# Daily, Weekly, Monthly & Yearly Views - React Agenda demo
Build a React agenda list view that switches between daily, weekly, monthly, and yearly modes — display events for a single or multiple consecutive periods. For React and Next.JS.
- [Live demo](https://demo.mobiscroll.com/react/agenda/daily-weekly-monthly-annual-agenda)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/agenda/daily-weekly-monthly-annual-agenda)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/agenda/daily-weekly-monthly-annual-agenda)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/agenda/daily-weekly-monthly-annual-agenda.md), [jQuery](https://demo.mobiscroll.com/jquery/agenda/daily-weekly-monthly-annual-agenda.md), [Angular](https://demo.mobiscroll.com/angular/agenda/daily-weekly-monthly-annual-agenda.md), [Vue](https://demo.mobiscroll.com/vue/agenda/daily-weekly-monthly-annual-agenda.md)
## Description
Use the `agenda` object inside the [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) option to configure the agenda. `type` and `size` can be set as follows:
- **day** - `agenda: { type: 'day', size: 20 }` can be configured for a single day or a range of days
- **week** - `agenda: { type: 'week', size: 3 }` can be configured for a single or multiple weeks
- **month** - `agenda: { type: 'month' }` can be configured for one or more months
- **year** - `agenda: { type: 'year' }` can be configured for one or more years
**Interested in combining this with a calendar view?** [Check out the previous example →](https://demo.mobiscroll.com/react/agenda/daily-agenda-with-week-calendar)
## What this demo shows
- Shows an agenda view where events are listed below the header for the selected date range.
- **View controls:** A control panel on the left lets users switch the agenda type between daily, weekly, monthly, and yearly views.
- **Default view:** The daily agenda is selected by default.
- **Range size:** Users can choose whether to show a single day, week, month, or year, or enter a number to display multiple days, weeks, months, or years.
- **Agenda update:** Changing the agenda type or range size updates the visible agenda view.
- **Header navigation:** The month, selected date, and year label in the top-left header opens date navigation.
- **Date navigation:** The previous and next arrows move through the agenda range, while the Today button jumps back to the current date.
- **Agenda list:** The area below the header lists events for the selected range.
- **Events:** Events appear as agenda cards with a colored strip on the left and the event title beside it.
- **Timed events:** Start and end times are stacked on the right side of timed event cards.
- **Event interaction:** Hovering over an event highlights it.
- **Event selection:** Clicking an event selects and highlights it.
## Best for
- **Configurable agenda views:** Letting users switch between daily, weekly, monthly, and yearly event lists from the same interface.
- **Variable planning ranges:** Showing a single period or multiple consecutive days, weeks, months, or years based on user input.
- **Schedule review:** Browsing upcoming events in a compact list format instead of a calendar grid.
- **Longer-term overviews:** Reviewing events across larger ranges, such as multiple weeks, months, or a full year.
- **Agenda-focused interfaces:** Building event list views where date navigation and event scanning are more important than grid-based scheduling.
## Tutorial
### Daily agenda
- (x) One day
- ( ) Two days
`1` days
### Weekly agenda
- ( ) One week
- ( ) Two weeks
`1` weeks
### Monthly agenda
- ( ) One month
`1` months
### Yearly agenda
- ( ) One year
`1` years
```jsx
```
With "Two days":
```jsx
```
With "days":
```jsx
```
With "One week":
```jsx
```
With "Two weeks":
```jsx
```
With "weeks":
```jsx
```
With "One month":
```jsx
```
With "months":
```jsx
```
With "One year":
```jsx
```
With "years":
```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
## 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 dayView = useMemo(() => ({ agenda: { type: 'day' } }), []);
const weekView = useMemo(() => ({ agenda: { type: 'week' } }), []);
const monthView = useMemo(() => ({ agenda: { type: 'month' } }), []);
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 dayView = useMemo(() => ({ agenda: { type: 'day' } }), []);
const weekView = useMemo(() => ({ agenda: { type: 'week' } }), []);
const monthView = useMemo(() => ({ agenda: { type: 'month' } }), []);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
);
};
export default App;
```
## Implementation notes
- Render three Eventcalendar instances side by side inside a `Page` component using Mobiscroll's grid (`mbsc-grid` / `mbsc-row` / `mbsc-col`). Configure each with a different `view` type: `{ agenda: { type: 'day' } }`, `{ agenda: { type: 'week' } }`, and `{ agenda: { type: 'month' } }`.
- Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')` and pass the same array to all three instances. Angular: use `HttpClient.jsonp()`. For the imperative API, call `inst.setEvents(events)` on each instance 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: [Basic Usage](https://demo.mobiscroll.com/react/agenda/basic-usage.md) - Set up the React agenda view — display a monthly event list grouped by date with events loaded inline or from an external API.
- Next: [Show Empty Days](https://demo.mobiscroll.com/react/agenda/show-empty-days.md) - Display day headers for all dates in the React Agenda, including days without events — keep the full month visible in the agenda list.