Question 73236 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Fluent UI datetime picker current date color not changing issue in react – Reactjs

I am working with Fluent UI datetimepicker. I am trying to change color in today. But its not changing default blue color.

enter image description here

const DatetimePickerFileds = (theme) => {
  return mergeStyleSets({
    root: { 
      selectors: { 
       ".dayIsToday":{ "background-color":theme.colors.addovation70Green},  
      },   
    }, 
  });
};



<DatePicker  
 placeholder="Select a date..."
 ariaLabel="Select a date" 
 styles={controlStyleTheme.DateTimePickerStyle}
/>

Please give some suggestion to add custom color for this.

This is my sample

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found it my self. You can use this designer tool to create custom theme.

    check this website


  2. 0

    DatePicker wraps Calendar Component. You can use calendarProps to modify styles:

    <DatePicker
  ...
  calendarProps={{
    styles: {
      root: {
        selectors: {
          '.ms-CalendarDay-dayIsToday': { backgroundColor: '#f00!important' }
        }
      }
    }
  }}
/>

    Codepen working example.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search