Это фаил Calendar.js
import React, { Component } from "react";
import CalendarDays from "./calendar-days";
import "./Calendar.scss"
export default class Calendar extends Component{
constructor(){
super();
this.weekdays = ['Воскресенье', 'Понидельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота' ];
this.months = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябырь', 'Ноябырь', 'Декабрь'];
this.state = {
currentDay: new Date()
}
}
changeCurrentDay = (day) => {
this.setState({ currentDay: new Date(day.year, day.month, day.number)});
}
render(){
return(
<div className="calendar">
<div className="calendar-header">
<h2>{this.months[this.state.currentDay.getMonth()]} {this.state.currentDay.getFullYear()}</h2>
</div>
<div className="calendar-body">
<div className="table-header">
{
this.weekdays.map((weekday, index) => {
return(
<div key={index}>
<div className="weekday"><p>{weekday}</p></div>
</div>
)
})
}
</div>
<CalendarDays day={this.state.currentDay} changeCurrentDay={this.changeCurrentDay} />
</div>
</div>
)
}
}
Это фаил calendar-days.js
function CalendarDays (props){
let firstDayOfMonth = new Date(props.day.getFullYear(), props.day.getMonth(), 1);
let weekdayOfFirstDay = firstDayOfMonth.getDay();
let currentDays = [];
for(let day = 0; day < 42; day++){
if(day === 0 && weekdayOfFirstDay === 0){
firstDayOfMonth.setDate(firstDayOfMonth.getDate() - 7);
} else if( day === 0) {
firstDayOfMonth.setDate(firstDayOfMonth.getDate() + (day - weekdayOfFirstDay));
}
else {
firstDayOfMonth.setDate(firstDayOfMonth.getDate() + 1);
}
let calendarDay = {
currentMonth: (firstDayOfMonth.getMonth() === props.day.getMonth()),
date: (new Date(firstDayOfMonth)),
month: firstDayOfMonth.getMonth(),
number: firstDayOfMonth.getDate(),
selected: (firstDayOfMonth.toDateString() === props.day.toDateString()),
year: firstDayOfMonth.getFullYear()
}
currentDays.push(calendarDay);
//console.log(calendarDay)
}
return (
<div className="table-content">
{
currentDays.map((day, index) => {
return (
<div key={index} className={"calendar-day" + (day.currentMonth ? " current" : "") + (day.selected ? " selected" : "") + (day.currentMonth === false ? " non": "")}
onClick={() => props.changeCurrentDay(day)}>
<p>{day.number}</p>
</div>
)
})
}
</div>
)
}
export default CalendarDays;