jQuery Agenda
Updated on 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.
Loading the live demo...
Initialize the Agenda through Mobiscroll's jQuery API without replacing your existing page structure.
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.
Available for
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.
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.
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.
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.
Install the Mobiscroll CLI once and configure the jQuery package in your project. It sets up the private npm registry and installs Mobiscroll.
npm install -g @mobiscroll/cli
mobiscroll config jqueryAdd a <div id="agenda"></div> to your page. For a bundled project, register the component and initialize it on a jQuery selection:
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 and Agenda documentation.
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.
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.
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.
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, empty days).
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, external calendar navigation).
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, day headers, empty states).
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, event sort, resource filter).
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, event data structure).
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, remote events, on-demand loading).
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, event editing API).
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, localization, themes).
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).
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 and WCAG support and limitations for your application.
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, printing documentation).
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. Use the MCP server, supported agent skills and AI-readable Agenda documentation for framework-specific API context, then test the resulting code and application rules.
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, custom event content or on-demand event loading.
Week Calendar Date Navigation 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 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 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 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 Print only the agenda - not the full page - using the jQuery print add-on or with PDF export via the browser print dialog. 
Custom Event Sort Control the display order of events in a jQuery agenda view - set per-event priority or use a custom sort function. 
Multi-Timezone Display Show jQuery Agenda events in any timezone - set data and display timezones, then let users switch with a timezone picker. 
Event Search 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 Use a two-pane layout with a date picker and the jQuery agenda view - selecting a date in the picker navigates the agenda. 
Custom Event Content Add custom fields, descriptions, participants, and action buttons to jQuery agenda items - the agenda renders time and color automatically. 
Full Event Customization Fully customize jQuery agenda event card layout - show images, location, participants, and custom fields in each event row. 
Custom Header 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 Build customizable jQuery agenda day headers - add per-day action buttons, including headers for days without events or any custom actions. 
Custom Event Tooltip Add hover tooltips to jQuery agenda events showing appointment details and inline actions - choose native, custom popup, or third-party tooltip. 
Empty State Add a custom empty-state template to the jQuery agenda view - display a message, illustration, or action when no events are scheduled. 
Event Data Structure Define event objects for the jQuery Agenda - specify start, end, recurrence, resource, color, and extend events with custom fields. 
Supported Date Formats 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 Configure daily, weekly, monthly, and yearly recurring events in the jQuery Agenda - exclude dates and set stop conditions. 
Inline Event Data 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 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 Load jQuery agenda events on demand as users navigate - loading events from a remote API for real-time data and efficient performance. 
Google Calendar Sync 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 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 Show public Google Calendar events in the jQuery agenda view via the integration plugin - supply a Calendar ID and API key to connect. 
Event Hooks 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 Display events in a jQuery agenda view with Gregorian, Jalali, and Hijri calendar system support - configure the calendar system per user locale. 
Localization Switch the jQuery agenda between 37 languages - localize date and time formats, button labels, RTL layout, and override any setting manually. 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 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.
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.
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, Calendar view).
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).
Yes. Configure view.agenda.type and size for a day, week, month or year and multiple periods where applicable (agenda range options).
Yes. Mobiscroll provides event and header rendering options, and the demo library includes custom rows, day headers and tooltips (full event customization).
Yes. Resource filtering and event search are demonstrated patterns that you can connect to your application's data and controls (resource filtering, event search).
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.
Yes. Pass event records into the component or load them on demand as users navigate dates (load events on demand).
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.
No. Mobiscroll Agenda is part of a commercially licensed UI product, with a free trial available for evaluation. See Mobiscroll pricing.
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.
Yes. The AI Tooling guide explains the MCP server, agent skills and AI-readable documentation available to coding assistants. Verify generated code and application behavior before shipping.
No. Agenda works with your application's own event data. Mobiscroll Connect is an optional, separately sold product for integrating external calendar accounts.
Yes. Mobiscroll offers Calendaring for SaaS licensing for products delivered to multiple customers, distinct from internal-project licenses (see license options).
jQuery 1.7 and newer (jQuery installation).
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.
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 to help your coding assistant adapt an example with current APIs.
A standalone JavaScript library with no framework dependency, for bundled apps and plain web pages.
Native Angular components, not wrappers, that use Angular's own rendering and change detection.
Native React components, not wrappers, built on React's virtual DOM and state management.
Native Vue 3 components, not wrappers, that use Vue's rendering and reactivity model.
You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.
If you need to invite team members, manage seats and accounts you can do it from the licenses page.
We noticed you are logged in on a different machine and have closed your old session.
If you need to invite team members, manage seats and accounts you can do it from the licenses page.
