Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
@syncfusion/ej2-calendars
Advanced tools
@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 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.
To install Calendar
and its dependent packages, use the following command.
npm install @syncfusion/ej2-calendars
Following list of components are available in the package.
The Calendar
is a graphical user interface component that displays a Gregorian Calendar, and allows a user to select a date.
min
and max
properties.month
, year
and decade
views that provides a flexible way to navigate back and forth to select the date.The DatePicker
is a graphical user interface component that allows user to select or enter a date value.
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.
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.
min
and max
properties.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.
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.
min
and max
properties.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.
DateTime components are also offered in the following list of frameworks.
Expanse Tracker (Source, Live Demo) - DateRangePicker component is used in this showcase sample to depicts the total expenses.
Loan Calculator (Source, Live Demo) - DatePicker component is used in this showcase sample to display the balance report from monthly payment.
Product support is available for through following mediums.
syncfusion
, ej2
.Check the license detail here.
Check the changelog here.
© Copyright 2018 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 108,814 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.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.