Advanced User Interface Controls and Components
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.
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:
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.
To use the Calendar component you need to do the following:
<div class="app-block" #application>
<iui-calendar [controlStyle]="ctrlStyle" [allowAnimation]="true"></iui-calendar>
</div>
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>
</div>
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 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.
You can use the following properties to change the appearance and behavior of the Calendar component:
Using the above properties, you can customize the Calendar component in a way best suited for your application.
Here is a list of available events:
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>
</div>
You can handle these events in your code, and add specific action based on the change or event data.
The following public methods are available:
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>
</div>
.cldr-ovw
{
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.