---
title: "Agenda Daily, Weekly, Monthly & Yearly Views Example | Mobiscroll"
component: "Agenda"
framework: "JavaScript"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/agenda/daily-weekly-monthly-annual-agenda"
---

# Daily, Weekly, Monthly & Yearly Views - JavaScript Agenda demo

Build a JavaScript agenda list view that switches between daily, weekly, monthly, and yearly modes — display events for a single or multiple consecutive periods.

- [Live demo](https://demo.mobiscroll.com/agenda/daily-weekly-monthly-annual-agenda)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/agenda/daily-weekly-monthly-annual-agenda)
- This demo in other frameworks: [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), [React](https://demo.mobiscroll.com/react/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/javascript/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/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

```js
view: {
    agenda: { type: 'day' }
}
```

With "Two days":

```js
view: {
    agenda: { type: 'day', size: 2 }
}
```

With "days":

```js
view: {
    agenda: { type: 'day', size: 1 }
}
```

With "One week":

```js
view: {
    agenda: { type: 'week' }
}
```

With "Two weeks":

```js
view: {
    agenda: { type: 'week', size: 2 }
}
```

With "weeks":

```js
view: {
    agenda: { type: 'week', size: 1 }
}
```

With "One month":

```js
view: {
    agenda: { type: 'month' }
}
```

With "months":

```js
view: {
    agenda: { type: 'month', size: 1 }
}
```

With "One year":

```js
view: {
    agenda: { type: 'year' }
}
```

With "years":

```js
view: {
    agenda: { type: 'year', size: 1 }
}
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

var daily = mobiscroll.eventcalendar('#demo-agenda-daily', {
  view: {
    agenda: { type: 'day' },
  },
});

var weekly = mobiscroll.eventcalendar('#demo-agenda-weekly', {
  view: {
    agenda: { type: 'week' },
  },
});

var monthly = mobiscroll.eventcalendar('#demo-agenda-monthly', {
  view: {
    agenda: { type: 'month' },
  },
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/events-new/?vers=5',
  function (events) {
    daily.setEvents(events);
    weekly.setEvents(events);
    monthly.setEvents(events);
  },
  'jsonp',
);
```

### HTML

```html
<div mbsc-page>
  <div class="mbsc-grid">
    <div class="mbsc-row">
      <div class="mbsc-col-sm-12 mbsc-col-md-4">
        <div class="mbsc-form-group">
          <div class="mbsc-form-group-title">Daily agenda</div>
          <div id="demo-agenda-daily"></div>
        </div>
      </div>
      <div class="mbsc-col-sm-12 mbsc-col-md-4">
        <div class="mbsc-form-group">
          <div class="mbsc-form-group-title">Weekly agenda</div>
          <div id="demo-agenda-weekly"></div>
        </div>
      </div>
      <div class="mbsc-col-sm-12 mbsc-col-md-4">
        <div class="mbsc-form-group">
          <div class="mbsc-form-group-title">Monthly agenda</div>
          <div id="demo-agenda-monthly"></div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## 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-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: [Basic Usage](https://demo.mobiscroll.com/agenda/basic-usage.md) - Set up the JavaScript 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/agenda/show-empty-days.md) - Display day headers for all dates in the JavaScript Agenda, including days without events — keep the full month visible in the agenda list.