---
title: "JavaScript Agenda — Event List Component | Mobiscroll"
component: "Agenda"
framework: "JavaScript"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/agenda"
---

# JavaScript Calendar Agenda and Event List Component

Add a scrollable event list to any JavaScript web app — daily, monthly, and yearly agenda views with optional week calendar pairing. Plain JavaScript API. Last update: Oct 30, 2026

Build a chronological event list for appointments, classes, shifts and other scheduled activities. Display events by day across a selected week, month or longer period, with customizable event details and calendar navigation.

Add an Agenda to a plain JavaScript web page or a bundled application, without a frontend framework.

## 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 JavaScript package in your project. The CLI configures Mobiscroll's private npm registry and installs the package.

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

Add a `<div id="agenda"></div>` to your HTML. With a bundler, initialize the component and import its stylesheet:

```javascript
import { eventcalendar } from '@mobiscroll/javascript';
import '@mobiscroll/javascript/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 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) }
];

eventcalendar('#agenda', {
  view: { calendar: { type: 'week' }, agenda: { type: 'day' } },
  selectedDate: today,
  data: events
});
```

A plain HTML page can use a downloaded Mobiscroll JavaScript and CSS package and `mobiscroll.eventcalendar()` instead; neither a CLI nor a bundler is needed for that path. See the [JavaScript installation guide](https://mobiscroll.com/docs/javascript/getting-started/installation) and [Agenda documentation](https://mobiscroll.com/docs/javascript/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/agenda/daily-agenda-with-week-calendar), [resource filtering](https://demo.mobiscroll.com/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/agenda/recurring-events), [custom event content](https://demo.mobiscroll.com/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/agenda/daily-weekly-monthly-annual-agenda), [custom event ordering](https://demo.mobiscroll.com/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/agenda/full-event-customization), [event search](https://demo.mobiscroll.com/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/agenda/daily-weekly-monthly-annual-agenda), [empty days](https://demo.mobiscroll.com/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/agenda/daily-agenda-with-week-calendar), [external calendar navigation](https://demo.mobiscroll.com/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/agenda/event-content-customization), [day headers](https://demo.mobiscroll.com/agenda/customizing-day-header), [empty states](https://demo.mobiscroll.com/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/agenda/searching-events-in-popup), [event sort](https://demo.mobiscroll.com/agenda/custom-event-sort), [resource filter](https://demo.mobiscroll.com/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/agenda/recurring-events), [event data structure](https://mobiscroll.com/docs/javascript/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/agenda/load-inline-data), [remote events](https://demo.mobiscroll.com/agenda/load-events-from-remote-api), [on-demand loading](https://demo.mobiscroll.com/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/agenda/event-bulk-actions-edit-delete-update), [event editing API](https://mobiscroll.com/docs/javascript/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/agenda/setting-the-timezone), [localization](https://demo.mobiscroll.com/agenda/localization), [themes](https://demo.mobiscroll.com/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/javascript/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/javascript/eventcalendar/accessibility) and [WCAG support and limitations](https://mobiscroll.com/docs/javascript/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/agenda/printing-the-view), [printing documentation](https://mobiscroll.com/docs/javascript/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 JavaScript, ask the assistant for `view.agenda` or a combined `view.calendar` and `view.agenda` setup using the JavaScript ESM initializer or `mobiscroll.eventcalendar()`. Example request: "Create a JavaScript daily agenda under a weekly calendar, load events from my API and render service and location details in each event. Use the current Mobiscroll Agenda API."

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

## Agenda demos

Explore working JavaScript Agenda examples for event lists, date navigation, templates, filtering and remote data. Open any demo to inspect its code and adapt it for a plain JavaScript or bundled application.

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

### Setting up the agenda

- [Week Calendar Date Navigation](https://demo.mobiscroll.com/agenda/daily-agenda-with-week-calendar.md) - Configure the JavaScript 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/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.
- [Daily, Weekly, Monthly & Yearly Views](https://demo.mobiscroll.com/agenda/daily-weekly-monthly-annual-agenda.md) - Build a JavaScript 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/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.
- [Printing the View](https://demo.mobiscroll.com/agenda/printing-the-view.md) - Print only the agenda — not the full page — using the JavaScript print add-on or with PDF export via the browser print dialog.

### Displaying events

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

### Templating

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

### Resources

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

### Event data structure

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

### Loading events & data sources

- [Inline Event Data](https://demo.mobiscroll.com/agenda/load-inline-data.md) - Populate the JavaScript 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/agenda/load-events-from-remote-api.md) - Load events into a JavaScript 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/agenda/load-events-on-demand.md) - Load JavaScript 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/agenda/sync-events-google-calendar.md) - Load and sync Google Calendar events in a JavaScript agenda view — authenticate users, toggle calendars on/off, and create events using the plugin.
- [Outlook Calendar Sync](https://demo.mobiscroll.com/agenda/sync-events-outlook-calendar.md) - Use the JavaScript 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/agenda/load-events-from-google-calendar.md) - Show public Google Calendar events in the JavaScript agenda view via the integration plugin — supply a Calendar ID and API key to connect.

### CRUD operations

- [Bulk Actions](https://demo.mobiscroll.com/agenda/event-bulk-actions-edit-delete-update.md) - Select multiple events in the JavaScript 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/agenda/themes-ios-material-windows.md) - Style the JavaScript 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/agenda/event-hooks.md) - Handle agenda lifecycle events in the JavaScript 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/agenda/gregorian-jalali-hijri.md) - Display events in a JavaScript agenda view with Gregorian, Jalali, and Hijri calendar system support — configure the calendar system per user locale.
- [Localization](https://demo.mobiscroll.com/agenda/localization.md) - Switch the JavaScript 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/javascript/eventcalendar/agenda), [Calendar view](https://mobiscroll.com/docs/javascript/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/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/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/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/agenda/resource-filtering-in-header), [event search](https://demo.mobiscroll.com/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/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/javascript/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/javascript/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)).

### Can I use Agenda without a framework or build tool?

Yes. Include a downloaded Mobiscroll JavaScript package and stylesheet on a plain HTML page, then initialize `mobiscroll.eventcalendar()` with an Agenda view ([JavaScript installation](https://mobiscroll.com/docs/javascript/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/javascript/guides/ai-integration) to help your coding assistant adapt an example with current APIs.

## Built for JavaScript

A standalone JavaScript library with no framework dependency, for bundled apps and plain web pages.

- **Installation:** install with the CLI for bundled projects, or include the downloaded JS and CSS package on a plain web page.
- **ESM support:** an ESM bundle is available ([ESM bundle guide](https://mobiscroll.com/docs/javascript/core-concepts/esm-bundle)).
- **TypeScript:** definitions ship with the package ([TypeScript guide](https://mobiscroll.com/docs/javascript/guides/typescript)).

## Using a framework?

- [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.
- [Vue Agenda](https://demo.mobiscroll.com/vue/agenda.md) - Native Vue 3 components, not wrappers, that use Vue's rendering and reactivity model.