---
title: "Angular Agenda Week Calendar Date Navigation Example | Mobiscroll"
component: "Agenda"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/agenda/daily-agenda-with-week-calendar"
---

# Week Calendar Date Navigation - Angular Agenda demo

Configure the Angular Agenda standalone or paired with a week calendar — list events day by day and let users navigate dates from the week strip above. For Angular 22 and Ionic 8.

- [Live demo](https://demo.mobiscroll.com/angular/agenda/daily-agenda-with-week-calendar)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/agenda/daily-agenda-with-week-calendar)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/agenda/daily-agenda-with-week-calendar.md), [jQuery](https://demo.mobiscroll.com/jquery/agenda/daily-agenda-with-week-calendar.md), [React](https://demo.mobiscroll.com/react/agenda/daily-agenda-with-week-calendar.md), [Vue](https://demo.mobiscroll.com/vue/agenda/daily-agenda-with-week-calendar.md)

## Description

With the agenda you can list out events for any range grouped by days. Use it as a stand alone UI component or combine it with a [calendar week view](https://demo.mobiscroll.com/angular/calendar/week-view) to make navigation easier.

You can add the components - like the calendar and agenda - and configure them in the [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) option.

**Interested to learn about the calendar view?** [Check out the event calendar →](https://demo.mobiscroll.com/angular/eventcalendar)

## What this demo shows

- Shows a mobile-friendly week calendar paired with a daily agenda list in a single view.
- **Header navigation** The month and year label in the top left opens date navigation. The previous and next arrows and the Today button on the right move between weeks and jump back to the current date.
- **Week view** A week calendar is displayed at the top of the view.
- **Week navigation** The week strip can be changed by clicking and dragging left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default.
- **Event markers** Days with events show a small dot marker inside the day cell.
- **Agenda list** The area below the calendar lists events for the selected day.
- **Date selection** Selecting a day in the week calendar updates the agenda to show events for that date.
- **Events** Events are displayed as agenda cards with a colored strip on the left, the event title next to it, and the start and end time stacked on the right.
- **Event interaction** Hovering an event highlights it.
- **Event selection** Clicking an event selects and highlights it, then shows a toast message with the event title.

## Best for

- **Mobile agendas** Combining compact week navigation with a focused list of events for the selected day.
- **Daily schedules** Showing appointments, tasks, shifts, or bookings one day at a time while keeping nearby dates visible.
- **Personal planning** Letting users move quickly between days and review the events scheduled for each date.
- **Field or service teams** Supporting mobile-friendly daily schedules where users need fast access to the current week and selected day.
- **Booking and appointment apps** Displaying a selected day's events below a week calendar without switching to a separate screen.
- **Lightweight planning views** Giving users a simple week-at-a-glance control with a detailed agenda below it.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option
- [`onEventClick`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventClick) - event

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import {
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscEventClickEvent,
  MbscModule,
  Notifications,
  setOptions,
} from '@mobiscroll/angular';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent implements OnInit {
  constructor(
    private http: HttpClient,
    private notify: Notifications,
  ) {}

  myEvents: MbscCalendarEvent[] = [];

  myView: MbscEventcalendarView = {
    calendar: { type: 'week' },
    agenda: { type: 'day' },
  };

  onEventClick(args: MbscEventClickEvent): void {
    this.notify.toast({
      message: args.event.title,
    });
  }

  ngOnInit(): void {
    this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/events/?vers=5', 'callback').subscribe((resp) => {
      this.myEvents = resp;
    });
  }
}
```

### Template

```html
<mbsc-eventcalendar [data]="myEvents" [view]="myView" (onEventClick)="onEventClick($event)"></mbsc-eventcalendar>
```

## Implementation notes

- Use `view: { calendar: { type: 'week' }, agenda: { type: 'day' } }` - the week calendar grid and the daily agenda list are rendered together as a single component; clicking a day in the calendar scrolls the agenda to that day.
- Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()` instead. JS/jQuery: call `inst.setEvents(events)` in the callback.
- On `onEventClick`: show a Mobiscroll `Toast` with `args.event.title`.

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

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

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

## Related demos

- Next: [Basic Usage](https://demo.mobiscroll.com/angular/agenda/basic-usage.md) - Set up a Angular agenda view — display a monthly event list grouped by date with events loaded from an external API.