CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Youssef Lotfi
Youssef Lotfi

Reputation: 43

change style of calendar component in react js

I wanted to change my calendar component , from an old one to new one , they both exist on the website , but the new one isn't working, I want to make it work , when the user choose a date, it reacts with the website this is my old one : old calendar component

This is the Code :

import 'd3-transition';
import React, { Component } from 'react';

import { connect } from "react-redux";
import {  setDatePrecision, nextDate, previousDate, loadWords, loadArticles } from "../redux/actions";

class DaySelector extends Component {
  state = {
    datePrecision: "day",
    selectedDate: new Date()
  };

  render() {
    const rthis = this.props;

    const prev = () => {
      rthis.previousDate();

      this.props.loadWords();

      this.props.loadArticles();
    };

    const next = () => {
      rthis.nextDate();
      this.props.loadWords();
      this.props.loadArticles();
    }

    const dayPrecision = () => {
      rthis.setDatePrecision("day");
      this.props.loadWords();
      this.props.loadArticles();
    }

    const monthPrecision = () => {
      rthis.setDatePrecision("month");
      this.props.loadWords();
      this.props.loadArticles();
    }
  
    const current_date = this.props.selectedDate;
    const datePrecision = this.props.datePrecision;
   
    const year = current_date.getFullYear();
    const month = current_date.getMonth() + 1;
    const day = current_date.getDate();

    return (
      <div>
        <a href="#day" onClick={dayPrecision}>day </a> 
        <a href="#month" onClick={monthPrecision}>month </a> 
        <a href="#prev" onClick={prev}>&lt;&lt;&lt;</a> 
        {datePrecision === "day" ? String(day).padStart(2, "0") + "/" : ""}{String(month).padStart(2, "0")}/{year} 
        <a href="#next" onClick={next}>&gt;&gt;&gt;</a>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    selectedDate: state.wordsReducer.selectedDate,
    datePrecision: state.wordsReducer.datePrecision,
  }
};
export default connect(mapStateToProps, { setDatePrecision, nextDate, previousDate, loadWords, loadArticles })(DaySelector);

I want to replace it with this new Calendar : new calendar component

this is the code of this component :

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

const MyCalendar = () => {
    const [date, setDate] = useState(new Date());
    const onChange = (date) => setDate(date);
    return (
        <div>
            <h5 className="card-title mb-0">Calendar</h5>

            <Calendar onChange={onChange} value={date} />

        </div>
    );
};

export default MyCalendar;

Those components are both on the website but I could not make it dynamically work, I've install it from Here

Thank you !

Upvotes: 0

Views: 800

Answers (1)

webcoder
webcoder

Reputation: 1517

Looks like you are missing to pass the prop from onChange, try:

 <Calendar onChange={(value, event) => onChange(value)} value={date} />

or try:

 <Calendar onChange={(value, event) => setDate(value)} value={date} />

Upvotes: 1

Related Questions