---
title: "Vue Agenda Component — Event List View for Web Apps | Mobiscroll"
component: "Agenda"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/agenda"
---

# Vue Event Calendar with Agenda List View

Show events as a configurable daily, monthly, or yearly list — combine with a calendar and customize templates. For Vue and Nuxt. Last update: Oct 30, 2026

Create a day-by-day list of appointments, activities and scheduled events in Vue 3. Pair the agenda with week-calendar navigation and customize event rows around your data and user interactions.

Use native Vue 3 components, bindings and reactive application data.

## Overview

Mobiscroll Agenda is the chronological event-list view of the Event Calendar component. Instead of positioning events on a calendar grid or a resource timeline, it lists events under their dates for an understandable daily, weekly, monthly or yearly overview. Use it alone or combine it with a calendar for date navigation. Mobiscroll supplies the configurable display and interaction tools; your application supplies the events and workflow.

## Agenda highlights

### Day-by-day lists for any planning range

Show scheduled events grouped by date, from an individual day to several days, weeks, months or years. Choose whether days without events appear in the list.

### A calendar and event list together

Pair the Agenda with a week or month calendar so users can pick a date and immediately see the events that matter. Build a focused event-list experience for smaller screens.

### Event details shaped by your application

Customize event rows, day headers, tooltips and empty states. Add relevant information such as the service, location, status or assignee instead of relying on a fixed event-list format.

### AI-ready developer tooling

Use the Mobiscroll MCP server, coding-agent skills and AI-readable documentation to help AI assistants generate framework-specific Agenda configuration and event-list code.

## Getting started

Install Mobiscroll, then select the Agenda view of the Event Calendar component. The starter example combines a weekly calendar with a daily event list. Select a day to see its scheduled items; open any Agenda demo later on this page to start from a different working example.

Install the Mobiscroll CLI once, then configure the Vue package in your project. The CLI sets up the private npm registry and installs Mobiscroll.

```bash
npm install -g @mobiscroll/cli
mobiscroll config vue
```

Use the native Vue 3 component and pass the calendar, agenda and event data as props:

```html
<script setup>
import { MbscEventcalendar } from '@mobiscroll/vue';
import '@mobiscroll/vue/dist/css/mobiscroll.min.css';

const today = new Date();
const at = (hour, offset = 0) => new Date(
  today.getFullYear(), today.getMonth(), today.getDate() + offset, hour
);

const view = { calendar: { type: 'week' }, agenda: { type: 'day' } };
const events = [
  { id: 1, title: 'Morning appointments', start: at(9), end: at(10) },
  { id: 2, title: 'Team review', start: at(11), end: at(12) },
  { id: 3, title: 'Training session', start: at(14, 1), end: at(16, 1) }
];
</script>

<template>
  <MbscEventcalendar :view="view" :selectedDate="today" :data="events" />
</template>
```

Use Vue reactivity and Mobiscroll event callbacks when the displayed list should respond to application updates. See the [Vue installation guide](https://mobiscroll.com/docs/vue/getting-started/installation) and [Agenda documentation](https://mobiscroll.com/docs/vue/eventcalendar/agenda).

The starter example is a compact calendar-and-list pattern. For a standalone event list, event search or custom event template, open the relevant Agenda demo and start with its working code.

## What you can build with the Agenda

A calendar agenda works when users need to answer "what's happening next?" rather than compare events in a time grid. Use the Event Calendar's Agenda view as a flexible event-list building block and add the information, filters and actions your product requires.

### Appointment booking & availability

Show upcoming appointments grouped by day, with appointment time, provider and service information in customized event rows. Combine a week calendar with the list for quick date selection, or filter the list for a particular provider ([daily agenda with week calendar](https://demo.mobiscroll.com/vue/agenda/daily-agenda-with-week-calendar), [resource filtering](https://demo.mobiscroll.com/vue/agenda/resource-filtering-in-header)).

### Class, lesson & event scheduling

Build class schedules, event programs and training-session lists that visitors can browse by day. Show recurring sessions and use custom event content for speakers, instructors, venues or registration details ([recurring events](https://demo.mobiscroll.com/vue/agenda/recurring-events), [custom event content](https://demo.mobiscroll.com/vue/agenda/event-content-customization)).

### Workforce & shift planning

Give team members a date-ordered list of upcoming shifts, assignments and handovers, including details that matter to a particular role. Use the Agenda for a readable individual schedule, and the Scheduler or Timeline view when a planner needs a resource-by-time comparison ([agenda date ranges](https://demo.mobiscroll.com/vue/agenda/daily-weekly-monthly-annual-agenda), [custom event ordering](https://demo.mobiscroll.com/vue/agenda/custom-event-sort)).

### Job scheduling & dispatch

Present a technician's or field team's daily visits and work orders as a chronological list. Display location, status or job details in each event, support event search and use your own application actions to open or update a work order ([custom work-item rows](https://demo.mobiscroll.com/vue/agenda/full-event-customization), [event search](https://demo.mobiscroll.com/vue/agenda/searching-events-in-popup)).

## Agenda capabilities

Mobiscroll Agenda turns event data into a date-grouped list with configurable ranges, rendering and navigation. Combine these capabilities with your existing data and app screens; use the other Event Calendar views when users need the spatial perspective of a calendar grid, vertical scheduler or horizontal resource timeline.

### Daily, weekly, monthly and yearly event lists

List events for a day, week, month or year, and extend the period to several units of the same type. Choose whether to show headings for days with no events ([configurable agenda ranges](https://demo.mobiscroll.com/vue/agenda/daily-weekly-monthly-annual-agenda), [empty days](https://demo.mobiscroll.com/vue/agenda/show-empty-days)).

### Combine a calendar with the agenda

Place the agenda beneath a week calendar to show events for the selected date, or connect it to an external calendar for navigation. This gives users both date context and a focused event list ([combined calendar and agenda](https://demo.mobiscroll.com/vue/agenda/daily-agenda-with-week-calendar), [external calendar navigation](https://demo.mobiscroll.com/vue/agenda/navigate-from-external-calendar)).

### Customize events and day headers

Change the information and layout of event rows, day headings and header controls. Add custom event tooltips or a tailored empty state without replacing the Agenda view itself ([event templates](https://demo.mobiscroll.com/vue/agenda/event-content-customization), [day headers](https://demo.mobiscroll.com/vue/agenda/customizing-day-header), [empty states](https://demo.mobiscroll.com/vue/agenda/empty-state)).

### Find, filter and order events

Create event-search interactions, control the order of entries and filter a schedule by resource. These patterns help users find a specific meeting, session or assignment without examining a crowded month grid ([event search](https://demo.mobiscroll.com/vue/agenda/searching-events-in-popup), [event sort](https://demo.mobiscroll.com/vue/agenda/custom-event-sort), [resource filter](https://demo.mobiscroll.com/vue/agenda/resource-filtering-in-header)).

### Recurring, all-day and multi-day events

Display repeated sessions, events that last all day and activities that span multiple dates. Recurrence is part of the shared Event Calendar event model, so the same event data can power other views ([recurring events](https://demo.mobiscroll.com/vue/agenda/recurring-events), [event data structure](https://mobiscroll.com/docs/vue/eventcalendar/data-binding)).

### Connect your own API and load events on demand

Provide inline events, fetch entries from a remote endpoint or request records when the visible date range changes. Use Event Calendar lifecycle callbacks to keep the list aligned with your application's data ([inline events](https://demo.mobiscroll.com/vue/agenda/load-inline-data), [remote events](https://demo.mobiscroll.com/vue/agenda/load-events-from-remote-api), [on-demand loading](https://demo.mobiscroll.com/vue/agenda/load-events-on-demand)).

### Event selection and bulk actions

Build selection and bulk-action experiences for lists of events. Use callbacks to open details or connect actions to the editing and permission rules in your application ([multiple selection and bulk actions](https://demo.mobiscroll.com/vue/agenda/event-bulk-actions-edit-delete-update), [event editing API](https://mobiscroll.com/docs/vue/eventcalendar/crud)).

### Time zones, localization and themes

Show localized date and time formats, translate UI labels and adapt the display for users in different time zones. Apply the iOS, Material or Windows themes in light or dark variations ([time-zone display](https://demo.mobiscroll.com/vue/agenda/setting-the-timezone), [localization](https://demo.mobiscroll.com/vue/agenda/localization), [themes](https://demo.mobiscroll.com/vue/agenda/themes-ios-material-windows)).

### Responsive layouts for mobile and desktop

Use a compact standalone event list on a narrow screen and combine it with a calendar on larger screens. The view can respond to component width, helping you tailor the experience to the available space ([Agenda responsive options](https://mobiscroll.com/docs/vue/eventcalendar/agenda)).

### Accessibility and keyboard support

Mobiscroll provides documented keyboard and screen-reader behavior using WAI-ARIA. It is largely aligned with WCAG 2.2 A and AA, but complete AA compliance is not claimed; review the [Event Calendar accessibility details](https://mobiscroll.com/docs/vue/eventcalendar/accessibility) and [WCAG support and limitations](https://mobiscroll.com/docs/vue/core-concepts/accessibility) for your application.

### Printing an agenda

Print the current agenda with the optional print module where your license includes it. Keep the printable view aligned with the events shown to the user ([print an agenda](https://demo.mobiscroll.com/vue/agenda/printing-the-view), [printing documentation](https://mobiscroll.com/docs/vue/eventcalendar/print)).

## AI Tooling

Mobiscroll provides AI Tooling for development teams using coding assistants. The MCP server supplies version-aware API context, while agent skills and AI-readable documentation help assistants use the correct Event Calendar view settings, event model and callbacks. For Agenda, this means generating an event list and its application interactions without confusing it with a date picker or a resource time grid.

For Vue 3, use `MbscEventcalendar` with Vue props, reactivity and event handlers. Example request: "Create a Vue 3 agenda that lists work orders by date, filters them by technician and loads events from my API. Follow the current Mobiscroll Vue Agenda documentation."

Set up your assistant using the [AI Tooling guide](https://mobiscroll.com/docs/vue/guides/ai-integration). Use the MCP server, supported agent skills and AI-readable [Agenda documentation](https://mobiscroll.com/docs/vue/eventcalendar/agenda) for framework-specific API context, then test the resulting code and application rules.

## Agenda demos

Explore Vue Agenda examples for date-based lists, event templates, filtering and remote data. Start from a working Vue 3 demo and connect it to your reactive data and application actions.

Start with [calendar and agenda navigation](https://demo.mobiscroll.com/vue/agenda/daily-agenda-with-week-calendar), [custom event content](https://demo.mobiscroll.com/vue/agenda/event-content-customization) or [on-demand event loading](https://demo.mobiscroll.com/vue/agenda/load-events-on-demand).

### Setting up the agenda

- [Week Calendar Date Navigation](https://demo.mobiscroll.com/vue/agenda/daily-agenda-with-week-calendar.md) - Configure the Vue Agenda standalone or paired with a week calendar — list events day by day and let users navigate dates from the week strip above.
- [Basic Usage](https://demo.mobiscroll.com/vue/agenda/basic-usage.md) - Set up the Vue agenda view — display a monthly event list grouped by date with events loaded inline or from an external API.
- [Daily, Weekly, Monthly & Yearly Views](https://demo.mobiscroll.com/vue/agenda/daily-weekly-monthly-annual-agenda.md) - Build a Vue agenda list view that switches between daily, weekly, monthly, and yearly modes — display events for a single or multiple consecutive periods.
- [Show Empty Days](https://demo.mobiscroll.com/vue/agenda/show-empty-days.md) - Display day headers for all dates in the Vue Agenda, including days without events — keep the full month visible in the agenda list.
- [Printing the View](https://demo.mobiscroll.com/vue/agenda/printing-the-view.md) - Print only the agenda — not the full page — using the Vue print add-on or with PDF export via the browser print dialog.

### Displaying events

- [Custom Event Sort](https://demo.mobiscroll.com/vue/agenda/custom-event-sort.md) - Control the display order of events in a Vue agenda view — set per-event priority or use a custom sort function.
- [Multi-Timezone Display](https://demo.mobiscroll.com/vue/agenda/setting-the-timezone.md) - Show Vue Agenda events in any timezone — set data and display timezones, then let users switch with a timezone picker.
- [Event Search](https://demo.mobiscroll.com/vue/agenda/searching-events-in-popup.md) - Add real-time event search to the Vue calendar header — type to filter events and show matching results in a popup agenda list.
- [External Date Navigation](https://demo.mobiscroll.com/vue/agenda/navigate-from-external-calendar.md) - Use a two-pane layout with a date picker and the Vue agenda view — selecting a date in the picker navigates the agenda.

### Templating

- [Custom Event Content](https://demo.mobiscroll.com/vue/agenda/event-content-customization.md) - Add custom fields, descriptions, participants, and action buttons to Vue agenda items — the agenda renders time and color automatically.
- [Full Event Customization](https://demo.mobiscroll.com/vue/agenda/full-event-customization.md) - Fully customize Vue agenda event card layout — show images, location, participants, and custom fields in each event row.
- [Custom Header](https://demo.mobiscroll.com/vue/agenda/customizing-calendar-header.md) - Build a custom header for the Vue event calendar agenda — assemble navigation controls, add a segmented view switcher or any custom action.
- [Customizable Day Headers](https://demo.mobiscroll.com/vue/agenda/customizing-day-header.md) - Build customizable Vue agenda day headers — add per-day action buttons, including headers for days without events or any custom actions.
- [Custom Event Tooltip](https://demo.mobiscroll.com/vue/agenda/custom-event-tooltip.md) - Add hover tooltips to Vue agenda events showing appointment details and inline actions — choose native, custom popup, or third-party tooltip.
- [Empty State](https://demo.mobiscroll.com/vue/agenda/empty-state.md) - Add a custom empty-state template to the Vue agenda view — display a message, illustration, or action when no events are scheduled.

### Resources

- [Resource Filter in Header](https://demo.mobiscroll.com/vue/agenda/resource-filtering-in-header.md) - Embed a segmented resource filter in the Vue Agenda custom header — filter displayed events by person or team.

### Event data structure

- [Event Data Structure](https://demo.mobiscroll.com/vue/agenda/event-data-structure.md) - Define event objects for the Vue Agenda — specify start, end, recurrence, resource, color, and extend events with custom fields.
- [Supported Date Formats](https://demo.mobiscroll.com/vue/agenda/date-object-ISO-8601-moment.md) - Use JS Date objects, ISO 8601 strings, or Moment.js values in the Vue Agenda — pass them to event data, markers, colors, and labels.
- [Recurring Events](https://demo.mobiscroll.com/vue/agenda/recurring-events.md) - Configure daily, weekly, monthly, and yearly recurring events in the Vue Agenda — exclude dates and set stop conditions.

### Loading events & data sources

- [Inline Event Data](https://demo.mobiscroll.com/vue/agenda/load-inline-data.md) - Populate the Vue agenda view with events from a local array — the simplest way to add events before switching to remote or on-demand loading.
- [Remote API Events](https://demo.mobiscroll.com/vue/agenda/load-events-from-remote-api.md) - Load events into a Vue agenda view from a remote API — fetch your event data and pass it as an array to display a date-grouped event list.
- [Load Events on Demand](https://demo.mobiscroll.com/vue/agenda/load-events-on-demand.md) - Load Vue agenda events on demand as users navigate — loading events from a remote API for real-time data and efficient performance.

### Third party calendar integrations

- [Google Calendar Sync](https://demo.mobiscroll.com/vue/agenda/sync-events-google-calendar.md) - Load and sync Google Calendar events in a Vue agenda view — authenticate users, toggle calendars on/off, and create events using the plugin.
- [Outlook Calendar Sync](https://demo.mobiscroll.com/vue/agenda/sync-events-outlook-calendar.md) - Use the Vue event calendar integration plugin to authenticate users, load their Outlook calendars, and display events in an agenda view.
- [Load Public Google Calendar Events](https://demo.mobiscroll.com/vue/agenda/load-events-from-google-calendar.md) - Show public Google Calendar events in the Vue agenda view via the integration plugin — supply a Calendar ID and API key to connect.

### CRUD operations

- [Bulk Actions](https://demo.mobiscroll.com/vue/agenda/event-bulk-actions-edit-delete-update.md) - Select multiple events in the Vue agenda view with keyboard shortcuts or programmatically — bulk delete or update, or right-click for per-event edits.

### Customizing the look & feel

- [Theme Customization](https://demo.mobiscroll.com/vue/agenda/themes-ios-material-windows.md) - Style the Vue agenda with iOS, Material, or Windows base themes, light or dark variants, and custom CSS or the theme builder to match your brand.

### Localization & tapping into the lifecycle

- [Event Hooks](https://demo.mobiscroll.com/vue/agenda/event-hooks.md) - Handle agenda lifecycle events in the Vue event calendar — see which hooks fire on event click, init, and date change via a live event log.
- [Multi-Calendar Support](https://demo.mobiscroll.com/vue/agenda/gregorian-jalali-hijri.md) - Display events in a Vue agenda view with Gregorian, Jalali, and Hijri calendar system support — configure the calendar system per user locale.
- [Localization](https://demo.mobiscroll.com/vue/agenda/localization.md) - Switch the Vue agenda between 37 languages — localize date and time formats, button labels, RTL layout, and override any setting manually.

## Your data and external calendars

Mobiscroll Agenda displays the events supplied by your application. Combine it with your own event API or use it alongside the other Event Calendar views.

**Need to display your users' external calendars?** [Mobiscroll Connect](https://mobiscroll.com/connect) provides a separate connectivity layer for Google Calendar, Outlook, Apple Calendar and CalDAV, including account connection, normalized calendar data and synchronization. **Mobiscroll Connect is sold separately** and is not required to use the Agenda.

## Frequently asked questions

### What is a calendar agenda or event list component?

A calendar agenda is a list of scheduled events arranged chronologically under their dates. Mobiscroll Agenda is the event-list view of the Event Calendar component; it can display an individual day or longer periods and can be combined with calendar navigation.

### What is the difference between Agenda and Event Calendar?

Agenda is the date-ordered **list view**, while the Event Calendar's Calendar view places dates in a week or month grid and can show event labels or a day popover. They are views of the same Event Calendar component, so they can use the same underlying events ([Agenda view](https://mobiscroll.com/docs/vue/eventcalendar/agenda), [Calendar view](https://mobiscroll.com/docs/vue/eventcalendar/calendar)).

### Can I combine an agenda list with a calendar?

Yes. A weekly calendar can control a daily agenda in the same instance, allowing the user to select a day and see its events below ([combined week calendar and agenda](https://demo.mobiscroll.com/vue/agenda/daily-agenda-with-week-calendar)).

### Can the agenda show events for several weeks or months?

Yes. Configure `view.agenda.type` and `size` for a day, week, month or year and multiple periods where applicable ([agenda range options](https://demo.mobiscroll.com/vue/agenda/daily-weekly-monthly-annual-agenda)).

### Can I customize the information in each agenda event?

Yes. Mobiscroll provides event and header rendering options, and the demo library includes custom rows, day headers and tooltips ([full event customization](https://demo.mobiscroll.com/vue/agenda/full-event-customization)).

### Can I filter or search an agenda by resource?

Yes. Resource filtering and event search are demonstrated patterns that you can connect to your application's data and controls ([resource filtering](https://demo.mobiscroll.com/vue/agenda/resource-filtering-in-header), [event search](https://demo.mobiscroll.com/vue/agenda/searching-events-in-popup)).

### Does the Agenda include a backend or booking engine?

No. It displays events and supports configurable UI interactions. Your application supplies the event records, storage and any authoritative rules for bookings, permissions or concurrent updates.

### Can I load agenda events from my API?

Yes. Pass event records into the component or load them on demand as users navigate dates ([load events on demand](https://demo.mobiscroll.com/vue/agenda/load-events-on-demand)).

### Is the Agenda responsive and accessible?

Yes, the display supports responsive configuration and Mobiscroll documents keyboard and screen-reader support. The components are largely aligned with WCAG 2.2 A and AA, but full AA compliance is not claimed; see [accessibility documentation](https://mobiscroll.com/docs/vue/core-concepts/accessibility).

### Is Mobiscroll Agenda free or open source?

No. Mobiscroll Agenda is part of a commercially licensed UI product, with a free trial available for evaluation. See [Mobiscroll pricing](https://mobiscroll.com/pricing).

### Can I install it from the public npm registry?

No. The framework packages are distributed through Mobiscroll's private npm registry. Install the public Mobiscroll CLI and run `mobiscroll config` with your framework, or use a downloaded package where supported.

### Can AI coding assistants work with the Agenda?

Yes. The [AI Tooling guide](https://mobiscroll.com/docs/vue/guides/ai-integration) explains the MCP server, agent skills and AI-readable documentation available to coding assistants. Verify generated code and application behavior before shipping.

### Do I need Mobiscroll Connect to build an agenda?

No. Agenda works with your application's own event data. Mobiscroll Connect is an optional, separately sold product for integrating external calendar accounts.

### Can I use the Agenda in a SaaS application?

Yes. Mobiscroll offers Calendaring for SaaS licensing for products delivered to multiple customers, distinct from internal-project licenses (see [license options](https://mobiscroll.com/pricing)).

### Which Vue versions are supported?

Vue 3 and newer ([Vue installation](https://mobiscroll.com/docs/vue/getting-started/installation)).

## Licensing

Agenda is a view of Mobiscroll UI's Event Calendar component. Choose an internal-project license for software used within your organization, or Calendaring for SaaS for software delivered to multiple customers. The optional print module depends on the license. [Compare Mobiscroll UI licenses](https://mobiscroll.com/pricing).

## Ready to build your calendar agenda?

Start with a working Agenda example, install Mobiscroll for your framework and customize the event list to match your users' workflow. Explore the full demo catalog or use the [AI Tooling guide](https://mobiscroll.com/docs/vue/guides/ai-integration) to help your coding assistant adapt an example with current APIs.

## Built for Vue

Native Vue 3 components, not wrappers, that use Vue's rendering and reactivity model.

- **Supported versions:** Vue 3 or newer.
- **Ecosystem:** [Ionic guide](https://mobiscroll.com/docs/vue/getting-started/with-ionic).
- **TypeScript:** bundled definitions ([TypeScript guide](https://mobiscroll.com/docs/vue/guides/typescript)).

## Agenda for other frameworks

- [JavaScript Agenda](https://demo.mobiscroll.com/agenda.md) - A standalone JavaScript library with no framework dependency, for bundled apps and plain web pages.
- [jQuery Agenda](https://demo.mobiscroll.com/jquery/agenda.md) - Every Mobiscroll component is available the jQuery way, initialized on a jQuery selection.
- [Angular Agenda](https://demo.mobiscroll.com/angular/agenda.md) - Native Angular components, not wrappers, that use Angular's own rendering and change detection.
- [React Agenda](https://demo.mobiscroll.com/react/agenda.md) - Native React components, not wrappers, built on React's virtual DOM and state management.