Replies: 1 comment
-
Hi @RageCrezz, I understand you want to display multiple ranges in DayPicker with Currently multiple ranges is not supported by the "range" mode, but you can implement a similar behavior toggling off the selection mode, and implement one by yourself. Switching to default mode , add onDayClick<CalendarComp
- mode="range"
+ mode="default"
selected={ranges}
- onSelect={onSelect}
+ onDayClick={doSomethingWithTheClickedDay}
modifiers={dateRangeModifiers(ranges)}
{...rest}
/> Changing the background colorIf you want to change the background color for each range, using You can however use a different component to render the day cell. Find the matching range and its color and override the background color of the 1. add a new component called DayWithColor:/** Returns the bgColor for the given date. */
function findColorForDate(date: Date) {
return selectedRanges.find((range) => {
return range.from && range.from <= date && range.to && date <= range.to;
})?.bgColor;
}
/**
* The content of a day cell – will override the background color if the day is in a range.
* This basically rewrites https://github.com/gpbl/react-day-picker/blob/main/src/components/Day/Day.tsx
*/
export function DayWithColor(props: DayProps): JSX.Element {
const buttonRef = useRef<HTMLButtonElement>(null);
const { isHidden, isButton, divProps, buttonProps } = useDayRender(
props.date,
props.displayMonth,
buttonRef
);
const dateColor = findColorForDate(props.date);
if (isHidden) {
return <div role="gridcell"></div>;
}
if (!isButton) {
const divStyle = {
...divProps.style,
backgroundColor: dateColor ?? divProps.style?.backgroundColor
};
return <div {...divProps} style={divStyle} />;
}
const buttonStyle = {
...buttonProps.style,
backgroundColor: dateColor ?? buttonProps.style?.backgroundColor
};
return (
<Button name="day" ref={buttonRef} {...buttonProps} style={buttonStyle} />
);
} 2. Adjust DayPicker to use this component as
|
Beta Was this translation helpful? Give feedback.
-
Hello,
I'm relatively new to contributing on GitHub, so I appreciate your patience. 😄
While browsing through the issue list, I stumbled upon a solution for adding an array of ranges to the react-day-picker library. Below is the current code snippet I've been working with:
As you can see, I've modified the DateRange type to include a
bgColor
property. My objective is to leverage thisbgColor
property to dynamically generatemodifierStyles
forrange_start
andrange_end
. Ultimately, I'm aiming to achieve different background colors for the start and end of each date range.Any insights or suggestions on how to implement this would be greatly appreciated!
Thank you in advance for your assistance!
Beta Was this translation helpful? Give feedback.
All reactions