ej2-ng-calendars

The calendar package contains date and time components such as calendar, date picker, date range picker, date time picker, and time picker. These components come with options to disable dates, restrict selection, and show custom events. It also has documentation and support available under commercial and community licenses. Please visit www.syncfusion.com to get started.

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).

A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

Setup

To install Calendar and its dependent packages, use the following command.

npm install @syncfusion/ej2-ng-calendars

Components

List of components available in the package:

• Calendar
• DatePicker
• TimePicker
• DateTimePicker
• DateRangePicker

Calendar

The calendar is a graphical user interface component that displays a Gregorian Calendar and allows selection of a date.

Key features

• Date range - Restricts the range of dates that can be selected by using the min and max properties.
• Customization - Allows complete control over the appearance of the calendar component.
• Month or year selection - Provides a flexible option to select only a month or year as the date value.
• First day of week - Changes the first day of all weeks in every month.
• Week number - Displays the week number of the selected date in the calendar by enabling the week number option.
• Disabled dates - Disables any date to prevent the user from selecting that date.
• Start and depth view - The Calendar has month, year, and decade views that provide flexibility to select dates.
• Globalization - Supports globalization (internationalization and localization) to translate the names of months, days, and the today button text to any supported language.

Resources

• Getting started
• API reference
• View online demos
• Product page

DatePicker

The date picker is a graphical user interface component that allows selection or entry of a date value.

Key features

The date picker is inherited from the calendar component. So, all the key features of calendar can be accessed in the date picker component. Additionally, it has some specific features such as date format and strict mode.

• Date format - The date picker control’s input value can be custom formatted apart from the default culture’s specific date format.
• Strict mode - The strictMode is an act that allows entry only of valid dates within the specified min or max range in a text box.

Resources

• Getting started
• API reference
• View online demos
• Product page

TimePicker

Time picker is a simple and intuitive interface component that allows selection of a time value from the popup list or setting a desired time value.

Key features

• Time range - Restricts the entry or selection of time values within a specific range of time by using min and max properties.
• Time format - Apart from the default culture specific time format, the time picker control’s input value can also be custom formatted.
• Strict mode - The strictMode is an act that allows entry of only valid time values within the specified min and max range in a text box.
• Disabled time - Any number of time values can be disabled in the popup list items to prevent selection of those times.
• Time intervals - Allows populating the time list with intervals between the times in the popup list to enable selection of proper time value.
• Customization - The appearance of the time picker can be customized completely.
• Time list with duration - Supports customization of the control’s popup list items with time duration.
• Globalization - Supports globalization (internationalization and localization) to update time popup list values to match any specified culture.

Resources

• Getting started
• API reference
• View online demos
• Product page

DateTimePicker

The date time picker is a graphical user interface component that allows an end user to enter or select a date and time values from a pop-up calendar and time list pop-up.

Key features

The date time picker is inherited from the date picker and time picker component. So, all the key features of the date picker and time picker component can be accessed in the date time picker component. Additionally, it has some specific features such as Date time range and Date time format, which are described below.

• Date time range - Restricts the entry or selection of values within a specific range of dates and times by using min and max properties.
• Date time format - The control’s input value can be custom formatted apart from the default culture’s specific date time format.

Resources

• Getting started
• API reference
• View online demos
• Product page

DateRangePicker

The date range picker is a graphical user interface control that allows an end user to select start and end date values as a range from a calendar pop-up or by entering the value directly in the input element.

Key features

• Preset ranges - Defines the preset ranges to select the frequently used date range by the end users.
• Range restriction - This control restricts the entry or selection of values within a specific range of date by defining the min and max properties.
• Limit the selection range - Directs the end user to select only the date range with specific minimum and maximum number of days’ count by setting the minDays and maxDays options.
• First day of week - Changes the first day of weeks in every month.
• Strict mode - The strictMode is an act that allows entry only of a valid date within the specified min and max range in a textbox.
• Customization - The appearance of the component can be customized completely.
• Format - The control’s input value can be custom formatted apart from the default culture’s specific date range format.
• Globalization - Supports globalization (internationalization and localization) to translate the names of months, days, and button text to any supported language.

Resources

• Getting started
• API reference
• View online demos
• Product page

Supported Frameworks

Date time components are also offered in the following list of frameworks.

• React
• VueJS
• ASP.NET Core
• ASP.NET MVC
• JavaScript

Showcase samples

1. Expanse tracker (Source, Live Demo) - Date range picker component is used in this showcase sample to depict total expenses.

2. Loan calculator (Source, Live Demo) - Date picker component in this showcase sample displays the balance from monthly payment.

3. Stock chart (Live Demo) - Date range picker component in this showcase sample to display the stock analysis.

Support

Product support is available through the following mediums.

• Creating incident in Syncfusion Direct-trac support system or Community forum.
• New GitHub issue.
• Ask your queries in Stack Overflow with tag syncfusion, ej2, and so on.

License

Check the license details here.

Changelog

Check the changelog here.

© Copyright 2018 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

Changelog

[Unreleased]

16.2.41 (2018-06-25)

Calendars

Breaking Changes

• Newly added ColorPicker component in input package requires SplitButton dependency, So now it's mandatory to include the ej2-splitbuttons.umd.min.js in system.js configuration if your using system.js module loader. Update the system.js configuration while going with this version and above.

• Today button will act as a primary button in high contrast, bootstrap and fabric themes.

New Features

• Event arguments for all Calendar components has been streamlined.

DateRangePicker

Breaking Changes

• Value parameter obtained in change event argument has been changed from string type to array of date object and the string value from the input element can be obtained from the text parameter of the argument.

TimePicker

Breaking Changes

• In change event, the parameter e has been changed to event.

16.1.49 (2018-06-20)

DateTimePicker

• TimePicker popup is not closing while clicking outside of the window issue has been fixed.

16.1.48 (2018-06-13)

DateRangePicker

Bug Fixes

• Selection is not maintained in the month with start date in the left calendar, while performing drill down in the right calendar has been fixed.

16.1.45 (2018-05-23)

DateRangePicker

New Features

• DrillDown support has been provided for DateRangePicker component that allows to quick navigate back and forth from month and year views to select a range easier.

• Value property support has been provided for DateRangePicker component to set a date range.

16.1.42 (2018-05-15)

DateTimePicker

Bug Fixes

• ngOnDestroy related issues with destroying DateTimePicker component has been fixed.

16.1.38 (2018-05-02)

Common

Bug Fixes

• Now, Date parser will return the null value while parsing invalid date string.

16.1.35 (2018-04-17)

DateRangePicker

Bug Fixes

• focusIn and focusOut methods has been included.

• focus and blur events has been included.

16.1.34 (2018-04-10)

Common

Bug Fixes

• Issue with Calendar date generation in UTC+00:00 time zone has been fixed.

16.1.33 (2018-04-03)

Common

Bug Fixes

• Rendering issue on going with UTC+00:00 time zone has been fixed.

16.1.32 (2018-03-29)

DateRangePicker

Bug Fixes

• DateRangePicker popup will not open while enabling the readOnly property.

DateTimePicker

Bug Fixes

• Focus and blur events triggers multiple times in DateTimePicker control has been fixed.

• DateTimePicker throws script error while clicking today button in IE browser has been fixed.

Breaking Changes

• The out of range value will be the value of the component and highlighted with error class.

Calendar

Bug Fixes

• Calendar throws script error while clicking today button in IE browser has been fixed.

DatePicker

Bug Fixes

• DatePicker throws script error while clicking today button in IE browser has been fixed.

TimePicker

Breaking Changes

• The out of range value will be the value of the component and highlighted with error class.

16.1.29 (2018-03-13)

Common

Bug Fixes

• Width property with string type value issue has been fixed.

16.1.28 (2018-03-09)

DatePicker

Breaking Changes

• DatePicker maintains null value, while entering the out of range(min/max) issue has been fixed.

16.1.24 (2018-02-22)

Common

Breaking Changes

• Changed the Angular component selector, component name prefix with ejs e.g: ejs-calendar.

• Event arguments and it's parameter values are same.

• Popup open in read-only mode issue has been fixed.

New Features

• High contrast theme support.

DateRangePicker

New Features

• DateRangePicker rendered based on the screen resolution.

• DateTime support has been provided for DateRangePicker.

• Input type date has been handled in DateRangePicker.

DatePicker

Breaking Changes

• Pascal casing change to start and depth property values (Month, Year, Decade).

• Focus the input when select the value from the DatePicker popup.

New Features

• Today button support has been provided for DatePicker.

• Input type date has been handled in DatePicker.

TimePicker

Breaking Changes

• Pascal casing change to start and depth property values (Month, Year, Decade).

New Features

• Added itemRender support for the TimePicker which allows to customize each time values in a popup list.

• Input type time has been handled in TimePicker.

• Added scrollTo support for the TimePicker which is used to set the scroll position to the given time value when no value is selected in the popup list or the given value is not present in the popup list.

Calendar

Breaking Changes

• Pascal casing change to start and depth property values (Month, Year, Decade).

New Features

• Today button support has been provided for Calendar.

DateTimePicker

DateTimePicker component for selecting or entering a date and time with options for disabling dates, restricting selection and showing custom events.

• Range Restriction – Allows to select a date and time within a specified range.

• Format – Formatting the value displayed in a textbox.

• Customization – Allows to customize each day and time cell of the Calendar and time popup list.

• Strict Mode - Allows to enter the only valid date and time in a textbox.

• Accessibility - Provided with built-in accessibility support which helps to access all the DateTimePicker component features through the keyboard, screen readers, or other assistive technology devices.

15.4.26-preview (2018-01-23)

DateRangePicker

Bug Fixes

• Select event will be triggered when selecting the start and end date.

15.4.25-preview (2018-01-09)

DatePicker

Bug Fixes

• Width and form validation related issues has been fixed.

15.4.23-preview (2017-12-27)

Common

New Features

• Added typing file for ES5 global scripts (dist/global/index.d.ts).

Breaking Changes

• Modified the module bundle file name for ES6 bundling.

DatePicker, DateRangePicker and TimePicker

Bug Fixes

• Popup repositions will not work while scrolling on the fixed element, this has been fixed.

15.4.21-preview (2017-12-08)

DatePicker

Bug Fixes

• Popup position issue in mobile layout has been fixed.

15.4.20-preview (2017-12-01)

Common

New Features

• Upgraded TypeScript version to 2.6.2

Calendar

Bug Fixes

• issue on rendering the current month in European Time zone has been fixed.

DatePicker

Bug Fixes

• issue on rendering the current month in European Time zone has been fixed.
• showClearButton - Allows to clear the textbox and model values.
• zIndex - allows to set the z-index value to the popup element.

DateRangePicker

Bug Fixes

• showClearButton - Allows to clear the textbox and model values.
• zIndex - allows to set the z-index value to the popup element.

TimePicker

Bug Fixes

• showClearButton - Allows to clear the textbox and model values.
• zIndex - allows to set the z-index value to the popup element.

15.4.17-preview (2017-11-13)

Calendar

Calendar interface for selecting dates with options for disabling dates, restricting selection and showing custom events.

• Range Restriction - Allows to select a date within a specified date range.

• Start and Depth View - Allows to change the initial view and navigation depth of the Calendar.

• Customization - Allows to customize the each day cell of the calendar.

• Accessibility - Provided with built-in accessibility support which helps to access all the Calendar component features through the keyboard, screen readers, or other assistive technology devices.

DatePicker

DatePicker component for selecting or entering a date with options for disabling dates, restricting selection and showing custom events.

• Range Restriction - Allows to select a date within a specified date range.

• Format - Formatting the value displayed in a textbox.

• Start and Depth View - Allows to change the initial view and navigation depth of the Calendar.

• Customization - Allows to customize the each day cell of the calendar.

• StrictMode - Allows to entering the only valid date in a textbox.

• Accessibility - Provided with built-in accessibility support which helps to access all the DatePicker component features through the keyboard, screen readers, or other assistive technology devices.

DateRangePicker

DateRangePicker component that allows user to select the date range from the calendar or entering the range through the input element.

• Presets - Allows to define the customized predefined set of ranges.

• Day Span - Select the data span between the ranges to avoid excess or less date selection.

• Range Restriction - Control the date range selection within a specified range.

• Format - Formatting the value displayed in a textbox.

• Customization - Allows to customize the each day cell of the calendar.

• StrictMode - Allows to entering the only valid date in a textbox.

• Accessibility - Provided with built-in accessibility support which helps to access all the DateRangePicker component features through the keyboard, screen readers, or other assistive technology devices.

TimePicker

TimePicker component is the pre-filled dropdown list with the time values 12/24 hours format, that allows to select a time from the list.

• Range Restriction - Allows to select a time within a specified time range.

• Format - Formatting the value displayed in a textbox.

• Step - Provides the option to increment/decrement time value in a popup list.

• StrictMode - Allows to entering the only valid time in a textbox.

• Accessibility - Provided with built-in accessibility support which helps to access all the TimePicker component features through the keyboard, screen readers, or other assistive technology devices.