Overview of IntegralUI Calendar for Angular

Created: 26 Nov 2019

IntegralUI Calendar is a native Angular component that enables the user to select a date using a visual monthly calendar display. In this article, you will find general information about the calendar component, including its properties, events and methods that you can use.

Calendar component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

The demo app shows the Calendar component where you can select dates. There are three different views:

  • Month - shows all days in specific month
  • Year - shows all months in a year
  • Decade - shows all years in a decade

To switch a view, click on calendar header and you can go to Month -> Year -> Decade and vice versa by selecting a Decade -> Year -> Month. In addition use the left/right buttons in Month view to slide among months in selected year.

How to Use IntegralUI Calendar in Angular

To use the Calendar component you need to do the following:

  • In app template place the button component using the iui-calendar tag name
  • Set values for different properties available
  • Handle the events in your code
<div class="app-block" #application>
    <iui-calendar [controlStyle]="ctrlStyle" [allowAnimation]="true"></iui-calendar>

By default, calendar displays all days, month and years in 'en-us' format. You can change that using the locales property to a different value. All standard localizations formats are supported. For example, to set the calendar to appear in Japanese, use the 'ja-JP-u-ca-japanese' value:

public calendarLocales: string = 'ja-JP-u-ca-japanese';
public calendarSize: any = { width: 300, height: 250 }
<div class="app-block" #application>
    <iui-calendar [controlStyle]="ctrlStyle" [allowAnimation]="true" [locales]="calendarLocales" [size]="calendarSize"></iui-calendar>

Note When choosing a different language, the calendar layout may appear a little off. To fix this, use the size property to change the calendar size, so that days are displayed correctly. This will update the component layout automatically.

You can also change the first day of the week to some other day than Sunday. Just set the firstDayOfWeek property to a different day of the week and the calendar display will update.

You can find below a list of all properties that are supported.

Calendar as Part of Other Angular Components

Calendar component is also usable as part of other components. You can use the Calendar component to create a custom dropdown content as part of DropDown directive, and attach it to any other Angular component or HTML element.

Calendar is integral part of the DatePicker component, and used as a cell editor in Grid and TreeGrid components.

IntegralUI Calendar - Properties, Events and Methods

Supported Properties

You can use the following properties to change the appearance and behavior of the Calendar component:

  • allowAnimation - determines whether changes to the calendar are animated or not
  • controlStyle - specifies an object that contains all style settings for the component
  • data - specifies an object that holds data related to the component
  • enabled - determines whether the component is enabled or disabled
  • firstDayOfWeek - specifies the first day of the week
  • locales - specifies the current localization string in use
  • name - uniquely identifies the component
  • selectedDate - the date that is selected
  • showToday - indicates whether the today date is visible
  • size - specifies the component width and height
  • state - specifies the component state: disabled, hovered, etc.
  • todayDate - the current day

Using the above properties, you can customize the Calendar component in a way best suited for your application.

Supported Events

Here is a list of available events:

  • enabledChanged - occurs when component is enabled or disabled
  • dateChanged - occurs when selected date property changes
  • stateChanged - occurs when component state changed: disabled, normal, hovered, selected

The dateChanged event is fired, whenever the selectedDate property changes. A date is changed by clicking on a day in Month view. Switching between different views Month/Year/Decade doesn't trigger this event.

onDateChanged(e: any){
    console.log("A new date is selected: ", e.date);
<div class="app-block" #application>
    <iui-calendar [controlStyle]="ctrlStyle" [allowAnimation]="true" (dateChanged)="onDateChanged($event)" ></iui-calendar>

You can handle these events in your code, and add specific action based on the change or event data.

Supported Methods

The following public methods are available:

  • updateLayout - updates the calendar layout

How to Customize the Calendar Appearance

You can modify the calendar appearance by changing the attributes of several built-in CSS classes. By default calendar appears in gray colors, and if a theme is applied in colors from the active theme. For example, when the Office theme is applied, the calendar appears in white/blue/black colors.

To enhance the calendar appearance, you can add your own custom CSS classes that will override the default settings. For this purpose, you can use the controlStyle property, where you need to specify the names of your CSS classes, for calendar state that you want to change: disabled, focused, hovered, normal and selected:

calendarStyle = {
    general: {
        disabled: 'iui-calendar-disabled',
        focused: 'iui-calendar-focused',
        normal: 'iui-calendar',
        hovered: 'iui-calendar-hovered',
        selected: 'iui-calendar-selected'
    cell: {
        disabled: 'iui-calendar-cell-disabled',
        focused: 'iui-calendar-cell-focused',
        grayed: 'iui-calendar-cell-grayed',
        normal: 'iui-calendar-cell',
        hovered: 'iui-calendar-cell-hovered',
        selected: 'iui-calendar-cell-selected',
        today: 'iui-calendar-cell-today'

In this example, we are only changing the calendar size. The calendar layouts will auto-update based on specified size.

public ctrlStyle: any = {
    general: { 
        normal: 'cldr-ovw',
<div class="app-block" #application>
    <iui-calendar [controlStyle]="ctrlStyle" [allowAnimation]="true" (dateChanged)="onDateChanged($event)" ></iui-calendar>
    width: 250px;
    height: 200px;

To disable animations in the calendar state, you can simply set the allowAnimation property to false./p>


IntegralUI Calendar component for Angular allows you to select a date using a monthly calendar display. Using different properties and events and by providing your own CSS classes, you can customize the calendar appearance and behavior.

You can change the current view by clicking on calendar header and move to a Month, Year or Decade view, and vice versa by selecting a Year/Month switch back to the default Month view. In addition, using the arrow buttons in calendar header, you can slide between months, years or decades.

The Calendar component is part of IntegralUI Web.


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.