The Ignite UI for Web Components Calendar component is lightweight and easy to configure. It is used for showing dates and weekdays. It is also the best way for providing monthly or yearly views to end-users. The Ignite UI for Web Components Calendar control lets you restrict the minimum and maximum date ranges that people can navigate through.
The Ignite UI for Ignite UI for Web Components Calendar provides an easy and intuitive way for displaying date information. It packs different features like single or multiple date selection modes, highlight and select date range, keyboard navigation, enabling week numbers, size and spacing options, and more.
Web Components Calendar Example
The following Web Components IgcCalendarComponent component example shows a basic calendar with a single day selection mode. See how it works or inspect the code behind.
<!DOCTYPE html><html><head><title>Calendar Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-calendarstyle="width: 400px;"></igc-calendar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
How To Create a Calendar in Web Components with Ignite UI
First, you need to install the Ignite UI for Web Components by running the following command:
For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.
The simplest way to start using the Ignite UI for Web Components IgcCalendarComponent is as follows:
<igc-calendar></igc-calendar>html
Selection Modes
Users can choose from three different selection modes - single selection, multiple selection or range selection. By default, the Ignite UI for Web Components IgcCalendarComponent is using single selection mode but you can change it by setting the selection property as shown in this example.
<!DOCTYPE html><html><head><title>Calendar Multiple Selection</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-calendarselection="multiple"style="width: 400px;"></igc-calendar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Range Selection
Following the same approach, we can switch selection to range mode:
<!-- Range selection mode --><igc-calendarselection="range"></igc-calendar>html
<!DOCTYPE html><html><head><title>Calendar Range Selection</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-calendarselection="range"style="width: 400px;"></igc-calendar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Active View and Date
The Ignite UI for Web Components Calendar component allows you to switch between three different views: days, months and years. The activeView property of the component reflects the current view. By default, the Calendar displays the current date when loaded initially. You could modify this by setting the activeDate property. The activeDate property also reflects the changes of the currently visible date made by the end user.
Header Options
By default, the Ignite UI for Web Components Calendar component renders a header area which contains information about the selected dates. You could hide the header by setting the HasHeader property to false. You could also configure vertical or horizontal orientation of the header using the headerOrientation property.
Please note that the Ignite UI for Web Components Calendar header is not rendered when the selection is set to multiple.
Please note that the Ignite UI for Web Components Calendar DOM properties use camelCase naming while their corresponding HTML attributes are using kebab-case. For example the headerOrientation property corresponds to the header-orientation attribute.
The Ignite UI for Web Components Calendar component exposes a title slot which allows you to customize the title of the header.
<!DOCTYPE html><html><head><title>Calendar Header</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-calendarselection="range"header-orientation="vertical"style="width: 500px;"><spanslot="title">Trip dates</span></igc-calendar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Localization and Formatting
Due to their very nature, localization and formatting are essential to any calendar. In the Ignite UI for Web Components IgcCalendarComponent those are controlled and customized through the following properties - locale, formatOptions, weekStart.
Let's go ahead and try those along with other customizations. First thing we need to set is the weekStart, which controls the starting day of the week. It defaults to Sunday, so we will set it to Monday. We will also customize the formatOptions property which specifies the options used to format the months and the weekdays in the Calendar views. Finally, we will set the locale property to a value, based on the user's location choice:
If everything went well, we should now have a Calendar with customized display, that also changes the locale representation, based on the user selection. Let's have a look at it:
<!DOCTYPE html><html><head><title>Calendar Formatting</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-radio-groupalignment="horizontal"style="margin-bottom: 10px;"><igc-radioname="locale"value="en"checked>EN</igc-radio><igc-radioname="locale"value="de">DE</igc-radio><igc-radioname="locale"value="fr">FR</igc-radio><igc-radioname="locale"value="ar">AR</igc-radio><igc-radioname="locale"value="ja">JA</igc-radio></igc-radio-group><igc-calendarid="calendar1"week-start="monday"style="width: 400px;"
></igc-calendar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Disabled dates
In some cases you would want to have disabled dates in the Calendar which can't be selected by the end user. This functionality is achieved by using the disabledDates property. The disabledDates property is an array of DateRangeDescriptor objects. Each descriptor has a Type and optionally a dateRange which is an array of Date objects.
These are the available options for the Type property:
After - disables the dates after the first date in the dateRange
Before - disables the dates before the first date in the dateRange
Between - disables the dates between the first and the second date in the dateRange
Specific - disables the dates specified in the dateRange array
Weekdays - disables all weekdays
Weekends - disables all weekends
Let's create a sample that is disabling the dates between the 3rd and the 8th of the current month:
<!DOCTYPE html><html><head><title>Calendar Disabled Dates</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-calendarid="calendar1"style="width: 400px;"></igc-calendar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Special dates
The specialDates property is using almost the same configuration principles as the disabledDates. The special dates have a highlighted look and feel and unlike the disabled ones can be selected.
Let's add some special dates to our Calendar. In order to do this, we will create a DateRangeDescriptor and pass the dates between the 3rd and the 8th of the current month:
<!DOCTYPE html><html><head><title>Calendar Special Dates</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-calendarid="calendar1"style="width: 400px;"></igc-calendar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Week numbers
You can use the showWeekNumbers property to show the week numbers of the Calendar component. You can do this by using its corresponding boolean attribute show-week-numbers like this:
<!DOCTYPE html><html><head><title>Calendar Week Numbers</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-calendarshow-week-numbersstyle="width: 400px;"></igc-calendar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Multiple Months
Using the visibleMonths property, you can display more than one month when the Calendar is in days view. When multiple months are displayed, you can configure whether you want to stack them vertically or horizontally by using the orientation property. By default, the orientation property is set to horizontal.
The Calendar displays leading and trailing dates from the previous and the next months. You could hide these dates by setting the hideOutsideDays property to true or using its corresponding boolean attribute hideOutsideDays.
<!DOCTYPE html><html><head><title>Calendar Multiple Months</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-calendarvisible-months="2"hide-outside-daysstyle="width: 600px;"></igc-calendar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Size
You could control the size and spacing of the calendar inner elements using the --ig-size CSS variable. The default size of the component is large.
<!DOCTYPE html><html><head><title>Calendar Size</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-radio-groupalignment="horizontal"style="margin-bottom: 10px;"><igc-radioname="size"value="small">Small</igc-radio><igc-radioname="size"value="medium">Medium</igc-radio><igc-radioname="size"value="large"checked>Large</igc-radio></igc-radio-group><igc-calendarid="calendar1"style="width: 400px;"></igc-calendar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Events
The Calendar component emits the Change event when the selected dates are changed by the end user. You can subscribe to the event like this:
this.calendar.addEventListener('igcChange', ev =>console.log(ev.detail));
ts
PageUp key to move to the previous month/year/years page.
PageDown key to move to the next month/year/years page.
Home key to focus the first day of the current month/first month in view/first year in view.
End key to focus the last day of the current month/last month in view/last year in view.
Arrow keys to navigate through the days/months/years. Navigating before the first item and after the last item will switch the view to the next/previous month/year/years page.
When a day inside the days view is focused, use:
Shift + PageUp keys to move to the previous year.
Shift + PageDown keys to move to the next year.
Space or Enter key to select the currently focused day.
When a month inside the months view is focused, use:
Space or Enter key to change the activeDate to the currently focused month and switch to days view.
When an year inside the years view is focused, use:
Space or Enter key to change the activeDate to the currently focused year and switch to months view.
When the previous or the next buttons (in the subheader) are focused, use:
Space or Enter key to switch to the previous/next month/year/years page.
When the month button (in the subheader) is focused, use:
Space or Enter key to switch to months view.
When the year button (in the subheader) is focused, use:
Space or Enter key to switch to years view.
Styling
The IgcCalendarComponent component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:
Name
Description
header
The header element.
header-title
The header title element.
header-date
The header date element.
content
The content element which contains the views and navigation elements.
navigation
The navigation container element.
months-navigation
The months navigation button element.
years-navigation
The years navigation button element.
years-range
The years range element.
navigation-buttons
The navigation buttons container.
navigation-button
Previous/next navigation button.
days-view-container
The days view container element.
days-view
Days view element.
months-view
The months view element.
years-view
The years view element.
days-row
Days row element.
label
Week header label element.
week-number
Week number element.
week-number-inner
Week number inner element.
date
Date element.
date-inner
Date inner element.
first
The first selected date element.
last
The last selected date element.
inactive
Inactive date element.
hidden
Hidden date element.
weekend
Weekend date element.
range
Range selected element.
special
Special date element.
disabled
Disabled date element.
single
Single selected date element.
preview
Range selection preview date element.
month
Month element.
month-inner
Month inner element.
year
Year element.
year-inner
Year inner element.
selected
Indicates selected state. Applies to date, month and year elements.
current
Indicates current state. Applies to date, month and year elements.
Using these CSS parts we can customize thе appearance of the IgcCalendarComponent component like this:
<!DOCTYPE html><html><head><title>Calendar Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-calendarstyle="width: 400px;"></igc-calendar></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html