Changed the MiniCal component to gray out weekends and holidays

[namanhboi]

Summary

Weekends and Holidays are now grayed out in MiniCal component. You can add new holidays by adding new Holiday objects to the holidays list.

I also changed some css styling to make it clear which day is currently selected and made it so that when you increase or decrease the month, the selected date stays the same while the highlighted date still changes. This was changed because if selected dates are automatically set by increasing or decreasing the month then it would land on disabled days like weekends or holidays.

Here, 1st of May is selected

Now, if we decrease the month to April, the selected date stays the same and the highlighted date is grayish. This was done because there might be holidays (in this case spring break) when we increase or decrease the month so I wouldn't want these dates to be selectable. Here, you can't click on 1st of April because it's in spring break.

Go back to March

This pull request is the first step towards integrating the MiniCal component into date inputs site wide.

I have not yet integrated this changed MiniCal into a modal to replace the Input component with input = "date".

Test Plan

I plan to integrate MiniCal into one of the modals and check if the forms are submitted correctly.

[dti-github-bot]

[diff-counting] Significant lines: 44.

[Atikpui007]

This looks good.
The grayed out dates show as expected and the functionality works as expected.
This is a good PR

[raissaji]

Your code looks good, I don't see/foresee any problems with the implementation. I like the idea behind greying out the date selected when you increase or decrease the month. However, in the case where you switch to a month that has a date greyed out, say April 1st, this doesn't seem intuitive to me because the user would have to switch the date anyway. Wouldn't it make more sense to automatically select the first "allowed" date during each month instead? Great job on the PR and happy to discuss with the team!

[namanhboi]

Your code looks good, I don't see/foresee any problems with the implementation. I like the idea behind greying out the date selected when you increase or decrease the month. However, in the case where you switch to a month that has a date greyed out, say April 1st, this doesn't seem intuitive to me because the user would have to switch the date anyway. Wouldn't it make more sense to automatically select the first "allowed" date during each month instead? Great job on the PR and happy to discuss with the team!

Yeah I was thinking the same thing, and thanks for reminding me to look into this later. The datapicker is an component from an external librarys, so I think I would have to override a lot of stuff to make it land on the first available date. I might consider removing the highlighted date when the user switch months all together.