Add …--weekend class to Weekdays tiles (#490)

Co-authored-by: Wojciech Maj <kontakt@wojtekmaj.pl>
wojtekmaj · Feb 4, 2022 · fbd8bad · fbd8bad
1 parent 8f8d0b1
commit fbd8bad
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/MonthView/Weekdays.jsx b/src/MonthView/Weekdays.jsx
@@ -1,17 +1,20 @@
 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,
 } from '../shared/dateFormatter';
 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>