@syncfusion/ej2-calendars

ej2-calendars

The calendars package contains date and time components such as Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. These components come with an option for disabling dates, restricting selection and showing custom events. It also has documentation and support, which are 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-calendars

Components included

Following list of components are 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 a user to select a date.

Key Features

• Date Range - Restrict the range of dates that can be selected by using the min and max properties.
• Customization - You have complete control over the appearance of the Calendar component.
• Month or year selection - The Calendar control provides flexible options to select only the month or year as date value.
• First day of week - Change the first day of weeks in every month.
• Week number - Know the week number of the selected date in the Calendar by enabling the week number option.
• Disabled dates - Any date can be disabled to prevent the user from selecting the date.
• Start and Depth View - The Calendar has the month, year and decade views that provides a flexible way to navigate back and forth to select the date.
• Globalization - The Calendar control 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 DatePicker is a graphical user interface component that allows user to select or enter a date value.

Key Features

The DatePicker is inherited from the Calendar component. So, all the key features of the Calendar component can be accessible in the DatePicker component. Additionally, it has some specific features such as Date format and Strict mode, which are described below.

• Date Format - The DatePicker 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 the user to enter only the valid date within the specified min or max range in textbox.

Resources

• Getting Started
• API Reference
• View Online Demos
• Product Page

TimePicker

TimePicker is a simple and intuitive interface component which provides an options to select a time value from popup list or to set a desired time value.

Key Features

• Time Range - Restricts the entry or selection of time value within a specific range of time by using min and max properties.
• Time Format - Apart from the default culture specific time format, the TimePicker control’s input value can also be custom formatted.
• Strict mode - The strictMode is an act that allows you to enter only valid time value within the specified min and max range in the textbox.
• 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 essential intervals between the times in the popup list to enable the user to select proper time value.
• Customization - The appearance of the TimePicker component can be customized completely.
• Time list with duration - Supports customization of the TimePicker control’s popup list items with time duration.
• Globalization - The TimePicker control supports globalization (internationalization and localization) that allows updating the time popup list values to match specified culture.

Resources

• Getting Started
• API Reference
• View Online Demos
• Product Page

DateTimePicker

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

Key Features

The DateTimePicker is inherited from the DatePicker and TimePicker component. So, all the key features of the DatePicker and TimePicker component can be accessible in the DateTimePicker component. Additionally, it has some specific features such as DateTime Range and DateTime format, which are described below.

• DateTime Range - Restricts the entry or selection of values within a specific range of dates and times by using min and max properties.
• DateTime Format - The DateTimePicker 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 DateRangePicker is a graphical user interface control that allows an end user to select a start and end date value as a range from a calendar pop-up or by entering the value directly in the input element.

Key Features

• Preset Ranges - Supports to define the preset of ranges to select the frequently used date range by the end users.
• Range Restriction - The DateRangePicker control restricts the user to enter or select the value within a specific range of date by defining the min and max properties.
• Limit the selection range - Direct 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 - Change the first day of weeks in every month.
• Strict mode - The strictMode is an act, that allows the user to enter only the valid date within the specified min or max range in textbox.
• Customization - The appearance of the DateRangePicker component can be customized completely.
• Format - The DateRangePicker control’s input value can be custom formatted apart from the default culture’s specific date range format.
• Globalization - The DateRangePicker control 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

DateTime components are also offered in the following list of frameworks.

• Angular
• React
• VueJS
• ASP.NET Core
• ASP.NET MVC
• JavaScript (ES5)

Showcase samples

1. Expanse Tracker (Source, Live Demo) - DateRangePicker component is used in this showcase sample to depicts the total expenses.

2. Loan Calculator (Source, Live Demo) - DatePicker component is used in this showcase sample to display the balance report from monthly payment.

Support

Product support is available for through following mediums.

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

License

Check the license detail here.

Changelog

Check the changelog here.

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