-
Notifications
You must be signed in to change notification settings - Fork 373
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
customDatesStyles is not working with disabled dates #263
Comments
That is by design. Disabled dates do not receive additional styling, only the default grey color which indicates they are disabled. Please submit a PR to add these props. This is where it should go: |
I actually managed to achieve my partial goal by adding this as my disabledDatesTextStyle.
However, it also applies to the dates that are not in my disabled dates i.e. dates that are disabled by specifying minimum and maximum dates. |
Yes, those dates are all considered disabled. Would a prop to allow |
Hmm, seems like in order to achieve my custom styling, I would need a prop
that would differentiate between disabled dates array and the dates
disabled by minimum and maximum dates.
…On Thu, 14 Jan 2021 at 10:13 PM, Peace ***@***.***> wrote:
Yes, those dates are all considered disabled. Would a prop to allow
customDatesStyles to override disabled dates help achieve what you want?
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#263 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AKCOJOZFAHULYBNDJ5I42DTSZ4Q5PANCNFSM4WBUCZXQ>
.
|
That's the case if you use |
But the problem with customDatesStyle is that it doesn't apply at all to
the disabled dates.
…On Thu, 14 Jan 2021 at 10:24 PM, Peace ***@***.***> wrote:
That's the case if you use disabledDatesTextStyle. However adding another
prop to change its behavior makes it more convoluted and difficult to
maintain. customDatesStyles was created to allow you to style dates
however you wish. That's a more appropriate use of the props.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#263 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AKCOJO6O6LZJ6UTKZJHIWVTSZ4SGRANCNFSM4WBUCZXQ>
.
|
Rename internal `selectedDayContainerStyle` to `computedSelectedDayStyle` to avoid confusion.
I added the flag See the Readme for prop documentation and the example snippet. |
thanks a ton for this! |
Hi,
I have tried to use customDatesStyles for my disabled dates but it seems like it is not working. If I remove the disabledDates, it starts working fine. I am using v7.0.8 and here's the code.
<CalendarPicker width={250} disabledDates={disabledDates} customDatesStyles={customDatesStyles} restrictMonthNavigation onDateChange={(e) => onDateChange(e)} previousComponent={<CalendarIcon title="chevron-left" />} nextComponent={<CalendarIcon title="chevron-right" />} disabledDatesTextStyle={null} selectedDayColor="#EDD08B" todayBackgroundColor="transparent" startFromMonday={false} selectedStartDate={selectedDate} minDate={moment().toDate()} maxDate={moment().add("30", "days").toDate()} dayLabelsWrapper={styles.dayLabelsWrapper} />
My disabledDates array is
Array [ "2021-01-14T00:23:40.483Z", "2021-01-15T00:23:40.483Z", "2021-01-16T00:23:40.487Z", "2021-01-17T00:23:40.489Z", "2021-01-20T00:23:40.489Z", "2021-01-21T00:23:40.489Z", "2021-01-22T00:23:40.489Z", "2021-01-23T00:23:40.489Z", "2021-01-24T00:23:40.489Z", "2021-01-27T00:23:40.489Z", "2021-01-28T00:23:40.489Z", "2021-01-29T00:23:40.489Z", "2021-01-30T00:23:40.489Z", "2021-01-31T00:23:40.489Z", "2021-02-03T00:23:40.489Z", "2021-02-04T00:23:40.489Z", "2021-02-05T00:23:40.489Z", "2021-02-06T00:23:40.489Z", "2021-02-07T00:23:40.489Z", "2021-02-10T00:23:40.489Z", "2021-02-11T00:23:40.489Z", "2021-02-12T00:23:40.489Z", "2021-02-13T00:23:40.489Z", ]
customDatesStyles array is
let customDatesStyles = disabledDates.map((u) => ({ date: moment(u), style: { borderRadius: 10, width: 20, height: 20, backgroundColor: "red", }, }));
This is the actual behavior.
The text was updated successfully, but these errors were encountered: