-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Marks holidays in the calendar #4203
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✅ This pull request was sent to the PullRequest network.
@tanmayIntelli you can click here to see the review status or cancel the code review job.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PullRequest Breakdown
Reviewable lines of change
+ 441
- 101
37% Markdown
33% JavaScript (tests)
24% JavaScript
6% SCSS
Type of change
Feature - These changes are adding a new feature or improvement to existing code.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This PR is well-organized and documented. It is good to see proper unit test coverage as well—that helps quite a bit. Overall, I didn't see too many major issues.
Throughout the review, I had some minor feedback. I did find one bug with the manual implementation of pad start, and it's worth looking into removing that outright in favor of String.padStart
if possible.
The only larger concern is the place where we're attempting to mutate props. That should definitely be addressed.
Otherwise, this looks quite good. Thanks for the excellent PR write-up with screenshots.
Reviewed with ❤️ by PullRequest
src/date_utils.js
Outdated
return null; // Returning null to indicate no valid date provided | ||
} | ||
|
||
const dateParts = dateString.split("-"); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As a quick gut check, are we sure this part of the implementation is necessary?
Could we achieve everything here with the following?
- new Date(dateString)
- A check for "Invalid Date"
The Date constructor is pretty good at parsing date strings like "2023-08-12"
as it is. What use cases aren't covered by that?
🔹 Simplify Code (Nice to have)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The thought here was to keep it user friendly. For Christmas day holiday, I want the user to enter date as 2023-12-25 instead of 2023-11-25.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Adding my thoughts here because I believe this would definitely get flagged in an open-source pull request review.
Generally speaking, using the Date(...)
parser is preferred for dates because it generally adheres to the ISO 8601 format [1].
In rare circumstances it does not, so sometimes custom parsers are used. However most of the time, users use something like moment.js
to manage ISO 8601 compliance with the dates.
I would refer to [2] for a StackOverflow discussion on the matter. My preference would be to let Date(...) handle this logic, but either way I think it should adhere as close as possible to the ISO standard (which this does not, since it would accept "2023-8-12".
Speaking strictly for myself, making something like this more flexible / user friendly may be more trouble than it's worth.
Also just to restate: If this were strictly a internal tool, this comment would matter less. But the comments at the top of the pullrequest mentioned to explicitly flag issues that open source contributors would comment on, which is why I'm mentioning it here.
[1] https://en.wikipedia.org/wiki/ISO_8601
[2] https://stackoverflow.com/questions/4829569/parsing-iso-8601-date-in-javascript
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I understand that I am being asked to use Date() to convert the input string to date format. At the end of the function, I parse it through Date() parser before returning.
I am still unable to understand what I am missing here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I understand that I am being asked to use Date() to convert the input string to date format. At the end of the function, I parse it through Date() parser before returning.
I think my main comment is that it's probably not worth it to have anything other than Date(...) parse the value and check whether it's valid. I understand the intention to make the logic proceeding that more user friendly, but by my read it's more likely to make it more confusing.
However if you want to leave it, it's not explicitly incorrect, just likely to get flagged in a open-source repo for review.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am still unable to understand what I am missing here.
Sorry that this became confusing for you. I think your point on user friendliness is well-made, and I agree that it should be nice and simple for consumers of this component to specify the dates.
- The point we're addressing here is actually more to do with how specifically we obtain a valid
Date
from the input. - It is more favorable to defer to an existing implementation from JS rather than implement our own manual parsing.
- This reduces the code surface area, which means less to maintain and less likelihood of bugs now and in the future.
For Christmas day holiday, I want the user to enter date as 2023-12-25 instead of 2023-11-25.
I totally understand your concern here. This is actually not an issue specifically because it is a string.
Passing in arguments of type number
does require you to offset the month by 1
new Date(2023, 11, 25).toDateString() // Mon Dec 25 2023'
Passing in a parseable date string does not require you to offset the month by 1
new Date("2023-12-25").toDateString(); // Mon Dec 25 2023
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I finally understand the concern now. Thanks to the explanation and the examples you shared. With using isValid
from date-fns
it eliminated the requirement of this function.
src/date_utils.js
Outdated
const month = parseInt(dateParts[1]); | ||
const day = parseInt(dateParts[2]); | ||
|
||
if (isNaN(year) || isNaN(month) || isNaN(day)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As a best practice, since these are already parsed, consider Number.isNaN
here.
It is a more robust version of the original, global isNaN() function.
source
🔹 Best Practices (Nice to have)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, updated.
src/date_utils.js
Outdated
const classNamesArr = dateClasses.get(key) || []; | ||
if (!classNamesArr.includes(defaultClassName)) { | ||
classNamesArr.push(defaultClassName); | ||
classNamesArr.push(holidayDates[i].holidayName); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see that this is called classNamesArr
, but then we're also using it to hold the name of the holiday itself—which I'm assuming is entries like "Thanksgiving Day".
In that case, it doesn't really seem to be an array of class names.
More importantly, is there a reason to use this tuple format rather than just a plain object, such as:
{ className, holidayName }
This would make the code easier to read and maintain, since any developer working on it does not need to remember what's in the first or second position, or risk confusing the two.
🔹 Simplify Code (Nice to have)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changed the structure to { className, holidayName }
src/day.jsx
Outdated
if (holidays.has(dayStr)) { | ||
return [holidays.get(dayStr)[0]]; | ||
} | ||
return; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
removed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removed
src/day.jsx
Outdated
getTitle = () => { | ||
const { day, holidays = new Map() } = this.props; | ||
|
||
const strMon = |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am sorry but I couldn't understand what you are trying to convey.
const strMon = day.getMonth() > 9 ?
${day.getMonth() + 1}:
0${day.getMonth() + 1};
By the time day comes here, it is already formatted using Date(). For October, day.getMonth() will return 9. Thus, at the return we will add 1 and append a 0 to it. So it will be 10 not 010.
Please let me know if I misunderstood something.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry, I couldn’t understand what you are trying to convey here.
By the time control comes to this function, the date is already formatted in Date() format. For October, the day.getMonth() will return 9. Hence, using the check here, since 9 is not greater than 9, it will return (9+1).
Let me know if I misunderstood something.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You have since replaced this code, so it is less important.
But just for your understanding, here is a reproducible example with your previous implementation:
function getCompareDt(day) {
const strMon =
day.getMonth() > 9 ? `${day.getMonth() + 1}` : `0${day.getMonth() + 1}`;
const strDate =
day.getDate() > 9 ? `${day.getDate()}` : `0${day.getDate()}`;
const stryear = day.getFullYear();
return `${strMon}.${strDate}.${stryear}`;
}
getCompareDt(new Date("2023-10-01")) // returns '010.01.2023'
Notice that the 10
is padded with an extra 0
.
The fix is to change it to:
const strMon =
day.getMonth() + 1 > 9 ? `${day.getMonth() + 1}` :
src/day.jsx
Outdated
getTitle = () => { | ||
const { day, holidays = new Map() } = this.props; | ||
|
||
const strMon = |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a reason we can't just use the String.padStart
method here? That would make this manual implementation unnecessary.
const strMon = `${day.getMonth() + 1}`.padStart(2, '0');
const strDate = `${day.getDate()}`.padStart(2, '0');
🔹 Simplify Code (Nice to have)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, this will achieve the same thing. Updated
src/day.jsx
Outdated
day.getMonth() > 9 ? `${day.getMonth() + 1}` : `0${day.getMonth() + 1}`; | ||
const strDate = | ||
day.getDate() > 9 ? `${day.getDate()}` : `0${day.getDate()}`; | ||
const stryear = day.getFullYear(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
updated.
src/day.jsx
Outdated
const strDate = | ||
day.getDate() > 9 ? `${day.getDate()}` : `0${day.getDate()}`; | ||
const stryear = day.getFullYear(); | ||
const compareDt = `${strMon}.${strDate}.${stryear}`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's correct. Have updated to use formatDate
src/index.jsx
Outdated
@@ -356,6 +359,10 @@ export default class DatePicker extends React.Component { | |||
: newDate(); | |||
|
|||
calcInitialState = () => { | |||
// Convert the date from string format to standard Date format | |||
this.props.holidays?.forEach((day) => { | |||
if (day.date.length <= 10) day.date = stringToDate(day.date); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This seems like a code smell.
- We shouldn't be internally mutating the values of props. This is an anti-pattern in React, which breaks unidirectional data flow.
- This problem of needing to manually adjust the date strings based on length seems like something that shouldn't be necessary at this point in the code.
Perhaps there is a cleaner way to make sure we don't run into this problem to begin with. I'd recommend revisiting this approach to see if it could be avoided outright.
🔸 Reduce Future Bugs (Important)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree that we shouldn't mutate value of props. Thanks for pointing this. I am using a local variable to achieve this now.
test/date_utils_test.js
Outdated
}); | ||
}); | ||
|
||
describe("stringToDate", () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you.
test/day_test.js
Outdated
const holidays = new Map([ | ||
[ | ||
"08.15.2023", | ||
["react-datepicker__day--holidays", "India's Independence D"], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Don't know how I missed it. This was unintentional. Have fixed it now
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overall looks good.
- I left some minor comments about variable naming. Some of these may be intentional, I made sure to note this in the comments.
- I agree with the other reviewer about the parsing of date values. I left some references to ISO 8601 date formatting and some of the nuances when using
Date(...)
to parse these values. - There were a handful of cases where unused code or un-mutated variables could be slightly optimized.
- I did flag one potential issue with the use of hasOwnProperty vs use of the
in
operator. I left comments and links to various tradeoffs between the two. Note that this also may be intentional.
Thank you for adding exhaustive tests to the new code. That is often overlooked in open source contributions but is critically important to keeping the open source ecosystem healthy.
Reviewed with ❤️ by PullRequest
@@ -289,6 +290,10 @@ export default class exampleComponents extends React.Component { | |||
title: "Highlight dates with custom class names and ranges", | |||
component: HighlightDatesRanges, | |||
}, | |||
{ | |||
title: "Holidays dates", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated
docs/datepicker.md
Outdated
| `popperClassName` | `string` | | | | ||
| `popperContainer` | `func` | | | | ||
| `popperModifiers` | `object` | | | | ||
| `popperPlacement` | `enumpopperPlacementPositions` | | | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is an existing string. I haven't made any changes here.
docs/datepicker.md
Outdated
| `popperContainer` | `func` | | | | ||
| `popperModifiers` | `object` | | | | ||
| `popperPlacement` | `enumpopperPlacementPositions` | | | | ||
| `preventOpenOnFocus` | `bool` | false | When this is true, the datepicker will not automatically open when the date field is focussed | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same as above. I did not update any existing entry.
const dayStr = formatDate(day, "MM.dd.yyyy"); | ||
// Looking for className in the Map of {day string: {className, holidayName}} | ||
if (holidays.has(dayStr)) { | ||
return [holidays.get(dayStr).className]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes this is intentional. I have updated the comment.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I left a clarification re: ISO timestamp parsing.
Generally it is OK to leave the logic as-is, I just believe it's highly likely to get flagged in an open-source repo.
Reviewed with ❤️ by PullRequest
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Clarified the point with example on how to allow JS to handle the parsing.
Reviewed with ❤️ by PullRequest
src/index.jsx
Outdated
@@ -356,6 +359,11 @@ export default class DatePicker extends React.Component { | |||
: newDate(); | |||
|
|||
calcInitialState = () => { | |||
// Convert the date from string format to standard Date format | |||
const modifiedHolidays = this.props.holidays?.map((day) => { | |||
if (day.date.length <= 10) day.date = stringToDate(day.date); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK, this is where we could simplify things and perhaps make stringToDate
redundant.
This library is already using date-fns
, which has a function called isValid
. It determines whether an existing Date
instance is valid or not.
import { isValid } from 'date-fns';
Rather than checking length and doing custom parsing, we could simply do the following:
const modifiedHolidays = holidays
.reduce((accumulator, holiday) => {
const date = new Date(holiday.date);
if (!isValid(date)) {
return accumulator;
}
return [...accumulator, { ...holiday, date }];
}, []);
The above example does a reduce
(rather than a map
followed by a filter
).
It simply attempts to parse the date
string, with which YYYY-MM-DD
is valid.
Then, it uses isValid
to determine if we received a valid Date instance.
If not, it filters it out with return accumulator
.
Otherwise, it adds it to the list.
Example
The following input
const holidays = [
{ date: "2023-11-23", holidayName: "Thanksgiving" },
{ date: "2023-12-25", holidayName: "Christmas" },
{ date: "asdfasdf", holidayName: "Fake Holiday 1" },
{ holidayName: "Fake Holiday 2" },
{},
];
Produces this output:
[
{
date: 2023-11-23T00:00:00.000Z,
holidayName: 'Thanksgiving'
},
{
date: 2023-12-25T00:00:00.000Z,
holidayName: 'Christmas'
}
]
demonstrating that only those with valid dates made it in.
🔹 Simplify Code (Nice to have)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Added clarification on bug in previous implementation with reproducible example
- Pointed out 2 potential edge cases
Reviewed with ❤️ by PullRequest
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PullRequest reviewed the updates made to #4203 since our last review was posted. This includes comments that have been posted by non-PullRequest reviewers. No further issues were found.
Reviewed by:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch with the duplicates.
Current approach looks good, and if it were implemented differently that would likely need to get thought out.
Just wanted to add that there are many use cases for duplicates and I know other calendar libraries in other languages support them, so this may get mentioned in open source reviews.
Reviewed with ❤️ by PullRequest
@@ -1024,4 +1058,56 @@ describe("Day", () => { | |||
}); | |||
}); | |||
}); | |||
|
|||
describe("title", () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could be useful to add a quick test for current duplicates behavior—demonstrating that it's intended.
e.g., "uses the first holiday for a given date as the title"
This is also useful if another PR later changes the feature—alerting the submitter to the fact that they'll need to update the test for the new behavior.
🔹 Improve Test Coverage (Nice to have)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have updated the source code since, it would be a likely scenario that a particular day can have more than one event/festival. I have added a test case covering the same.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The latest improvements look quite good. I had a few notes, but I don't think I'll have much more feedback after this point, as all of the main concerns have already been addressed.
Nice work on this one, and thanks again for your patience during all of the review feedback.
Suggestion for a future PR
I had one additional point that I don't think should be addressed in this PR. This PR has already received quite a lot of feedback and changes as-is.
However, one lingering thought here is that the UX on the holiday tooltip could use some limits to it.
Especially now that more than one holiday can be in the tooltip, it is worth considering what one or two very long holiday names would produce in terms of UX.
For example, consider Indonesia's Independence Day, which in some cases could be represented as:
Hari Proklamasi Kemerdekaan Republik Indonesia
If there were other events on that day, it might degrade the UX a bit.
It is worth thinking through what that might look like in an ideal situation—perhaps just ellipses beyond a certain length.
Either way, I think it's better addressed in a separate, simpler task where that can be the focus.
Reviewed with ❤️ by PullRequest
src/date_utils.js
Outdated
return false; | ||
} | ||
|
||
for (let i = 0; i < array1.length; i++) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated to use every
src/day.jsx
Outdated
const { day, holidays = new Map() } = this.props; | ||
const compareDt = formatDate(day, "MM.dd.yyyy"); | ||
if (holidays.has(compareDt)) { | ||
return holidays.get(compareDt).holidayName |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: does this check still suffice?
If holidayName
can be an empty array, that would mean that a truthy check would pass here for rendering the string, and this would appear as an empty string.
I suppose it's not a huge deal since the fallback case is just an empty string. But I'd think we'd want to check for array length here to do it right.
🔹 Best Practices (Nice to have)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated the check.
Codecov Report
@@ Coverage Diff @@
## main #4203 +/- ##
==========================================
- Coverage 93.75% 93.46% -0.29%
==========================================
Files 20 20
Lines 1904 1942 +38
Branches 464 472 +8
==========================================
+ Hits 1785 1815 +30
- Misses 43 48 +5
- Partials 76 79 +3
|
test/day_test.js
Outdated
const shallowDay = renderDay(day, { | ||
holidays: holidays, | ||
}); | ||
console.log("TANMAY: ", shallowDay.debug()); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for that save. Removed it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for addressing the remaining changes.
I would echo the other reviewer's recommendations for UI changes for multiple holidays on the tooltip. I would add that tooltips are often what screen readers use for ADA compliance.
Reviewed with ❤️ by PullRequest
I would try to get that accomplished as part of a separate task. |
Is it good to be merged ? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do I need to tag someone here to get it merged ? This is my first contribution , I am not well versed with the steps to be followed. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey,
Thanks for the contribution @tanmayIntelli - I think your MR looks good but there's a little bit of noise in the diffs yet that make it hard to review.
Could you remove the noise introduced (specifically referring to the trailing commas, such as in components/Examples/index.js:534
, calendar.jsx:57
, calendar.jsx:101
, ... index.jsx:168
, month.jsx:48, 71
and so on?)
I'm not against those changes but generally speaking it makes reviewing harder when there's that much noise, that it's best left to a separate MR to address so that the git blame
lines up with that change too.
I'll be happy to check if everything works and get it merged after that, cc @martijnrusschen - do you agree with this sentiment?
Update index.js to remove trailing commas
Update calendar.jsx to remove trailing commas
Update date_utils.js to remove trailing commas
Update day.jsx to remove trailing commas
Update index.jsx to remove trailing commas
Update month.jsx to remove trailing commas
Update week.jsx to remove trailing commas
Update date_utils_test.js to remove trailing commas
Update day_test.js to remove trailing commas
@Zarthus I have removed the trailing commas that I could. Please review. Thanks |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks again @tanmayIntelli for your patience during this review and for all of your hard work on adding this feature!
Reviewed with ❤️ by PullRequest
Thanks Ryan and Luciano for review and great suggestions. Appreciate it. |
With this , now the consumers will be able to provide a list of holiday and its name. On the Calendar, once the user hover over the holidays, it will show an overly with the name of the holiday. Holidays will be marked with different colour background and are selectable.
While consuming the react-datepicker, the dates to be marked as holidays will be provided in YYYY-MM-DD format.