@syncfusion/ej2-calendars

What is @syncfusion/ej2-calendars?

@syncfusion/ej2-calendars is a comprehensive package for implementing calendar-related functionalities in web applications. It provides a variety of components such as DatePicker, TimePicker, DateRangePicker, and DateTimePicker, which are highly customizable and easy to integrate.

What are @syncfusion/ej2-calendars's main functionalities?

DatePicker

The DatePicker component allows users to select a date from a calendar popup. It supports various date formats and customizations.

import { DatePicker } from '@syncfusion/ej2-calendars';

let datePicker = new DatePicker({
    value: new Date(),
    placeholder: 'Select a date'
});
datePicker.appendTo('#element');

TimePicker

The TimePicker component enables users to select a time from a list of time values. It supports different time formats and customizations.

import { TimePicker } from '@syncfusion/ej2-calendars';

let timePicker = new TimePicker({
    value: new Date(),
    placeholder: 'Select a time'
});
timePicker.appendTo('#element');

DateRangePicker

The DateRangePicker component allows users to select a range of dates from a calendar popup. It supports various date formats and customizations.

import { DateRangePicker } from '@syncfusion/ej2-calendars';

let dateRangePicker = new DateRangePicker({
    startDate: new Date('1/1/2023'),
    endDate: new Date('1/10/2023'),
    placeholder: 'Select a date range'
});
dateRangePicker.appendTo('#element');

DateTimePicker

The DateTimePicker component combines the functionalities of DatePicker and TimePicker, allowing users to select both date and time from a single popup.

import { DateTimePicker } from '@syncfusion/ej2-calendars';

let dateTimePicker = new DateTimePicker({
    value: new Date(),
    placeholder: 'Select a date and time'
});
dateTimePicker.appendTo('#element');

Other packages similar to @syncfusion/ej2-calendars

react-datepicker

react-datepicker is a simple and customizable date picker component for React. It offers basic date selection functionalities and is easy to integrate into React applications. Compared to @syncfusion/ej2-calendars, it has fewer built-in features and customizations.

react-dates

react-dates is a date picker library for React developed by Airbnb. It provides a range of date picking functionalities, including single date, date range, and date range with presets. It is highly customizable but may require more configuration compared to @syncfusion/ej2-calendars.

antd

Ant Design (antd) is a comprehensive UI library for React that includes a DatePicker component among many other UI elements. The DatePicker in antd is feature-rich and integrates well with other components in the library. However, it is part of a larger UI framework, whereas @syncfusion/ej2-calendars is focused solely on calendar functionalities.

README

ej2-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-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 - Calendar has month, year, and decade views that provide flexibility to select dates.
• Highlight weekends - The calendar supports to highlighting every weekend in a month.
• 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.

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

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.

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 2019 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.