---
title: "jQuery Agenda — Event List & Appointment Scheduling Component | Mobiscroll"
component: "Agenda"
framework: "jQuery"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/jquery/agenda"
---

# jQuery Calendar Agenda and Event List Component

Add a configurable event list to jQuery apps — daily, weekly, monthly, and yearly agenda views with calendar integration and templating. Last update: Oct 30, 2026

Add a day-by-day event list to an existing jQuery application. Display appointments, sessions or scheduled tasks, combine the list with a calendar and customize how each event is presented.

Initialize the Agenda through Mobiscroll's jQuery API without replacing your existing page structure.

## 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 and configure the jQuery package in your project. It sets up the private npm registry and installs Mobiscroll.

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

Add a `<div id="agenda"></div>` to your page. For a bundled project, register the component and initialize it on a jQuery selection:

```javascript
import $ from 'jquery';
import { Eventcalendar, registerComponent } from '@mobiscroll/jquery';
import '@mobiscroll/jquery/dist/css/mobiscroll.jquery.min.css';

registerComponent(Eventcalendar);

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) }
];

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

For an existing HTML page, you can load jQuery and the downloaded Mobiscroll package instead of using a bundler. See the [jQuery installation guide](https://mobiscroll.com/docs/jquery/getting-started/installation) and [Agenda documentation](https://mobiscroll.com/docs/jquery/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/jquery/agenda/daily-agenda-with-week-calendar), [resource filtering](https://demo.mobiscroll.com/jquery/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/jquery/agenda/recurring-events), [custom event content](https://demo.mobiscroll.com/jquery/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/jquery/agenda/daily-weekly-monthly-annual-agenda), [custom event ordering](https://demo.mobiscroll.com/jquery/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/jquery/agenda/full-event-customization), [event search](https://demo.mobiscroll.com/jquery/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/jquery/agenda/daily-weekly-monthly-annual-agenda), [empty days](https://demo.mobiscroll.com/jquery/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/jquery/agenda/daily-agenda-with-week-calendar), [external calendar navigation](https://demo.mobiscroll.com/jquery/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/jquery/agenda/event-content-customization), [day headers](https://demo.mobiscroll.com/jquery/agenda/customizing-day-header), [empty states](https://demo.mobiscroll.com/jquery/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/jquery/agenda/searching-events-in-popup), [event sort](https://demo.mobiscroll.com/jquery/agenda/custom-event-sort), [resource filter](https://demo.mobiscroll.com/jquery/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/jquery/agenda/recurring-events), [event data structure](https://mobiscroll.com/docs/jquery/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/jquery/agenda/load-inline-data), [remote events](https://demo.mobiscroll.com/jquery/agenda/load-events-from-remote-api), [on-demand loading](https://demo.mobiscroll.com/jquery/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/jquery/agenda/event-bulk-actions-edit-delete-update), [event editing API](https://mobiscroll.com/docs/jquery/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/jquery/agenda/setting-the-timezone), [localization](https://demo.mobiscroll.com/jquery/agenda/localization), [themes](https://demo.mobiscroll.com/jquery/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/jquery/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/jquery/eventcalendar/accessibility) and [WCAG support and limitations](https://mobiscroll.com/docs/jquery/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/jquery/agenda/printing-the-view), [printing documentation](https://mobiscroll.com/docs/jquery/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 jQuery, keep the generated code in the `.mobiscroll().eventcalendar()` pattern and use the existing page's controls. Example request: "Add a jQuery agenda with daily appointments, calendar navigation and an event-search action. Use Mobiscroll's current jQuery API and show where my data endpoint connects."

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

## Agenda demos

Browse jQuery Agenda examples for date selection, event-list templates, search and data loading. Each demo provides a practical starting point for an existing jQuery application.

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

### Setting up the agenda

- [Week Calendar Date Navigation](https://demo.mobiscroll.com/jquery/agenda/daily-agenda-with-week-calendar.md) - Configure the jQuery 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/jquery/agenda/basic-usage.md) - Set up the jQuery 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/jquery/agenda/daily-weekly-monthly-annual-agenda.md) - Build a jQuery 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/jquery/agenda/show-empty-days.md) - Display day headers for all dates in the jQuery Agenda, including days without events — keep the full month visible in the agenda list.
- [Printing the View](https://demo.mobiscroll.com/jquery/agenda/printing-the-view.md) - Print only the agenda — not the full page — using the jQuery print add-on or with PDF export via the browser print dialog.

### Displaying events

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

### Templating

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

### Resources

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

### Event data structure

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

### Loading events & data sources

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

### CRUD operations

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

jQuery 1.7 and newer ([jQuery installation](https://mobiscroll.com/docs/jquery/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/jquery/guides/ai-integration) to help your coding assistant adapt an example with current APIs.

## Built for jQuery

Every Mobiscroll component is available the jQuery way, initialized on a jQuery selection.

- **Supported versions:** jQuery 1.7 or newer.
- **Installation:** CLI/npm in bundled apps, or a downloaded package in a page that already uses jQuery.
- **TypeScript:** bundled definitions ([TypeScript guide](https://mobiscroll.com/docs/jquery/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.
- [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.