CODEWITHSUNDEEP
reactjsdatepickermaterial-ui
Dave Smith
Dave Smith

Reputation: 69

Highlighting weekend days (sat and sun) in Material UI date picker

I have requirement wherein I want my date picker to highlight weekend days i.e saturday and sunday. I have been using material-Ui-datepicker. I tried various way but not working. Please anyone can help me on this?

Upvotes: 1

Views: 5169

Answers (2)

AbhinSudha
AbhinSudha

Reputation: 1

import {isSaturday} from "date-fns";

const CustomDay = (props) => {
    const isSaturdayHighlighted = isSaturday(props.day);
    const matchedStyles = isSaturdayHighlighted
        ? { backgroundColor: "#ffe8e8", color: "#ff0000" } // Add your custom styles for highlighting Saturdays
        : {};
    return <PickersDay {...props} sx={{ ...matchedStyles }} />;
};

<DatePicker
slots={{ day: CustomDay }}
/>

Upvotes: 0

Dmitriy Kovalenko
Dmitriy Kovalenko

Reputation: 3616

You can use renderDay prop. It allows customizing any day.

Here is an official example of how to change displaying of random day. You basically need to change the appearance for weekends. https://material-ui-pickers.dev/demo/datepicker#customization

Example of function for v3

renderDay={(day, selected, dayComponent) => { 
  if (isWeekend(day)) {
    return React.cloneElemnt(dayComponent, { className: 'your-css' })
  } 

  return dayComponent
}

Example of function for v4

renderDay={(day, selected, DayProps) => { 
  if (isWeekend(day)) {
    return <Day {...DayProps} className={clsx(DayProps.classname, 'your-css')} /> 
  } 

  return <Day {...DayProps} />
}

Upvotes: 2

Related Questions