@syncfusion/ej2-calendars
Advanced tools
A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.
@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.
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');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 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.
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.
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.
To install Calendar and its dependent packages, use the following command.
npm install @syncfusion/ej2-calendars
List of components available in the package:
The calendar is a graphical user interface component that displays a Gregorian Calendar and allows selection of a date.
min and max properties.month, year, and decade views that provide flexibility to select dates.The date picker is a graphical user interface component that allows selection or entry of a date value.
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.
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.
min and max properties.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.
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.
min and max properties.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.
Date time components are also offered in the following list of frameworks.
Expanse tracker (Source, Live Demo) - Date range picker component is used in this showcase sample to depict total expenses.
Loan calculator (Source, Live Demo) - Date picker component in this showcase sample displays the balance from monthly payment.
Product support is available through the following mediums.
syncfusion, ej2, and so on.Check the license details here.
Check the changelog here.
© Copyright 2019 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
FAQs
A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.
The npm package @syncfusion/ej2-calendars receives a total of 127,658 weekly downloads. As such, @syncfusion/ej2-calendars popularity was classified as popular.
We found that @syncfusion/ej2-calendars demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.