How to unstyle the weekend days?

[wojtekmaj]

@wojtekmaj Greetings. I have to unstyle the weekend days (remove the red color) would it be possible?
Thanks a lot for your attention and cool calendar

Originally posted by @pedro-surf in #334 (comment)

[wojtekmaj]

@pedro-surf You have several options:

• Remove default styling and build your own based on the original one available in this repository
• Remove default styling and build your own from the ground up
• Overwrite .react-calendar__month-view__days__day--weekend class with your own styling.

[MichaelLiss]

Hi,

I have added

.react-calendar__month-view__days__day--weekend{
  color: #2361a8;
}

to my App.css file, but the weekends are still showing up as the default color (red)

Here is the file that uses your calendar control

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import 'react-calendar/dist/Calendar.css';
import '../../App.css';
import ReactCalendar from 'react-calendar';

var calendar_all_debugThis = true;
var msgPrefix = 'Calendar';

class Calendar extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  // we want this to be called and loaded as soon as possible
  componentDidMount() {
    var debugThis = false || calendar_all_debugThis;
    if (debugThis) {
      console.log(msgPrefix, 'componentDidMount');
    }
  }

  tileDisabled = ({ date, view }) => {
    console.log(JSON.stringify(this.props.auth));

    var isGYPDN = this.props.auth.user.isGYPDN;

    if (isGYPDN) {
      return false; // allow any date selection by GYPDN user !
    } else {
      if (view === 'month') {
        // only allow selecting today's date and future dates
        var q = new Date();
        var m = q.getMonth();
        var d = q.getDate() - 1;
        var y = q.getFullYear();
        var compare = new Date(y, m, d);

        //console.log('incoming date', JSON.stringify(date));
        //console.log('today date', JSON.stringify(q));
        //console.log('day', JSON.stringify(d));
        //console.log('compare date', JSON.stringify(compare));

        return date <= compare;
      }
    }
  };

  tileClassName = ({ date, view }) => {
    // Add class to tiles in month view only
    if (view === 'month') {
      return 'calendar_day';
    }
  };

  render() {
    var debugThis = false || calendar_all_debugThis;
    if (debugThis) {
      console.log(msgPrefix, 'render ');
    }

    return (
      <div className='Calendar'>
        <h1>Calendar</h1>
        <div className='container'>
          <div>
            <ReactCalendar calendarType='US' tileDisabled={this.tileDisabled} tileClassName={this.tileClassName} />
          </div>
        </div>
      </div>
    );
  }
}

Calendar.propTypes = {
  auth: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.Auth,
});

export default connect(mapStateToProps)(Calendar);

[onethps]

.react-calendar__month-view__days__day--weekend {
color: inherit
}