Ultimate calendar for your React app.

Wojciech Maj

Last update: Dec 27, 2022

Overview

React-Calendar

Ultimate calendar for your React app.

Pick days, months, years, or even decades
Supports range selection
Supports virtually any language
No moment.js needed

tl;dr

Install by executing npm install react-calendar or yarn add react-calendar.
Import by adding import Calendar from 'react-calendar'.
Use by adding <Calendar />. Use onChange prop for getting new values.

Demo

A minimal demo page can be found in sample directory.

Online demo is also available!

Before you continue

React-Calendar is under constant development. This documentation is written for React-Calendar 3.x branch. If you want to see documentation for other versions of React-Calendar, use dropdown on top of GitHub page to switch to an appropriate tag. Here are quick links to the newest docs from each branch:

v2.x

Getting started

Compatibility

Your project needs to use React 16.3 or later.

React-Calendar uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of supporting only modern browsers.

Legacy browsers

If you need to support legacy browsers like Internet Explorer 10, you will need to use Intl.js or another Intl polyfill along with React-Calendar.

Installation

Add React-Calendar to your project by executing npm install react-calendar or yarn add react-calendar.

Usage

Here's an example of basic usage:

import React, { useState } from 'react';
import Calendar from 'react-calendar';

function MyApp() {
  const [value, onChange] = useState(new Date());

  return (
    <div>
      <Calendar
        onChange={onChange}
        value={value}
      />
    </div>
  );
}

Check the sample directory in this repository for a full working example. For more examples and more advanced use cases, check Recipes in React-Calendar Wiki.

Custom styling

If you want to use default React-Calendar styling to build upon it, you can import React-Calendar's styles by using:

import 'react-calendar/dist/Calendar.css';

User guide

Calendar

Displays a complete, interactive calendar.

Props

Prop name	Description	Default value	Example values
activeStartDate	The beginning of a period that shall be displayed. If you wish to use React-Calendar in an uncontrolled way, use `defaultActiveStartDate` instead.	(today)	`new Date(2017, 0, 1)`
allowPartialRange	Whether to call onChange with only partial result given `selectRange` prop.	`false`	`true`
calendarType	Type of calendar that should be used. Can be `"ISO 8601"`, `"US"`, `"Arabic"`, or `"Hebrew"`. Setting to `"US"` or `"Hebrew"` will change the first day of the week to Sunday. Setting to `"Arabic"` will change the first day of the week to Saturday. Setting to `"Arabic"` or `"Hebrew"` will make weekends appear on Friday to Saturday.	Type of calendar most commonly used in a given locale	`"ISO 8601"`
className	Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.	n/a	String: `"class1 class2"` Array of strings: `["class1", "class2 class3"]`
defaultActiveStartDate	The beginning of a period that shall be displayed by default. If you wish to use React-Calendar in a controlled way, use `activeStartDate` instead.	(today)	`new Date(2017, 0, 1)`
defaultValue	Calendar value that shall be selected initially. Can be either one value or an array of two values. If you wish to use React-Calendar in a controlled way, use `value` instead.	n/a	Date: `new Date()` An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`
defaultView	Determines which calendar view shall be opened initially. Does not disable navigation. Can be `"month"`, `"year"`, `"decade"` or `"century"`. If you wish to use React-Calendar in a controlled way, use `view` instead.	The most detailed view allowed	`"year"`
formatLongDate	Function called to override default formatting of day tiles. Can be used to use your own formatting function.	(default formatter)	`(locale, date) => formatDate(date, 'dd MMM YYYY')`
formatMonth	Function called to override default formatting of month names. Can be used to use your own formatting function.	(default formatter)	`(locale, date) => formatDate(date, 'MMM')`
formatMonthYear	Function called to override default formatting of months and years. Can be used to use your own formatting function.	(default formatter)	`(locale, date) => formatDate(date, 'MMMM YYYY')`
formatShortWeekday	Function called to override default formatting of weekday names. Can be used to use your own formatting function.	(default formatter)	`(locale, date) => formatDate(date, 'dd')`
formatYear	Function called to override default formatting of year in the top navigation section. Can be used to use your own formatting function.	(default formatter)	`(locale, date) => formatDate(date, 'YYYY')`
inputRef	A prop that behaves like ref, but it's passed to main `<div>` rendered by `<Calendar>` component.	n/a	Function: `(ref) => { this.myCalendar = ref; }` Ref created using `React.createRef`: `this.ref = React.createRef();` … `inputRef={this.ref}` Ref created using `React.useRef`: `const ref = React.useRef();` … `inputRef={ref}`
locale	Locale that should be used by the calendar. Can be any IETF language tag.	User's browser settings	`"hu-HU"`
maxDate	Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-Calendar will ensure that no later date is selected.	n/a	Date: `new Date()`
maxDetail	The most detailed view that the user shall see. View defined here also becomes the one on which clicking an item will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`.	`"month"`	`"year"`
minDate	Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Calendar will ensure that no earlier date is selected.	n/a	Date: `new Date()`
minDetail	The least detailed view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`.	`"century"`	`"decade"`
navigationAriaLabel	`aria-label` attribute of a label rendered on calendar navigation bar.	n/a	`"Go up"`
navigationLabel	Content of a label rendered on calendar navigation bar.	(default label)	({ date, label, locale, view }) => `Current view: ${view}, date: ${date.toLocaleDateString(locale)}`
nextAriaLabel	`aria-label` attribute of the "next" button on the navigation pane.	n/a	`"Next"`
nextLabel	Content of the "next" button on the navigation pane. Setting the value explicitly to null will hide the icon.	`"›"`	String: `"›"` React element: `<NextIcon />`
next2AriaLabel	`aria-label` attribute of the "next on higher level" button on the navigation pane.	n/a	`"Jump forwards"`
next2Label	Content of the "next on higher level" button on the navigation pane. Setting the value explicitly to null will hide the icon.	`"»"`	String: `"»"` React element: `<DoubleNextIcon />`
onActiveStartDateChange	Function called when the user navigates from one view to another using previous/next button.	n/a	`({ activeStartDate, value, view }) => alert('Changed view to: ', activeStartDate, view)`
onChange	Function called when the user clicks an item (day on month view, month on year view and so on) on the most detailed view available.	n/a	`(value, event) => alert('New date is: ', value)`
onViewChange	Function called when the user navigates from one view to another using drill up button or by clicking a tile.	n/a	`({ activeStartDate, value, view }) => alert('New view is: ', view)`
onClickDay	Function called when the user clicks a day.	n/a	`(value, event) => alert('Clicked day: ', value)`
onClickDecade	Function called when the user clicks a decade.	n/a	`(value, event) => alert('Clicked decade: ', value)`
onClickMonth	Function called when the user clicks a month.	n/a	`(value, event) => alert('Clicked month: ', value)`
onClickWeekNumber	Function called when the user clicks a week number.	n/a	`(weekNumber, date, event) => alert('Clicked week: ', weekNumber, 'that starts on: ', date)`
onClickYear	Function called when the user clicks a year.	n/a	`(value, event) => alert('Clicked year: ', value)`
onDrillDown	Function called when the user drills down by clicking a tile.	n/a	`({ activeStartDate, view }) => alert('Drilled down to: ', activeStartDate, view)`
onDrillUp	Function called when the user drills up by clicking drill up button.	n/a	`({ activeStartDate, view }) => alert('Drilled up to: ', activeStartDate, view)`
prevAriaLabel	`aria-label` attribute of the "previous" button on the navigation pane.	n/a	`"Previous"`
prevLabel	Content of the "previous" button on the navigation pane. Setting the value explicitly to null will hide the icon.	`"‹"`	String: `"‹"` React element: `<PreviousIcon />`
prev2AriaLabel	`aria-label` attribute of the "previous on higher level" button on the navigation pane.	n/a	`"Jump backwards"`
prev2Label	Content of the "previous on higher level" button on the navigation pane. Setting the value explicitly to null will hide the icon.	`"«"`	String: `"«"` React element: `<DoublePreviousIcon />`
returnValue	Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed.	`"start"`	`"range"`
showDoubleView	Whether to show two months/years/… at a time instead of one. Forces `showFixedNumberOfWeeks` prop to be `true`.	`false`	`true`
showFixedNumberOfWeeks	Whether to always show fixed number of weeks (6). Forces `showNeighboringMonth` prop to be `true`.	`false`	`true`
showNavigation	Whether a navigation bar with arrows and title shall be rendered.	`true`	`false`
showNeighboringMonth	Whether days from previous or next month shall be rendered if the month doesn't start on the first day of the week or doesn't end on the last day of the week, respectively.	`true`	`false`
selectRange	Whether the user shall select two dates forming a range instead of just one. Note: This feature will make React-Calendar return array with two dates regardless of returnValue setting.	`false`	`true`
showWeekNumbers	Whether week numbers shall be shown at the left of MonthView or not.	`false`	`true`
tileClassName	Class name(s) that will be applied to a given calendar item (day on month view, month on year view and so on).	n/a	String: `"class1 class2"` Array of strings: `["class1", "class2 class3"]` Function: `({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null`
tileContent	Allows to render custom content within a given calendar item (day on month view, month on year view and so on).	n/a	String: `"Sample"` React element: `<TileContent />` Function: `({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null`
tileDisabled	Pass a function to determine if a certain day should be displayed as disabled.	n/a	Function: `({activeStartDate, date, view }) => date.getDay() === 0`
value	Calendar value. Can be either one value or an array of two values. If you wish to use React-Calendar in an uncontrolled way, use `defaultValue` instead.	n/a	Date: `new Date()` An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`
view	Determines which calendar view shall be opened. Does not disable navigation. Can be `"month"`, `"year"`, `"decade"` or `"century"`. If you wish to use React-Calendar in an uncontrolled way, use `defaultView` instead.	The most detailed view allowed	`"year"`

MonthView, YearView, DecadeView, CenturyView

Displays a given month, year, decade and a century, respectively.

Props

Prop name	Description	Default value	Example values
activeStartDate	The beginning of a period that shall be displayed.	n/a	`new Date(2017, 0, 1)`
hover	The date over which the user is hovering.	n/a	`new Date(2017, 0, 1)`
maxDate	Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although react-calendar will ensure that no later date is selected.	n/a	Date: `new Date()`
minDate	Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although react-calendar will ensure that no earlier date is selected.	n/a	Date: `new Date()`
onClick	Function called when the user clicks an item (day on month view, month on year view and so on).	n/a	`(value) => alert('New date is: ', value)`
tileClassName	Class name(s) that will be applied to a given calendar item (day on month view, month on year view and so on).	n/a	String: `"class1 class2"` Array of strings: `["class1", "class2 class3"]` Function: `({ date, view }) => view === 'month' && date.getDay() === 3 ? 'saturday' : null`
tileContent	Allows to render custom content within a given item (day on month view, month on year view and so on). Note: For tiles with custom content you might want to set fixed height of `react-calendar__tile` to ensure consistent layout.	n/a	`({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null`
value	Calendar value. Can be either one value or an array of two values.	n/a	Date: `new Date()` An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]` String: `2017-01-01` An array of strings: `['2017-01-01', '2017-08-01']`

Useful links

React-Calendar Wiki

License

The MIT License.

Author

Wojciech Maj
[email protected]
https://wojtekmaj.pl

Thank you

Backers

Thank you to all our backers! Become a backer and get your image on our README on GitHub.

Top Contributors

Thank you to all our contributors that helped on this project!

Comments

onChange function is not triggered on React 15.x

Hello @wojtekmaj

I am using your library in a pretty vanila way, but the call back onChange is never called when I select something a date in my calendar. Take a look:

Any idea? My version in my package.json is "react-calendar": "^2.13.0"
bug

opened by kleberpinel 20
Changing activeStartDate does not change calendar view

Hi,

I'm trying to use the library with a custom external navigation. So on click on next/prev of my custom navigation I update the prop "activeStartDate" but the calendar not change.

I saw that the "activeStartDate" in the state of Calendar component is not updated by props.
enhancement

opened by mantovanig 18
onClickWeek and onClickMonthLabel

Hi there wojtekmaj

I'm really enjoying using your Calendar component.

The showWeekNumbers prop is especially useful for me. Would it be possible to add a click listener for the week numbers similar to the other onClick{period} props.

For my use, I'm also disabling all views aside from Month using the minDetail prop. Since the month label no longer changes the view, I'd like to be able to attach a click handler on the month label. Could that be a prop as well?

Thanks again for the great module!

opened by amansur 11
MonthView locale 'ar-lb' showing in numbers instead of numerals

I am using react-calendar 3.3.1 with my own styling and when my locale is 'ar-lb', in the month view, the days are shown in numbers instead of arabic numerals whereas in the year view, it is correctly shown in numerals. I couldn't find a function formatDays similar to all the other format prop methods provided.

Month view vs Year view

bug

opened by yschoueri 10
Is it possible to block Tab (tabindex)

Hello everyone, i am making a form which contains rect-calendar, but when i am navigating through the form with Tabulation like this:

it enters the calendar and navigate to all the controls inside the calendar, i need to skip the calendar tabs and jump to my other input.

Is it actually possible in react-calendar? or do you know any other solution for this?
help wanted question stale

opened by nicoloso100 10
React-Calendar 3.0 roadmap
Use component as a controlled component - #217

The biggest architecture flaw React-Calendar has at the moment is how activeStartDate, view and value is being set. React-Calendar reacts to props change, but sets their value to its state, and remains uncontrolled.

React-Calendar 3.0 will allow handling it in an controlled way. Similarly to input elements, which can be uncontrolled by setting defaultValue or controlled by setting value and onChange, React-Calendar will allow:

defaultValue or value & onChange

defaultActiveStartDate or activeStartDate & onActiveStartDateChange

defaultView or view & onViewChange

ESM builds - #249

React-Calendar 3.0 will introduce tree-shakeable ESM builds, which should help with bundle size.

Typings no longer included in the package - #273

TypeScript typings will be moved to DefinitelyTyped repository, in an effort to improve its quality, and to reduce maintenance of the main library.

Minor changes & improvements

Some improvements were very small but were postponed because could have been considered breaking.

Add default styling for today's date - #112

Compatibility

I consider React-Calendar 2.x functional and stable enough to leave it as it is for those who prefer not to update their development environments. Minimum supported version of React will be 16.8. This way we will gain support of React Hooks, Fragments and we will be able to get rid of react-lifecycles-compat we use to support React 15.x and older 16.x versions.
opened by wojtekmaj 10
Highlighting works extremely slow when selectRange is enabled

Highlighting works extremely slow when selectRange is enabled. It doesn't matter either you're using react-daterange-select or using sample in react-calendar.

On the other hand it works very fast here http://projects.wojtekmaj.pl/react-daterange-picker
question stale

opened by apyrkh 10
Showing two months at a time for range selection

Thanks for this awesome component. 🎉 The no styling part makes this the best available solution for me. ❤️

I wanted to know if there is a way to show two months side by side for range view as generally, it makes sense if we are selecting a range.

I want something just like this.
enhancement

opened by ritz078 10
Is it possible to mark a whole week as active tile if selected a day in the calendar?

Hi, I am wondering if it is possible to mark a whole week as selected (like the date range) when I am selecting a day?

The idea is to get a range from the start of the week to the end of the week when a user selected a day in the calendar.

Thanks in advanced, Isaac
question

opened by golditz 10
showNeighboringMonth = false doesn't seem to work when coupled with showDoubleView
First of all, thanks for the great component you've made!

I was doing some testing with these parameters, and the showNeighboringMonth parameter works as intended:

<Calendar minDate={new Date()} selectRange={true} showNeighboringMonth={false} locale={"es"} />

However when coupling with showDoubleView, it doesn't seem to work:

<Calendar minDate={new Date()} selectRange={true} showDoubleView={true} showNeighboringMonth={false} locale={"es"} />

Am I doing something wrong on my end?

Edit: found a workaround, by adding a css rule:

.react-calendar__month-view__days__day--neighboringMonth { display: none; }
stale
opened by LeoLozes 9
How to highlight specific dates only in calendar and disable all other dates?

i want to highlight dates base on data i am getting from API and disable other dates.Is there any way to highlight specific dates because currently, I can see only minDate and max date props which just enable dates which this range BUT i want to highlight the specific date in the calendar. Actually This calendar i am using for event management to show event dates on calendar.
question

opened by bilalbutt044 9
Bump eslint from 8.26.0 to 8.31.0
Bumps eslint from 8.26.0 to 8.31.0.

Release notes

Sourced from eslint's releases.

v8.31.0

Features

52c7c73 feat: check assignment patterns in no-underscore-dangle (#16693) (Milos Djermanovic)

b401cde feat: add options to check destructuring in no-underscore-dangle (#16006) (Morten Kaltoft)

30d0daf feat: group properties with values in parentheses in key-spacing (#16677) (Francesco Trotta)

Bug Fixes

35439f1 fix: correct syntax error in prefer-arrow-callback autofix (#16722) (Francesco Trotta)

87b2470 fix: new instance of FlatESLint should load latest config file version (#16608) (Milos Djermanovic)

Documentation

4339dc4 docs: Update README (GitHub Actions Bot)

4e4049c docs: optimize code block structure (#16669) (Sam Chen)

54a7ade docs: do not escape code blocks of formatters examples (#16719) (Sam Chen)

e5ecfef docs: Add function call example for no-undefined (#16712) (Elliot Huffman)

a3262f0 docs: Add mastodon link (#16638) (Amaresh S M)

a14ccf9 docs: clarify files property (#16709) (Sam Chen)

3b29eb1 docs: fix npm link (#16710) (Abdullah Osama)

a638673 docs: fix search bar focus on Esc (#16700) (Shanmughapriyan S)

f62b722 docs: country flag missing in windows (#16698) (Shanmughapriyan S)

4d27ec6 docs: display zh-hans in the docs language switcher (#16686) (Percy Ma)

8bda20e docs: remove manually maintained anchors (#16685) (Percy Ma)

b68440f docs: User Guide Getting Started expansion (#16596) (Ben Perlmutter)

Chores

65d4e24 chore: Upgrade @eslint/eslintrc@1.4.1 (#16729) (Brandon Mills)

8d93081 chore: fix CI failure (#16721) (Sam Chen)

8f17247 chore: Set up automatic updating of README (#16717) (Nicholas C. Zakas)

4cd87cb ci: bump actions/stale from 6 to 7 (#16713) (dependabot[bot])

fd20c75 chore: sort package.json scripts in alphabetical order (#16705) (Darius Dzien)

10a5c78 chore: update ignore patterns in eslint.config.js (#16678) (Milos Djermanovic)

v8.30.0

Features

075ef2c feat: add suggestion for no-return-await (#16637) (Daniel Bartholomae)

7190d98 feat: update globals (#16654) (Sébastien Règne)

Bug Fixes

1a327aa fix: Ensure flat config unignores work consistently like eslintrc (#16579) (Nicholas C. Zakas)

9b8bb72 fix: autofix recursive functions in no-var (#16611) (Milos Djermanovic)

Documentation

6a8cd94 docs: Clarify Discord info in issue template config (#16663) (Nicholas C. Zakas)

ad44344 docs: CLI documentation standardization (#16563) (Ben Perlmutter)

293573e docs: fix broken line numbers (#16606) (Sam Chen)

fa2c64b docs: use relative links for internal links (#16631) (Percy Ma)

75276c9 docs: reorder options in no-unused-vars (#16625) (Milos Djermanovic)

7276fe5 docs: Fix anchor in URL (#16628) (Karl Horky)

6bef135 docs: don't apply layouts to html formatter example (#16591) (Tanuj Kanti)

dfc7ec1 docs: Formatters page updates (#16566) (Ben Perlmutter)

... (truncated)

Changelog

Sourced from eslint's changelog.

v8.31.0 - December 31, 2022

65d4e24 chore: Upgrade @eslint/eslintrc@1.4.1 (#16729) (Brandon Mills)

35439f1 fix: correct syntax error in prefer-arrow-callback autofix (#16722) (Francesco Trotta)

87b2470 fix: new instance of FlatESLint should load latest config file version (#16608) (Milos Djermanovic)

8d93081 chore: fix CI failure (#16721) (Sam Chen)

4339dc4 docs: Update README (GitHub Actions Bot)

8f17247 chore: Set up automatic updating of README (#16717) (Nicholas C. Zakas)

4e4049c docs: optimize code block structure (#16669) (Sam Chen)

54a7ade docs: do not escape code blocks of formatters examples (#16719) (Sam Chen)

52c7c73 feat: check assignment patterns in no-underscore-dangle (#16693) (Milos Djermanovic)

e5ecfef docs: Add function call example for no-undefined (#16712) (Elliot Huffman)

a3262f0 docs: Add mastodon link (#16638) (Amaresh S M)

4cd87cb ci: bump actions/stale from 6 to 7 (#16713) (dependabot[bot])

a14ccf9 docs: clarify files property (#16709) (Sam Chen)

3b29eb1 docs: fix npm link (#16710) (Abdullah Osama)

fd20c75 chore: sort package.json scripts in alphabetical order (#16705) (Darius Dzien)

a638673 docs: fix search bar focus on Esc (#16700) (Shanmughapriyan S)

f62b722 docs: country flag missing in windows (#16698) (Shanmughapriyan S)

4d27ec6 docs: display zh-hans in the docs language switcher (#16686) (Percy Ma)

8bda20e docs: remove manually maintained anchors (#16685) (Percy Ma)

b401cde feat: add options to check destructuring in no-underscore-dangle (#16006) (Morten Kaltoft)

b68440f docs: User Guide Getting Started expansion (#16596) (Ben Perlmutter)

30d0daf feat: group properties with values in parentheses in key-spacing (#16677) (Francesco Trotta)

10a5c78 chore: update ignore patterns in eslint.config.js (#16678) (Milos Djermanovic)

v8.30.0 - December 16, 2022

f2c4737 chore: upgrade @eslint/eslintrc@1.4.0 (#16675) (Milos Djermanovic)

1a327aa fix: Ensure flat config unignores work consistently like eslintrc (#16579) (Nicholas C. Zakas)

075ef2c feat: add suggestion for no-return-await (#16637) (Daniel Bartholomae)

ba74253 chore: standardize npm script names per #14827 (#16315) (Patrick McElhaney)

6a8cd94 docs: Clarify Discord info in issue template config (#16663) (Nicholas C. Zakas)

0d9af4c ci: fix npm v9 problem with file: (#16664) (Milos Djermanovic)

7190d98 feat: update globals (#16654) (Sébastien Règne)

ad44344 docs: CLI documentation standardization (#16563) (Ben Perlmutter)

90c9219 refactor: migrate off deprecated function-style rules in all tests (#16618) (Bryan Mishkin)

9b8bb72 fix: autofix recursive functions in no-var (#16611) (Milos Djermanovic)

293573e docs: fix broken line numbers (#16606) (Sam Chen)

fa2c64b docs: use relative links for internal links (#16631) (Percy Ma)

75276c9 docs: reorder options in no-unused-vars (#16625) (Milos Djermanovic)

7276fe5 docs: Fix anchor in URL (#16628) (Karl Horky)

6bef135 docs: don't apply layouts to html formatter example (#16591) (Tanuj Kanti)

dfc7ec1 docs: Formatters page updates (#16566) (Ben Perlmutter)

8ba124c docs: update the prefer-const example (#16607) (Pavel)

e6cb05a docs: fix css leaking (#16603) (Sam Chen)

v8.29.0 - December 2, 2022

0311d81 docs: Configuring Plugins page intro, page tweaks, and rename (#16534) (Ben Perlmutter)

... (truncated)

Commits

d9a39c7 8.31.0

5d182ce Build: changelog update for 8.31.0

65d4e24 chore: Upgrade @eslint/eslintrc@1.4.1 (#16729)

35439f1 fix: correct syntax error in prefer-arrow-callback autofix (#16722)

87b2470 fix: new instance of FlatESLint should load latest config file version (#16608)

8d93081 chore: fix CI failure (#16721)

4339dc4 docs: Update README

8f17247 chore: Set up automatic updating of README (#16717)

4e4049c docs: optimize code block structure (#16669)

54a7ade docs: do not escape code blocks of formatters examples (#16719)

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0
Bump css-loader from 6.7.1 to 6.7.3 in /test
Bumps css-loader from 6.7.1 to 6.7.3.

Release notes

Sourced from css-loader's releases.

v6.7.3

6.7.3 (2022-12-14)

Bug Fixes

remove sourceURL from emitted CSS (#1487) (962924c)

v6.7.2

6.7.2 (2022-11-13)

Bug Fixes

css modules generation with inline syntax (#1480) (2f4c273)

Changelog

Sourced from css-loader's changelog.

6.7.3 (2022-12-14)

Bug Fixes

remove sourceURL from emitted CSS (#1487) (962924c)

6.7.2 (2022-11-13)

Bug Fixes

css modules generation with inline syntax (#1480) (2f4c273)

Commits

ef749f2 chore(release): 6.7.3

36fb945 chore: fix cspell

962924c fix: remove sourceURL from emitted CSS (#1487)

3f3f302 chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2 (#1486)

04ca713 chore: update dependencies to the latest version (#1485)

9449827 chore: update styfle/cancel-workflow-action (#1484)

6c67af8 chore: add cSpell to check spelling issues (#1482)

239b9ac chore(deps): bump loader-utils from 2.0.3 to 2.0.4 (#1481)

394d200 chore(release): 6.7.2

2f4c273 fix: css modules generation with inline syntax (#1480)

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0
Bump css-loader from 6.7.1 to 6.7.3 in /sample
Bumps css-loader from 6.7.1 to 6.7.3.

Release notes

Sourced from css-loader's releases.

v6.7.3

6.7.3 (2022-12-14)

Bug Fixes

remove sourceURL from emitted CSS (#1487) (962924c)

v6.7.2

6.7.2 (2022-11-13)

Bug Fixes

css modules generation with inline syntax (#1480) (2f4c273)

Changelog

Sourced from css-loader's changelog.

6.7.3 (2022-12-14)

Bug Fixes

remove sourceURL from emitted CSS (#1487) (962924c)

6.7.2 (2022-11-13)

Bug Fixes

css modules generation with inline syntax (#1480) (2f4c273)

Commits

ef749f2 chore(release): 6.7.3

36fb945 chore: fix cspell

962924c fix: remove sourceURL from emitted CSS (#1487)

3f3f302 chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2 (#1486)

04ca713 chore: update dependencies to the latest version (#1485)

9449827 chore: update styfle/cancel-workflow-action (#1484)

6c67af8 chore: add cSpell to check spelling issues (#1482)

239b9ac chore(deps): bump loader-utils from 2.0.3 to 2.0.4 (#1481)

394d200 chore(release): 6.7.2

2f4c273 fix: css modules generation with inline syntax (#1480)

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0
Expose the default props

https://github.com/wojtekmaj/react-calendar/issues/706

I've exposed shared folder which contains default definitions of format*. Unfortunately, I wasn't able to find default implementation for navigationLabel function.

opened by mrfullset 0
Bump prettier from 2.7.1 to 2.8.1
Bumps prettier from 2.7.1 to 2.8.1.

Release notes

Sourced from prettier's releases.

2.8.1

🔗 Changelog

2.8.0

diff

🔗 Release note

Changelog

Sourced from prettier's changelog.

2.8.1

diff

Fix SCSS map in arguments (#9184 by @agamkrbit)

// Input $display-breakpoints: map-deep-merge( ( "print-only": "only print", "screen-only": "only screen", "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})", ), $display-breakpoints ); // Prettier 2.8.0 $display-breakpoints: map-deep-merge( ( "print-only": "only print", "screen-only": "only screen", "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, " sm ")-1})", ), $display-breakpoints );
// Prettier 2.8.1 $display-breakpoints: map-deep-merge( ( "print-only": "only print", "screen-only": "only screen", "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})", ), $display-breakpoints );

Support auto accessors syntax (#13919 by @sosukesuzuki)

Support for Auto Accessors Syntax landed in TypeScript 4.9.

(Doesn't work well with babel-ts parser)

class Foo { accessor foo: number = 3; </tr></table>

... (truncated)

Commits

cd1df1a Release 2.8.1

5541a63 Remove version validation

1cf760a Support decorator auto accessors syntax (#13919)

aa34209 test: format instantiation expr in logical expr (#13897)

957b4f2 Build(deps): Bump decode-uri-component from 0.2.0 to 0.2.2 in /website (#13933)

e4240ae Add tests for keyword class property (#13927)

655a161 Add tests for multiple comments (#13890)

4a1e32a Fixed scss function arguments on different lines in maps #9128 (#9184)

38806fe Migrate from probot/no-response to lee-dohm/no-response (#13891)

a60bee2 Add '--single-attribute-per-line' option to Playground (#13587)

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0
Bump @pmmmwh/react-refresh-webpack-plugin from 0.5.8 to 0.5.10 in /test
Bumps @pmmmwh/react-refresh-webpack-plugin from 0.5.8 to 0.5.10.

Release notes

Sourced from @pmmmwh/react-refresh-webpack-plugin's releases.

v0.5.10

0.5.10 (24 Nov 2022)

Fixes

Bumped loader-utils to fix security vulnerability (#700)

v0.5.9

0.5.9 (10 Nov 2022)

Fixes

Bumped loader-utils to fix security vulnerability (#685)

Changelog

Sourced from @pmmmwh/react-refresh-webpack-plugin's changelog.

0.5.10 (24 Nov 2022)

Fixes

Bumped loader-utils to fix security vulnerability (#700)

0.5.9 (10 Nov 2022)

Fixes

Bumped loader-utils to fix security vulnerability (#685)

Commits

0610d3c chore: release v0.5.10

294bf83 chore(deps): bump loader-utils from 2.0.3 to 2.0.4 (#700)

59e1441 chore(deps): bump loader-utils from 2.0.3 to 2.0.4 in /examples/typescript-wi...

b1e64ec chore(deps): bump loader-utils from 2.0.3 to 2.0.4 in /examples/webpack-dev-s...

ec834ff chore(deps): bump loader-utils from 2.0.3 to 2.0.4 in /examples/typescript-wi...

0dab66d chore(deps): bump loader-utils from 2.0.3 to 2.0.4 in /examples/webpack-plugi...

1a30df6 chore(deps): bump loader-utils from 2.0.3 to 2.0.4 in /examples/webpack-hot-m...

ad5796e chore(deps): bump loader-utils from 2.0.3 to 2.0.4 in /examples/flow-with-bab...

c0d3d1c chore(deps): bump loader-utils from 2.0.3 to 2.0.4 in /examples/typescript-wi...

d6f3f17 chore: bump dev deps and examples (#692)

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0

Releases(v4.0.0)

v4.0.0(Nov 8, 2022)
Note: React <16.8 is not supported. If you're still using React older than 16.8, please use react-calendar@^3.0.0 instead.

❗️ = breaking change

What's changed?

❗️ Minimum React version is now 16.8.

Replaced merge-class-names with clsx.

Source code(tar.gz)
Source code(zip)
v3.9.0(Sep 19, 2022)
What's new?

Added Navigation to exports list (#594).

Added formatWeekday prop (#620).

Source code(tar.gz)
Source code(zip)
v3.8.0(Sep 6, 2022)
What's new?

Added …--weekend class to Weekdays tiles (#490). Thanks, @fffed!

Added goToRangeStartOnSelect prop (#639).

Source code(tar.gz)
Source code(zip)
v3.7.0(Feb 4, 2022)
What's new?

Added support for React 18.

What's changed?

Improved performance of date formatters (#180).

Bug fixes

Fixed tileContent not updating on activeStartDate change (#576).

Source code(tar.gz)
Source code(zip)
v3.6.0(Jan 17, 2022)
What's new?

Allow showFixedNumberOfWeeks to be explicitly defined even when showDoubleView is true (#413). Thanks, @frankleng!

Bug fixes

Fixed calendar tiles and week number misaligned (#412).

Fixed week numbers wrongly calculated for Arabic and Hebrew calendars in some cases (#578).

New contributors

@frankleng made their first contribution in #413.

Source code(tar.gz)
Source code(zip)
v3.5.0(Oct 25, 2021)
What's new?

Added action to onActiveStartDateChange and onViewChange callbacks (#367, #474).

Added navigationAriaLive prop (#538). Thanks, @gabe-lingco!

What's changed?

Improved documentation on hover and onActiveStartDateChange (#458, #495).

Removed inline styles from Navigation component, which should make Navigation easier to style.

Bug fixes

Fixed hover classes applied even before the first value was selected (#505).

Fixed next and next2 buttons disabled if maxDate was set to the 1st millisecond of nextActiveStartDate or nextActiveStartDate2 respectively (#485, #431).

Source code(tar.gz)
Source code(zip)
v3.4.0(Apr 16, 2021)
What's new?

Added formatDay prop which allows you to customize formatting of day numbers.

Bug fixes

Fixed day tile numbers not taking locale into account when formatting (#508).

Source code(tar.gz)
Source code(zip)
v3.3.1(Jan 29, 2021)
Bug fixes

Fix crash on IE 11 caused by passing date to Date constructor (#480).

Fixed default min date to be 0001-01-01 local time, not UTC time.

Source code(tar.gz)
Source code(zip)
v3.3.0(Jan 3, 2021)
What's new?

Added definite support for years < 1000 (#472).

Source code(tar.gz)
Source code(zip)
v3.2.1(Nov 18, 2020)
Bug fixes

Fixed an issue that caused some of the v3.2.0 features and changes not to be published.

Source code(tar.gz)
Source code(zip)
v3.2.0(Nov 5, 2020)
What's new?

Added value to onActiveStartDateChange and onViewChange callbacks arguments (#379).

Added event to onChange callback (#388).

Added inputRef prop to pass ref to main <div> rendered by <Calendar> component (#384).

What's changed?

Hide previous/next button when prevLabel/nextLabel is set to null (#436). Thanks, @benomatis!

Source code(tar.gz)
Source code(zip)
v3.1.0(May 15, 2020)
What's new?

Added allowPartialRange which when set to true will cause onChange to be called with only partial result given selectRange prop (#351).

Added CSS classes to Navigation label items to allow better custom styling (#333). Thanks, @zigotica!

Added CSS classes to tiles to allow better styling of hovered date range (#373). Thanks, @bywo!

What's changed?

Refactored internals

Added unit tests

Improved documentation on hiding icons (#364). Thanks, @valtism!

Bug fixes

Fixed re-rendering issue in Calendar component (#300). Thanks, @UtkarshPramodGupta!

Source code(tar.gz)
Source code(zip)
v3.0.1(Mar 29, 2020)
Bug fixes

Don't call onActiveStartDateChange, onViewChange, onChange if the values didn't change (#344).

Source code(tar.gz)
Source code(zip)
v3.0.0(Mar 9, 2020)
❗️ = breaking change

What's new?

❗️ React-Calendar now ships with ES6 Modules along with CommonJS modules. This allows for Webpack and other bundlers to optimize your code better.

React-Calendar can now be used as an uncontrolled component. Simply use defaultValue instead of value. More details in README (#217).

Added showDoubleView which causes React-Calendar to show two months/years/… at a time instead of one.

Added formatYear prop which allows you to customize formatting of year numbers (#241).

Added onViewChange callback prop called when the view is changed.

Added default color for "now" tile (current day/month/…) (#112).

Exposed events in in onChange, onClick* functions (#291).

tileClassName and tileContent now also get activeStartDate in arguments (#257).

Added locale to navigationLabel arguments (#317). Thanks, @zorfling!

What's changed?

❗️ React-Calendar no longer supports React versions lower than 16.3 (#219).

❗️ Typings are no longer shipped with React-Calendar package (#272).

❗️ React-Calendar no longer imports its styles by default. If you want to continue to use them, import them separately as instructed in README.

❗️ onActiveDateChange is now onActiveStartDateChange.

❗️ Removed renderChildren backwards compatibility (#283).

React-Calendar now uses @wojtekmaj/date-utils for date calculations.

formatMonthYear is now used on month tiles in YearView.

Reduced code duplication (#277).

Refactored some elements of the package for bundle size optimizations.

Bug fixes

Fixed year not properly formatted in th-TH locale (#241).

Fixed handling dates in year < 100: clicking e.g. January 1st, 50 would cause the calendar to jump to January 1st, 1950.

Fixed Calendar subcomponents re-rendering too often because of callback functions being merged in a suboptimal way.

Source code(tar.gz)
Source code(zip)
v3.0.0-beta.6(Mar 2, 2020)
What's new?

Added locale to navigationLabel arguments (#317). Thanks, @zorfling!

Bug fixes

Fixed activeStartDate not being called on value change (#322).

Fixed handling dates in year < 100: clicking e.g. January 1st, 50 would cause the calendar to jump to January 1st, 1950.

Source code(tar.gz)
Source code(zip)
v3.0.0-beta.5(Dec 21, 2019)
❗️ = breaking change

What's new?

Exposed events in in onChange, onClick* functions (#291).

What's changed?

❗️ React-Calendar no longer imports its styles by default. If you want to continue to use them, import them separately as instructed in README.

Source code(tar.gz)
Source code(zip)
v3.0.0-beta.4(Dec 11, 2019)
❗️ = breaking change

What's changed?

❗️ Remove renderChildren backwards compatibility (#283).

Refactored some elements of the package for bundle size optimizations.

Bug fixes

Fixed Calendar subcomponents re-rendering too often because of callback functions being merged in a suboptimal way.

Source code(tar.gz)
Source code(zip)
v3.0.0-beta.3(Dec 11, 2019)
Bug fixes

Fixed defaultValue, defaultActiveStartDate and defaultView ignored when calculating initial active start date

Source code(tar.gz)
Source code(zip)
v3.0.0-beta.2(Nov 16, 2019)
What's new?

tileClassName and tileContent now also get activeStartDate in arguments (#257).

What's changed?

formatMonthYear is now used on month tiles in YearView.

Reduced code duplication (#277).

Source code(tar.gz)
Source code(zip)
v3.0.0-beta(Nov 16, 2019)
❗️ = breaking change

What's new?

❗️ React-Calendar now ships with ES6 Modules along with CommonJS modules. This allows for Webpack and other bundlers to optimize your code better.

React-Calendar can now be used as an uncontrolled component. Simply use defaultValue instead of value. More details in README (#217).

Added showDoubleView which causes React-Calendar to show two months/years/… at a time instead of one.

Added formatYear prop allows you for custom formatting of year numbers (#241).

Added onViewChange callback prop called when the view is changed.

Added default color for "now" tile (current day/month/…) (#112).

What's changed?

❗️ React-Calendar no longer supports React versions lower than 16.3 (#219).

❗️ Typings are no longer shipped with React-Calendar package (#272).

❗️ onActiveDateChange is now onActiveStartDateChange.

React-Calendar now uses @wojtekmaj/date-utils for date calculations.

Bug fixes

Fixed year not properly formatted in th-TH locale (#241).

Source code(tar.gz)
Source code(zip)
v2.19.2(Sep 6, 2019)
Bug fixes

Updated Babel to 7.5.5 to fix issue with getOwnPropertyDescriptors on IE11 (#232).

Source code(tar.gz)
Source code(zip)
v2.19.1(Aug 12, 2019)
What's new?

Documentation in README has now a separate column for default values.

What's changed?

Syntax optimizations to make Babel output smaller.

Updated Get-User-Locale. This will result in slightly smaller bundles.

Optimized hover performance when selectRange is turned on.

Bug fixes

Fixed some unit tests being parsed by Babel and added to dist.

Fixed TypeScript typings for onClickWeekNumber. Thanks, @JamieEgeberg!

Fixed typo in documentation. Thanks, @MathieuDoyon!

Source code(tar.gz)
Source code(zip)
v2.19.0(May 15, 2019)
What's new?

Major rewrite of React-Calendar's subcomponents resulting in about 20% smaller code (#185).

Add aria-label props for navigation buttons (#189). Thanks, @anushreepatil!

Bug fixes

Fix color contrast ratio for month view (#188). Thanks, @anushreepatil!

Source code(tar.gz)
Source code(zip)
v2.18.1(Jan 22, 2019)
Bug fixes

Fixed typings and documentation for formatMonth, formatMonthYear and formatShortWeekday props (#165).

Source code(tar.gz)
Source code(zip)
v2.18.0(Jan 20, 2019)
What's new?

Weekdays bar now shows full weekday names for accessibility purposes (#151).

What's changed?

React-Calendar now uses Babel 7 for compilation (#124).

Number of internal optimizations which improves performance.

Bug fixes

Number of accessibility fixes (#150).

Fixed accessibility labels ignoring locale prop.

Fix rangeStart/rangeEnd class names not appearing when the day is partially covered (#153).

Source code(tar.gz)
Source code(zip)
v2.17.5(Oct 27, 2018)
Bug fixes

Fixed an issue caused by a change in V8 JS engine which caused date ranges to be returned in reverted order in some cases (affects e.g. Chrome 70).

Fixed Navigation bar not updating prev/next buttons on minDate/maxDate change (#142).

Source code(tar.gz)
Source code(zip)
v2.17.4(Sep 26, 2018)
Bug fixes

Fixed navigation label typings (#118). Thanks, @ValeriiVasin!

Source code(tar.gz)
Source code(zip)
v2.17.3(Sep 11, 2018)
What's changed?

Updated all dependencies.

Bug fixes

Updated get-user-locale dependency which fixes uncaught error on IE11 caused by Array.prototype.includes not being implemented.

Source code(tar.gz)
Source code(zip)
v2.17.2(Sep 3, 2018)
What's changed?

Improved TypeScript typings (#107). Thanks, @same31!

Bug fixes

Fixed PropType error that might have appeared in some cases (#106). Thanks, @same31!

Fixed an issue which caused activeStartDate to be occasionally missing from tileDisabled arguments (#106). Thanks, @same31!

Source code(tar.gz)
Source code(zip)
v2.17.1(Aug 22, 2018)
Bug fixes

Fixed crash on Internet Explorer 11 (#104).

Source code(tar.gz)
Source code(zip)