Calendar not passing down isSelected, or setting data-selected if disabled

[brettr91]

Provide a general summary of the issue here

I'm not sure if this is on purpose?

When a calendar or calendar range is disabled, if a date or date range is selected it will not pass down isSelected to the cell and will not display is data-selected within element.

🤔 Expected Behavior?

That it will still pass down isSelected and data-selected

😯 Current Behavior

It does not pass down isSelected, and does not set the item as data-selected

💁 Possible Solution

Pass down isSelected and set data-selected

🔦 Context

If a calendar is disabled, it could still have a value assigned to it. It would be nice to be able to display this value.

🖥️ Steps to Reproduce

Select Date, click Disabled checkbox in the example

https://codesandbox.io/p/sandbox/elastic-joana-kf8k9v?workspaceId=7d57ca20-32a2-4d32-9ca8-1de01205fd9e

Version

react-aria-components 1.3.3

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

n/a

🕷 Tracking Issue

No response

[Arpan1089]

import { Calendar } from '@adobe/react-spectrum';

const MyCalendar = () => {
const handleDateSelect = (date) => {
console.log('Selected date:', date);
};

return (
<Calendar
isDisabled={(date) => /* Logic to disable dates /}
onSelect={handleDateSelect}
renderDay={(date) => (
<div
data-selected={/ condition to set selected /}
style={{ opacity: / condition to disable visual state */ }}
>
{date.getDate()}

)}
/>
);
};
Try this

[alokbharti21]

Thanks, seems working for me

[BratSneh]

import { Calendar } from '@adobe/react-spectrum';

const MyCalendar = () => { const handleDateSelect = (date) => { console.log('Selected date:', date); };

return ( <Calendar isDisabled={(date) => /* Logic to disable dates /} onSelect={handleDateSelect} renderDay={(date) => ( <div data-selected={/ condition to set selected /} style={{ opacity: / condition to disable visual state */ }} > {date.getDate()} )} /> ); }; Try this

Thanks It is working for me.

[brettr91]

import { Calendar } from '@adobe/react-spectrum';

const MyCalendar = () => { const handleDateSelect = (date) => { console.log('Selected date:', date); };

return ( <Calendar isDisabled={(date) => /* Logic to disable dates /} onSelect={handleDateSelect} renderDay={(date) => ( <div data-selected={/ condition to set selected /} style={{ opacity: / condition to disable visual state */ }} > {date.getDate()} )} /> ); }; Try this

Thanks, I did something similar for react-aria-components.

If anyone else wants to fix this issue for react-aria-components, I recommend using isSelected when isDisabled is set to false and using a comparison if isDisabled is set to true.