Updated on Nov 18, 2020

Advanced Angular agenda

Use it in responsive mobile & desktop web apps and Ionic Angular projects

Other product features to explore

Path 17
Monthly agenda
Daily agenda

The agenda supports a configurable range listing along with daily, monhtly and yearly presets.
The three views - scheduler, calendar, agenda - can be combined to create the perfect user experience on mobile, desktop and everything in-between.

The capabilities like recurring events, all-day, multi-day events, responsiveness are supported by all three views.

As part of Event calendar and scheduler it can be picked up with the Framework and Complete licenses or with the component license.

Angular and Ionic Agenda Agenda for Angular and Ionic 2/3/4/5

Agenda - Compact daily schedule

Change demo
Compact daily schedule
Get started with this example

With the agenda you can list out events for any range grouped by days. Use it as a stand alone UI component or combine it with a calendar week view to make navigation easier.

You can add the components - like the calendar and agenda - and configure them in the view option.

Interested to learn about the calendar view?  Check out the event calendar →

Agenda - How to initialize

Change demo
How to initialize

Use the component and pass all the necessary options as attributes, like [theme]="ios".

The events can be passed in a couple different ways. In this example we are loading them through an external API.

Interested to learn about the calendar view?  Learn how to set up the range the agenda covers →

Agenda - Customize the range

Change demo
Customize the range

Use the agenda object inside the view option to configure the agenda. type and size can be set as follows:

  • day - agenda: { type: 'day', size: 20 } can be configured for a single day or a range of days
  • week - agenda: { type: 'week', size: 3 } can be configured for a single or multiple weeks
  • month - agenda: { type: 'month' } can be configured for one or more months
  • year - agenda: { type: 'year' } can be configured for one or more years
Interested in combining this with a calendar view?  Check out the previous example →

Agenda - Synchronized views

Change demo

You can usually get away with using a single instance, but being able to use and synchronize multiple views can come in handy.

In this example we have a two-pane layout with a calendar view on the left and a large agenda view on the right. Because the default rendering of agenda below the calendar doesn't fit we'll be needing two instances. The sync has to happen for both. The day view calls the navigate method of the calendar in its onPageChange event, while the calendar sets the day view with navigate from its onSetDate event.

Agenda - Content customization

Change demo
Content customization
Get started with this example

Above the built in look & feel, the events can be customized in two ways. You can either do a full event customization where the agenda only takes care of positioning and everything else is your responsibility.

When customizing only the content, the calendar handles the event start and end times, allDay and color rendering.

You will have to place and provide styling to the title field and any other custom fields you are using, like description, location, participants ...

You can provide the event content template and pass it to the eventContentTemplate option. All original event fields along with computed fields like isMultiDay, lastDay are passed to the template.

Agenda - Full event customization

Change demo
Full event customization
Get started with this example

The agenda ships with a predefined way of rendering events. There is a variation of how the events look on the screen depending on the theme.

Above the built in rendering mode you can either customize the full event or just the content of the event. If we break up the event into pieces there are four fields that we are interested in:

  • The event start and end time
  • Whether it is an allDay event or not
  • The event color
  • The event title

If you would like to keep the styling of the start/end times, allDay and color you will want to customize the content only, not the full event. In case of the full event customization the agenda takes care of positioning the event container and everything else is your responsability.

You will have to place and provide styling to all event fields. Beside the ones mentioned above you'll be able to render other custom fields, like description, location, participants ...

You can provide a full event template and pass it to the eventTemplate option. All original event fields along with computed fields like isMultiDay, lastDay are passed to the template.

Agenda - Event properties

Change demo
Event properties

The event data structure for the agenda is straightforward with a couple of base properties that the component understands and uses to render the UI. Besides the base properties you can add any custom property, like location, description ...

  • id - A unique ID for the event. If not specified a unique id will be generated
  • title - Defines the event text. This can be plaintext or HTML
  • color - Defines the event color
  • start - Sets the start date and time for the event. It can be a js date object, ISO date string or moment.js object. Learn about date formats
  • end - Sets the end date and time for the event. The same formats are supported as for start
  • allDay - Configures the event as a full-day event
  • recurring - Configures the recurring rules for the event. Learn about recurring events

Agenda - Supported date formats

Change demo
Supported date formats

Understanding how to work with dates inside the agenda is essential. You can pass to the data, marked, colors and labels in four different formats. The agenda can work with Javascript date objects, ISO strings and Moment.js objects.

Agenda - Understanding recurring events

Change demo
Understanding recurring events

Configure daily, weekly,monthly and yearly recurring events.

You can pass the recurrence rule in the recurring property of the event as an object or a string in RRULE format. Learn about the event data structure and where to place the recurring rules.

Use the configurator to experiment, build strings and objects that you can grab and use.

Agenda - Loading inline data

Change demo

What is an agenda without any events in it? To populate it with events all you have to do is pass the event array to the data option.

In a real-world scenario you would probabaly load the events from a remote resource or event better, load them on demand. However the point of this example is to understand how easy it is to add events to the agenda.

Do you want to learn about the event data sctructure?  See how the event object is built →

Agenda - Events from a remote API

Change demo
Events from a remote API
Get started with this example

The agenda can be populated by passing an array to the data option, that you can construct either inline or by getting it from a remote API. The important thing to remember is that events need to be in a format that the agenda understands.

Interested in load on demand?  Dynamically load events on month change →

Agenda - Loading events on demand

Change demo
Loading events on demand
Get started with this example

The agenda supports remote and local data sources. Besides that, events can be populated on initialization or loaded on demand.

Getting the events in real time as the user navigates improves load performance and always serves the most recent data.

Use the onPageLoading lifecycle event to load the data runtime. You can learn about lifecycle events and places where to drop logic to customize the experience.

Interested in loading events from Google Calendar?  Show events from Google Calendar →

Agenda - Events from Google calendar

Change demo
Events from Google calendar
Get started with this example

Data can be loaded from any number of places. The idea is to load the data and make sure to convert it into a format that the agenda understands. You can use base fields and add custom fields that you can then render with the help of templates.

You can show events coming from google calendars. In this example you'll see how you can load events from a public calendar using the googleSDK. Make sure to set your API key and Client ID, that you can get from here.

Agenda - Customizing the header

Change demo
Customizing the header
Get started with this example

You can customize how the header of the agenda looks and how the components are arranged. Besides that you can also add custom functionality, like a segmented control that lets people switch between agenda and calendar.

Use the headerTemplate option for passing a custom template. There are predefined components - shorthands if you will - that can be used to assemble the header:

  • Navigation component - <mbsc-calendar-nav></mbsc-calendar-nav>. Use the .md-header-filter-controls CSS class for custom overrides.
  • Today button - <mbsc-calendar-today></mbsc-calendar-today>. Use the .md-header-filter-today CSS class for custom overrides.
  • Previous month button - <mbsc-calendar-prev></mbsc-calendar-prev>. Use the .md-header-filter-prev CSS class for custom overrides.
  • Next month button - <mbsc-calendar-next></mbsc-calendar-next>. Use the .md-header-filter-next CSS class for custom overrides.

For changing the order the controls are laid out, you only need to set up the headerTemplate. This example sets a consistent order and layout across all themes and shows a custom control at the far right end.

Overriding the order for specific themes

For a custom order on a theme to theme basis, you will need to use a little CSS. Flex layout makes reordering easy. It's just a matter of setting the order in CSS. For material use the .mbsc-material, for windows the .mbsc-windows prefix and for iOS it is .mbsc-ios class. Eg.:

.mbsc-material .md-header-filter-prev { order: 1; }
.mbsc-material .md-header-filter-next { order: 2; }
.mbsc-material .md-header-filter-controls { order: 3; }
.mbsc-material .md-header-filter-today { order: 4; }
Want to add a filter to the header?  Check out the next example →

Agenda - In-header filtering

Change demo

The header of the agenda is a canvas and an opportunity for customization. You can add custom components and enable new interaction in context.

Such an example would be a custom filter block created with the help of a segmented control and placed between the standard UI components, which are:

  • Navigation component - <mbsc-calendar-nav></mbsc-calendar-nav>. Use the .md-header-filter-controls CSS class for custom overrides.
  • Today button - <mbsc-calendar-today></mbsc-calendar-today>. Use the .md-header-filter-today CSS class for custom overrides.
  • Previous month button - <mbsc-calendar-prev></mbsc-calendar-prev>. Use the .md-header-filter-prev CSS class for custom overrides.
  • Next month button - <mbsc-calendar-next></mbsc-calendar-next>. Use the .md-header-filter-next CSS class for custom overrides.

For changing the order the controls are laid out, you only need to set up the headerTemplate.

Overriding the order for specific themes

For a custom order on a theme to theme basis, you will need to use a little CSS. Flex layout makes reordering easy. It's just a matter of setting the order in CSS. For material use the .mbsc-material, for windows the .mbsc-windows prefix and for iOS it is .mbsc-ios class. Eg.:

.mbsc-material .md-header-filter-prev { order: 1; }
.mbsc-material .md-header-filter-next { order: 2; }
.mbsc-material .md-header-filter-controls { order: 3; }
.mbsc-material .md-header-filter-today { order: 4; }
Want to style and reorder the header?  Take a look at the previous example →

Agenda - Theming capabilities

Change demo
Theming capabilities

The look and feel of the agenda can be deeply customized. There are four levels of customization:

  • Base themes: Choose between Mobiscroll, iOS, Android Material and Windows.
  • Light or dark: Every theme has a light and dark variant. Setting the themeVariant to 'auto' will switch based on system settings.
  • Custom themes: Use the theme builder to customize the colors and make it match your brand.
  • Custom CSS: If you need further customization, the sky is the limit with CSS overrides.

You can also see how every example looks by changing the theme from the header.

Agenda - Lifecycle events

Change demo
Lifecycle events

The agenda ships with different hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

While users interact with the UI events like onEventClick, onInit, onSelectedDateChange ... will be triggered.

For a complete list of events go to the documentation  See available lifecycle events →

Agenda - Calendar systems

Change demo
Calendar systems

The agenda supports multiple calendar systems. You can control it with the calendarSystem setting, and it supports the following options:

  • Gregorian - it is included by default
  • Jalali - it is the default system of the Persian calendar and is inlcuded within the Farsi language pack
  • Hijri - it is included in the Arabic language pack
Interested in localization?  Explore this example →

Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.

Get started with Mobiscroll for Angular

Use it in Angular 4+ projects or use it in Ionic Angular apps.


Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for React

Use it in React projects or use it in Ionic React apps.


Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Javascript

Use it wherever Javascript runs.


Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for jQuery

Use it in you web app for mobile & desktop with jQuery.


Give the components a try in a starter app or see how they look in your project.

Already have an account?
Simple two minute install guide for jQuery and jQuery Mobile
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folders into your project

Extract the downloaded zip and grab the two folders. Make sure to place it where it can be reached from your html file.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file. Make sure to have jQuery loaded before this.

Copy code <link href="css/mobiscroll.jquery.min.css" rel="stylesheet" />
<script src="js/mobiscroll.jquery.min.js"></script>
Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload the page in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide for Javascript
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folders into your project

Extract the downloaded zip and grab the two folders. Make sure to place it where it can be reached from your html file.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file

Copy code <link href="css/mobiscroll.javascript.min.css" rel="stylesheet" />
<script src="js/mobiscroll.javascript.min.js"></script>
Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload the page in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to figure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project

Copy command $ mobiscroll config react --version=5

You will be prompted to log in with your mobiscroll account. Set your password here

Copy the code into your app

Grab the relevant parts and drop them into your JSX and CSS files.

Copy JSX
Copy CSS
Take a look at what you've accomplished

Run $ npm start in the root folder of your app

Copy command $ npm start

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to figure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project

Copy command $ mobiscroll config ionic --version=5

You will be prompted to log in with your mobiscroll account. Set your password here

Copy the code into your app

Grab the relevant parts and drop them into your TSX and CSS files.

Copy TSX
Copy CSS
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to figure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project

Copy command $ mobiscroll config angular --version=5

You will be prompted to log in with your mobiscroll account. Set your password here

Copy the code into your app

Grab the relevant parts and drop them into your Component, Template and Module files.

Copy TS
Copy HTML
Copy Module
Copy CSS
Take a look at what you've accomplished

Run $ ng serve in the root folder of your app

Copy command $ ng serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to figure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project

Copy command $ mobiscroll config ionic --version=5

You will be prompted to log in with your mobiscroll account. Set your password here

Copy the code into your app

Grab the relevant parts and drop them into your Component, Template and Module files.

Copy TS
Copy HTML
Copy Module
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Customize & try this demo locally
Sign in or start your free trial

We have to set you up with a trial for this to run 👍

Demos
Theme Select
Mobiscroll
Mobiscroll Dark
Material
Material Dark
iOS
iOS Dark
Windows
Windows Dark
Language Locale
See other demos and change options
Theme
Locale
See other demos