From fbd8bad8efcbfdc1cb5156c8b5f19411eac5d0b5 Mon Sep 17 00:00:00 2001
From: fffed <47778360+fffed@users.noreply.github.com>
Date: Fri, 4 Feb 2022 15:51:28 +0300
Subject: [PATCH] =?UTF-8?q?Add=20`=E2=80=A6--weekend`=20class=20to=20Weekd?=
 =?UTF-8?q?ays=20tiles=20(#490)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wojciech Maj <kontakt@wojtekmaj.pl>
---
 src/MonthView/Weekdays.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/MonthView/Weekdays.jsx b/src/MonthView/Weekdays.jsx
index 67cbf9c0..a3a1f84b 100644
--- a/src/MonthView/Weekdays.jsx
+++ b/src/MonthView/Weekdays.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
+import mergeClassNames from 'merge-class-names';
 import { getYear, getMonth, getMonthStart } from '@wojtekmaj/date-utils';
 
 import Flex from '../Flex';
 
-import { getDayOfWeek } from '../shared/dates';
+import { getDayOfWeek, isWeekend } from '../shared/dates';
 import {
   formatWeekday,
   formatShortWeekday as defaultFormatShortWeekday,
@@ -12,6 +14,7 @@ import {
 import { isCalendarType } from '../shared/propTypes';
 
 const className = 'react-calendar__month-view__weekdays';
+const weekdayClassName = `${className}__weekday`;
 
 export default function Weekdays(props) {
   const {
@@ -38,7 +41,13 @@ export default function Weekdays(props) {
     const abbr = formatWeekday(locale, weekdayDate);
 
     weekdays.push(
-      <div key={weekday} className={`${className}__weekday`}>
+      <div
+        key={weekday}
+        className={mergeClassNames(
+          weekdayClassName, 
+          isWeekend(weekdayDate, calendarType) && `${weekdayClassName}--weekend`
+        )}
+      >
         <abbr aria-label={abbr} title={abbr}>
           {formatShortWeekday(locale, weekdayDate).replace('.', '')}
         </abbr>