Calendar Component

The Calendar Component can be used to display a month-wise calendar that allows the user to select dates and move to the next or previous month.

Components

Description

Model Driven Forms Component PrimeNg  Calendar is an input component to select a date.
Popup and Inline Component The Calendar Component is used to input the user’s date and time. By default, the calendar is shown in popup mode but the inline property can be used to display it in inline mode.
Selection Mode Component The Calendar Component is used to input the user’s date and time. Users can select only one date by default but multiple dates can be selected by setting the selectionMode property to multiple.
DateFormat Component The Calendar Component is used to input the user’s date and time. The default date format of the calendar component is “mm/dd/yy”. The dateFormat property is used to customize the date format. The below options can be used as a part of the date format.
Time Component The Calendar Component is used to input the user’s date and time. The time picker in a calendar is used to enable the user to pick the time. It can be shown with or without the calendar. The hourFormat property is used to specify the time format to use.
Date Restriction Component The Calendar Component is used for date and time input from the user. To restrict selectable dates to a range set the readonlyInput property to true so that users cannot enter dates using the keyboard.
Disable specific dates and/or days Component The Calendar Component is used for date and time input from the user. To disable specific dates and/or dates first set the readonlyInput to true so that the user cannot enter the dates using the keyboard.
Button Bar Component  The Calendar component is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month. The Button Bar Component can be used to display the buttons for the current date & clear the selected option on the footer section of the calendar by enabling the showButtonBar property.
Multiple Months Component Angular PrimeNG Form Calendar Multiple Months Component is used to show multiple months calendar at the same time. The number of calendars depends on the number specified in the [numberOfMonths] property.
Custom Content Component The Calendar Component is used to input the user’s date and time. Custom content can be added to the calendar by using the header and footer templates provided by the calendar component.
Month Picker Component Angular PrimeNG Form Calendar Month Picker Component is used to pick the month of the corresponding year.
Year Picker Component  Angular PrimeNG Form Calendar Year Picker Component is used to pick the year within a certain range.
Touch UI Component The Calendar Component is used to input the user’s date and time. The Calendar Touch UI mode is optimized for touch devices and can be enabled by setting the touchUI property to true.
Animation Configuration Component The Calendar component is used to display a calendar that allows the user to select dates and move to the next or previous month.
Properties Component The Calendar Component is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month.
Events Component The Calendar Component is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month.
s Component It is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month.
Templates Component The Calendar Component is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month.
Styling Component The Form Calendar component is used to take input of date and/or time from the user. There are 11 structural styling classes for the calendar component which are listed below.

Angular PrimeNG Form Complete Reference

Angular PrimeNG Form facilitates the various input components for taking the input field & validating, which helps to design a responsive form for a single-page-application, that enhances the user experience, along with increasing the user interactivity in the Web application.

There are various components that are provided by the Angular PrimeNG Form, which are listed below with their brief description.

Similar Reads

AutoComplete Component

The AutoComplete Component in Angular PrimeNG facilitates real-time suggestions while the user is typing in the input component....

Calendar Component

The Calendar Component can be used to display a month-wise calendar that allows the user to select dates and move to the next or previous month....

CascadeSelect Component

The CascadeSelect Component is used to display a nested structure of options. It is like a Dropdown component where the items have their nested items which the user can select....

Checkbox Component

The Checkbox Component is an extension to the standard checkbox element with theming....

Chips Component

The Chips Component can be utilized to include the multiple values on an input field....

ColorPicker Component

The ColorPicker Component can be used to make a component in which users can select colors....

Dropdown Component

The Dropdown Component can be used to make to choose the objects from the given list of items....

Editor Component

The Form Editor is a Quill-based rich text editor component. There are various components provided by Angular PrimeNG, which are described below....

FloatLabel Component

FloatLabel component is the floating label that can be used on the input component....

InputGroup Component

InputGroup component allows a user to input content....

InputMask Component

InputMask component allows a user to input value in a certain format which includes numeric, date, currency and phone....

InputSwitch Component

The InputSwitch Component is used to take a boolean input from the user. It has two states, on and off. It can be turned on initially by binding its value with a boolean variable set to true. There is only one event associated with the InputSwitch component which is given below....

Inputtext Component

The Inputtext Component is an element that is used to make a text field with multi-line input support....

InputTextarea Component

The InputTextarea Component is an element that is used to make a text field with multi-line input support....

InputNumber Component

An InputNumber Component allows a user to input content as a numerical value. All the components are given below ....

Invalid State Component

The Invalid State Component can be used to show an invalid state style in the form module. When the class is set to invalid, it will provide the style for the input element as invalid....

Form Knob Component

The Knob component is a form component that is used to define a dialer type knob that contains labels and some data values....

KeyFilter Component

The KeyFilter component can used to set the data type that is to be used for an input field. It also filters other data types from the entered data types....

Listbox Component

The ListBox component can be used to make a list component from which we can select one or more items and can also be discarded if the item is not required by unchecking in the list....

MultiSelect Component

The Multiselect Component provides the user with a list of options where the user can select one or more options. The properties of the MultiSelect Component are listed below....

Password Component

The Password Component can be used to represent the strength indicator for the password fields....

RadioButton Component

The RadioButton Component allows the user to select one option at a time from a set....

Rating Component

The Rating Component can be used to represents the rating given by the user....

Slider Component

The Slider Component can be utilized as an input field having numeric values with a drag handle....

SelectButton Component

The SelectButton Components can be used to make a group of buttons from which the user can select a value....

ToggleButton Component

The ToggleButton Component can be used to make a button that users can toggle by clicking on it...

TreeSelect Component

The TreeSelect Component allows the users to select items from hierarchical data....

TriCheckbox Component

The TriCheckbox Component allows a user to make a checkbox with three states ie, true, false & null conditions....

Contact Us