--- title: "React Agenda Component — Event List View for Web Apps | Mobiscroll" component: "Agenda" framework: "React" library_version: "6.1.5" url: "https://demo.mobiscroll.com/react/agenda" --- # Modern React agenda Build event list views for React and Ionic apps — daily, monthly, and yearly agenda with week calendar combination, custom event templates, and mobile-responsive layout. Last update: Oct 16, 2026 Use it in **responsive mobile & desktop web apps** and **Ionic React projects** ## 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/react/agenda/daily-agenda-with-week-calendar.md) - Configure the React 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/react/agenda/basic-usage.md) - Set up a React 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/react/agenda/daily-weekly-monthly-annual-agenda.md) - Build a React 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/react/agenda/show-empty-days.md) - Display day headers for all dates in the React Agenda, including days without events — keep the full month visible in the agenda list. - [Printing the View](https://demo.mobiscroll.com/react/agenda/printing-the-view.md) - Print only the agenda — not the full page — using the React print add-on or with PDF export via the browser print dialog. ## Displaying events - [Custom Event Sort](https://demo.mobiscroll.com/react/agenda/custom-event-sort.md) - Control the display order of events in a React agenda view — set per-event priority or use a custom sort function. - [Multi-Timezone Display](https://demo.mobiscroll.com/react/agenda/setting-the-timezone.md) - Show React Agenda events in any timezone — set data and display timezones, then let users switch with a timezone picker. - [Event Search](https://demo.mobiscroll.com/react/agenda/searching-events-in-popup.md) - Add real-time event search to the React calendar header — type to filter events and show matching results in a popup agenda list. - [External Date Navigation](https://demo.mobiscroll.com/react/agenda/navigate-from-external-calendar.md) - Use a two-pane layout with a date picker and a React agenda view — selecting a date in the picker, sync the agenda. ## Templating - [Custom Event Content](https://demo.mobiscroll.com/react/agenda/event-content-customization.md) - Add custom fields, descriptions, participants, and action buttons to React agenda items — the agenda renders time and color automatically. - [Full Event Customization](https://demo.mobiscroll.com/react/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/react/agenda/customizing-calendar-header.md) - Build a custom header for the React event calendar agenda — assemble navigation controls, add a segmented view switcher or any custom action. - [Customizable Day Headers](https://demo.mobiscroll.com/react/agenda/customizing-day-header.md) - Build customizable React 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/react/agenda/custom-event-tooltip.md) - Add hover tooltips to React agenda events showing appointment details and inline actions — choose native, custom popup, or third-party tooltip. - [Empty State](https://demo.mobiscroll.com/react/agenda/empty-state.md) - Add a custom empty-state template to the React agenda view — display a message, illustration, or action when no events are scheduled. ## Resources - [Resource Filter in Header](https://demo.mobiscroll.com/react/agenda/resource-filtering-in-header.md) - Embed a segmented resource filter in the React Agenda custom header — filter displayed events by person or team. ## Event data structure - [Event Data Structure](https://demo.mobiscroll.com/react/agenda/event-data-structure.md) - Define event objects for the React Agenda — specify start, end, recurrence, resource, color, and extend events with custom fields. - [Supported Date Formats](https://demo.mobiscroll.com/react/agenda/date-object-ISO-8601-moment.md) - Use JS Date objects, ISO 8601 strings, or Moment.js values in the React Agenda — pass them to event data, markers, colors, and labels. - [Recurring Events](https://demo.mobiscroll.com/react/agenda/recurring-events.md) - Configure daily, weekly, monthly, and yearly recurring events in the React Agenda — exclude dates and set stop conditions. ## Loading events & data sources - [Inline Event Data](https://demo.mobiscroll.com/react/agenda/load-inline-data.md) - Populate the React 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/react/agenda/load-events-from-remote-api.md) - Load events into a React 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/react/agenda/load-events-on-demand.md) - Load React 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/react/agenda/sync-events-google-calendar.md) - Load and sync Google Calendar events in a React agenda view — authenticate users, toggle calendars on/off, and create events using the plugin. - [Outlook Calendar Sync](https://demo.mobiscroll.com/react/agenda/sync-events-outlook-calendar.md) - Use the React 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/react/agenda/load-events-from-google-calendar.md) - Load events from a public Google Calendar into the React 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/react/agenda/event-bulk-actions-edit-delete-update.md) - Select multiple events in a React 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/react/agenda/themes-ios-material-windows.md) - Style the React 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/react/agenda/event-hooks.md) - Handle agenda lifecycle events in the React 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/react/agenda/gregorian-jalali-hijri.md) - Display events in a React agenda view with Gregorian, Jalali, and Hijri calendar system support — configure the calendar system per user locale. - [Localization](https://demo.mobiscroll.com/react/agenda/localization.md) - Switch the React agenda between 37 languages — localize date and time formats, button labels, RTL layout, and override any setting manually.