--- title: "JavaScript Agenda — Event List Component | Mobiscroll" component: "Agenda" framework: "JavaScript" library_version: "6.1.5" url: "https://demo.mobiscroll.com/javascript/agenda" --- # Modern Javascript agenda 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 16, 2026 Use it in **responsive mobile & desktop web apps** wherever **Javascript runs**. ## Description The agenda supports a **configurable range listing** along with **daily, monthly and yearly** presets. The **four views - scheduler, calendar, timeline, agenda -** can be combined to create the user experience you need on **mobile, desktop and everything in-between**. Capabilities like **recurring events, all-day and multi-day events, and responsiveness** are supported by all views. ## Setting up the agenda - [Week Calendar Date Navigation](https://demo.mobiscroll.com/javascript/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/javascript/agenda/basic-usage.md) - Set up a Javascript agenda view — display a monthly event list grouped by date with events loaded from an external API. - [Daily, Weekly, Monthly & Yearly Views](https://demo.mobiscroll.com/javascript/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/javascript/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/javascript/agenda/printing-the-view.md) - Print only the agenda — not the full page — using the Javascript print add-on, with PDF export via the browser print dialog. ## Displaying events - [Custom Event Sort](https://demo.mobiscroll.com/javascript/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/javascript/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/javascript/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/javascript/agenda/navigate-from-external-calendar.md) - Use a two-pane layout with a date picker and a Javascript agenda view — selecting a date in the picker, sync the agenda. ## Templating - [Custom Event Content](https://demo.mobiscroll.com/javascript/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/javascript/agenda/full-event-customization.md) - Fully customize agenda event card layout — show images, location, participants, and custom fields in each event row. - [Custom Header](https://demo.mobiscroll.com/javascript/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/javascript/agenda/customizing-day-header.md) - Build customizable Javascript agenda day headers — style date labels and add per-day action buttons, including headers for days without events. - [Custom Event Tooltip](https://demo.mobiscroll.com/javascript/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/javascript/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/javascript/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/javascript/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/javascript/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/javascript/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/javascript/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/javascript/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/javascript/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/javascript/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/javascript/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/javascript/agenda/load-events-from-google-calendar.md) - Load events from a public Google Calendar into the Javascript agenda view using the integration plugin — connect with a Calendar ID and API key. ## CRUD operations - [Multi-Event Selection & Bulk Actions](https://demo.mobiscroll.com/javascript/agenda/event-bulk-actions-edit-delete-update.md) - Select multiple events in a Javascript agenda view with keyboard shortcuts, or programmatically — bulk delete/update, or right-click for per-event edits. ## Customizing the look & feel - [Theme Customization](https://demo.mobiscroll.com/javascript/agenda/themes-ios-material-windows.md) - Customize the Javascript agenda view with iOS, Material, and Windows base themes — switch light or dark mode, use the theme builder, or apply custom CSS. ## Localization & tapping into the lifecycle - [Event Hooks](https://demo.mobiscroll.com/javascript/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/javascript/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/javascript/agenda/localization.md) - Switch the Javascript agenda between 37 languages — localize date and time formats, button labels, RTL layout, and override any setting manually.