Is it possible to style the weekend columns differently? #1780
Unanswered
MelissaHoweEmis
asked this question in
Support
Replies: 1 comment 1 reply
-
@MelissaHoweEmis if you add a modifier for each weekday, you can assign to each of them a different class name, to which apply your desired style: <DayPicker
// Assign a modifier for each weekday
modifiers={{
sunday: { dayOfWeek: [0] },
monday: { dayOfWeek: [1] },
tuesday: { dayOfWeek: [2] }
}}
// Assign a class name for each weekday-modifier
modifiersClassNames={{
sunday: "rdp-sunday",
monday: "rdp-monday",
tuesday: "rdp-tuesday"
}}
// Or assign an inline-style for each modifier
modifiersStyles={{
sunday: { background: 'red' },
}}
/> .rdp-sunday { background: rebeccapurple; color: white }
.rdp-monday { background: darkviolet; color: white }
.rdp-tuesday { background: hotpink; color: white } Will render: See this Code Sandbox: https://codesandbox.io/s/react-daypicker-forked-207wbc?file=/src/App.tsx:222-1030 |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Is it possible to style the weekend columns differently to the weekday? Such as a background to the column or text colour? Thank you
Beta Was this translation helpful? Give feedback.
All reactions