React Calendar

React Calendar is a form component to work with dates.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Calendar } from 'primereact/calendar';

Getting Started

Calendar is used a controlled input component with value and onChange properties.

<Calendar value={date} onChange={(e) => setDate(e.value)}></Calendar>

Popup and Inline

Calendar is displayed in a popup by default whereas inline property needs to be enabled for inline mode.

<Calendar inline value={date} onChange={(e) => setDate(e.value)}></Calendar>

View Date

viewDate defines the date whose month and year are used to display the calendar. By default calendar uses value to render the view and falls back to today's date when value is not defined. In case you'd like to display a different month/year use viewDate. The usage of this property can either be controlled or uncontrolled. In controlled mode, onViewDateChange is required to manage the viewDate whereas in uncontrolled mode, viewDate is used only once in initial rendering and ignored in updates. If you'd like to change the displayed month/year programmatically, use the onViewDateChange in controlled mode.

<Calendar value={dates} onChange={(e) => setDate(e.value)} viewDate={viewDate} onViewDateChange={(e) => setViewDate(e.value)}></Calendar>

Selection Mode

Calendar offers "single" (default), "multiple" and "range" selection types controlled via the selectionMode property. In single, mode the bound value should be an array whereas in multiple case an array is required. Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value is the end date. Note that time picker is not currently supported in multiple and range modes.

<Calendar selectionMode="multiple" value={dates} onChange={(e) => setDates(e.value)}></Calendar>

DateFormat

Default date format is "mm/dd/yy" which can be customized using the dateFormat property.

<Calendar dateFormat="dd/mm/yy" value={date} onChange={(e) => setDate(e.value)}></Calendar>

Following options can be a part of the format.

• d - day of month (no leading zero)
• dd - day of month (two digit)
• o - day of the year (no leading zeros)
• oo - day of the year (three digit)
• D - day name short
• DD - day name long
• m - month of year (no leading zero)
• mm - month of year (two digit)
• M - month name short
• MM - month name long
• y - year (two digit)
• yy - year (four digit)
• @ - Unix timestamp (ms since 01/01/1970)
• ! - Windows ticks (100ns since 01/01/0001)
• '...' - literal text
• '' - single quote
• anything else - literal text

Locale

Translations for the calendar are defined with the Locale API.

Time

TimePicker is enabled with showTime property and hourFormat is used to select the 24 (default) or 12 hour mode. Optionally enabling timeOnly displays a calendar with time controls only.

<Calendar showTime hourFormat="12" value={date1} onChange={(e) => setDate1(e.value)}></Calendar>
<Calendar showTime hourFormat="24" value={date2} onChange={(e) => setDate2(e.value)}></Calendar>
<Calendar timeOnly showTime hourFormat="24" value={date3} onChange={(e) => setDate3(e.value)}></Calendar>

Date Restriction

To disable entering dates manually, set readOnlyInput to true and to restrict selectable date ranges use minDate and maxDate options.

<Calendar minDate={minDate} maxDate={maxDate} readOnlyInput value={date} onChange={(e) => setDate(e.value)}></Calendar>

Disable specific dates and/or days

Specific dates or days can be disabled as well, in this case set readOnlyInput to true and to restrict selectable dates use disabledDates and/or disabledDays options. disabledDatesproperty should be an array of dates and disabledDays should be an array of disabled weekdays.

<Calendar disabledDates={invalidDates} disabledDays={[0,6]} readOnlyInput value={date} onChange={(e) => setDate(e.value)}></Calendar>

Button Bar

Button bar displays today and clear buttons and activated using the showButtonBar property.

<Calendar value={date} onChange={(e) => setDate(e.value)} showButtonBar></Calendar>

Multiple Months

Displaying multiple months is enabled by setting numberOfMonths property to a value greater than 1.

<Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={3}></Calendar>

Date Template

Date cell contents can be templated using the dateTemplate property that returns the content of a cell. This is a handy feature to highlight specific dates. Note that the variable passed to the template is not a date instance but a metadata object to represent a Date with "day", "month", "year", "otherMonth", "today" and "selectable" properties to represent the date. Example below changes the styling of dates between 10 and 15.

<Calendar value={date} onChange={(e) => setDate(e.value)} dateTemplate={dateTemplate} />

dateTemplate(date) {
    if (date.day > 10 && date.day < 15) {
        return (
            <div style={{backgroundColor: '#1dcbb3', color: '#ffffff', fontWeight: 'bold', borderRadius: '50%', width: '2em', height: '2em', lineHeight: '2em', padding: 0}}>{date.day}</div>
        );
    }
    else {
        return date.day;
    }
}

Header and Footer

headerTemplate and footerTemplate properties are available to place custom content at these sections.

<Calendar value={date} onChange={(e) => setDate(e.value)} headerTemplate={<Button label="Custom Button" />} footerTemplate={<div>Footer Content</div>} />

Month and Year Navigator

Navigators are used to quickly change the displayed month and year using dropdowns. Enabling monthNavigator displays a dropdown with months whereas yearNavigator along with yearRange displays available years. Format of the yearRange is "startYear:endYear".

<Calendar value={date} onChange={(e) => setDate(e.value)} monthNavigator yearNavigator yearRange="2010:2030" />

Month Picker

Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.

<Calendar value={date} onChange={(e) => setDate(e.value)} view="month" dateFormat="mm/yy" yearNavigator yearRange="2010:2030"/>

Touch UI

Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices.

<Calendar value={date} onChange={(e) => setDate(e.value)} touchUI />

Theming

Calendar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Calendar showcase for demos and documentation.