Change the text color of the days in the previous and following months inside the RangePicker component

I want to change the following Saturday and Sunday text colors on the RangePicker, but my condition is in the Start and End Dates of the RangePicker, the Saturday and Sunday days from the last month and previous month of it should have a lighter color. How can I implement this?

I want to change the text colors of the following Saturdays and Sundays in the RangePicker. However, I have a condition: in the Start and End Dates of the RangePicker, the Saturday and Sunday days from the last and following months should have lighter colors.

Code Sample

The RangePicker component should look like this:

Sample 1 Image, but still lacking Sample 2 Image

For example:

Start Date Month (June):

• June's Saturday and Sunday = Blue and red
• July's Saturday and Sunday = light blue and light red
• May's Saturday and Sunday = light blue and light red

End Date Month (July):

• July's Saturday and Sunday = Blue and red
• August's Saturday and Sunday = light blue and light red
• June's Saturday and Sunday = light blue and light red

Thank you in advance!

You need to set different style for Saturday and Sunday.

import React, { useState } from 'react';
import { DatePicker, Space } from 'antd';
const { RangePicker } = DatePicker;

const App = () => {
  const [isDateMode, setIsDateMode] = useState(true);

  const onPanelChange = (value, mode) => {
    if (mode[0] === 'date' && mode[1] === 'date') {
      setIsDateMode(true);
    } else {
      setIsDateMode(false);
    }
  };
  const cellRender = (current, info) => {
    if (!isDateMode) {
      return info.originNode;
    }
    let className = 'ant-picker-cell-inner';
    if (current.day() === 6) {
      className += ' ant-picker-cell-sa';
    } else if (current.day() === 0) {
      className += ' ant-picker-cell-su';
    }
    return <div className={className}>{current.date()}</div>;
  };

  return (
    <Space direction="vertical" size={12}>
      <RangePicker cellRender={cellRender} onPanelChange={onPanelChange} />
      <style>
        {`
          .ant-picker-cell:not(.ant-picker-cell-in-view)
          .ant-picker-cell-inner.ant-picker-cell-sa {
            color: lightblue;
          }

          .ant-picker-cell.ant-picker-cell-in-view
          .ant-picker-cell-inner.ant-picker-cell-sa {
            color: blue;
          }

          .ant-picker-cell:not(.ant-picker-cell-in-view)
          .ant-picker-cell-inner.ant-picker-cell-su {
            color: #ffcccb;
          }

          .ant-picker-cell.ant-picker-cell-in-view
          .ant-picker-cell-inner.ant-picker-cell-su {
            color: red;
          }
          `}
      </style>
    </Space>
  );
};

export default App;

Code Sample