customDatesStyles is not working with disabled dates

[RazaShehryar]

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.

[peacechen]

That is by design. Disabled dates do not receive additional styling, only the default grey color which indicates they are disabled.
There is a disabledDatesTextStyle prop to override the number text inside each date. New props disabledDatesStyle and selectedDisabledDatesStyle would need to be added to override the container.

Please submit a PR to add these props. This is where it should go:
https://github.com/stephy/CalendarPicker/blob/master/CalendarPicker/Day.js#L202

[RazaShehryar]

@peacechen

I actually managed to achieve my partial goal by adding this as my disabledDatesTextStyle.

{ overflow: "hidden", width: 22, height: 22, borderRadius: 11, backgroundColor: "red", textAlign: "center", color: "white", paddingTop: 5, justifyContent: "center", }

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.

[peacechen]

Yes, those dates are all considered disabled. Would a prop to allow customDatesStyles to override disabled dates help achieve what you want?

[RazaShehryar]

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> .

[peacechen]

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.

[RazaShehryar]

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> .

[peacechen]

I added the flag allowDisabled to customDatesStyles to give you the ability to style the disabled dates as you wish. This has been published in 7.0.9.

See the Readme for prop documentation and the example snippet.
https://github.com/stephy/CalendarPicker#custom-styling-individual-dates

[RazaShehryar]

I added the flag allowDisabled to customDatesStyles to give you the ability to style the disabled dates as you wish. This has been published in 7.0.9.

See the Readme for prop documentation and the example snippet.
https://github.com/stephy/CalendarPicker#custom-styling-individual-dates

thanks a ton for this!