Выделение выходных дней (в субботу и воскресенье) в окне выбора материала для пользовательского интерфейса

Question

У меня есть требование, в котором я хочу, чтобы мой сборщик даты выделял выходные дни, т.е. субботу и воскресенье. Я использую материал-Ui-datepicker https://material-ui-pickers.dev/demo/datepicker. Я пробовал по-разному, но не работает. Пожалуйста, кто-нибудь может помочь мне в этом?

Answer 1

Вы можете использовать renderDay проп. Это позволяет настроить любой день.

Вот официальный пример того, как изменить отображение случайного дня. В основном вам нужно изменить внешний вид на выходные. https://material-ui-pickers.dev/demo/datepicker#customization

Пример функции для v3

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

  return dayComponent
}

Пример функции для v4

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

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